feat(frontend): restyle ThothII to the Omics Portal (GSD) design system
Adopt the portal's design language so the app embeds seamlessly into its header/sidebar chrome later: - Token layer rewritten as raw OKLCH triplets (the previous oklch()-wrapped vars produced invalid colors; the UI was effectively unstyled). Values mirror GSD: Manrope + Fraunces fonts, #cb333b red brand, warm off-white surfaces, pill buttons, brand focus rings. Dark tokens follow .dark or the portal's [data-bs-theme=dark]. - Layout: no left sidebar, no header (the portal supplies them). Conversation column flush-left with a slim F1-F8 phase strip; session rail moved to the RIGHT, mirroring the portal's left sidebar (red section label, red-tint active item). Editorial empty state. - Transcript component now actually renders the streamed assistant turns (the store accumulated them but nothing displayed them). Toaster mounted for errors (matchMedia polyfill added to the jsdom test setup). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -4,15 +4,15 @@ import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-full border border-transparent bg-clip-padding text-sm font-semibold tracking-[0.005em] whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/25 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
default: "bg-primary text-primary-foreground hover:bg-[oklch(var(--primary-hover))]",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,oklch(var(--secondary)),oklch(var(--foreground))_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
@@ -21,15 +21,13 @@ const buttonVariants = cva(
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
"h-8 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
|
||||
xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 px-3 text-[0.8rem] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-10 gap-1.5 px-5 text-[0.9rem] has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm": "size-7",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -28,9 +28,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--normal-bg": "oklch(var(--popover))",
|
||||
"--normal-text": "oklch(var(--popover-foreground))",
|
||||
"--normal-border": "oklch(var(--border))",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
|
||||
+162
-73
@@ -1,89 +1,178 @@
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@import "@fontsource-variable/geist";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/*
|
||||
* GSD theme — mirrors the Omics Portal design system (Manrope + Fraunces, warm
|
||||
* off-white surfaces, #cb333b red). Tokens are RAW OKLCH triplets (L C H) so the
|
||||
* Tailwind v3 config can wrap them as `oklch(var(--token) / <alpha-value>)` and
|
||||
* opacity utilities (bg-primary/80, …) keep working. Dark tokens follow either a
|
||||
* `.dark` class or the portal's `[data-bs-theme="dark"]`, ready for embedding.
|
||||
*/
|
||||
@layer base {
|
||||
.theme {
|
||||
--font-heading: var(--font-sans);
|
||||
--font-sans: 'Geist Variable', sans-serif
|
||||
}
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0)
|
||||
--font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
|
||||
--font-heading: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
|
||||
|
||||
--background: 0.9918 0.0011 17.2; /* surface */
|
||||
--foreground: 0.2678 0.0097 355.6; /* text */
|
||||
--card: 0.9985 0.0006 17.2;
|
||||
--card-foreground: 0.2678 0.0097 355.6;
|
||||
--popover: 0.9985 0.0006 17.2;
|
||||
--popover-foreground: 0.2678 0.0097 355.6;
|
||||
--primary: 0.5587 0.1881 23.2; /* gsd red */
|
||||
--primary-foreground: 0.9918 0.0011 17.2;
|
||||
--primary-hover: 0.5095 0.1812 24.1;
|
||||
--secondary: 0.9709 0.0011 17.2; /* surface-alt */
|
||||
--secondary-foreground: 0.2678 0.0097 355.6;
|
||||
--muted: 0.9709 0.0011 17.2;
|
||||
--muted-foreground: 0.5133 0.0088 345.6;
|
||||
--accent: 0.9408 0.0011 17.2; /* sunken */
|
||||
--accent-foreground: 0.2678 0.0097 355.6;
|
||||
--destructive: 0.5587 0.1881 23.2;
|
||||
--destructive-foreground: 0.9918 0.0011 17.2;
|
||||
--border: 0.9093 0.0035 354.7;
|
||||
--input: 0.9093 0.0035 354.7;
|
||||
--ring: 0.5587 0.1881 23.2;
|
||||
--success: 0.7577 0.1581 165.0;
|
||||
--warning: 0.8523 0.1386 78.9;
|
||||
--info: 0.7035 0.1128 221.3;
|
||||
--radius: 0.5rem;
|
||||
--sidebar: 0.9709 0.0011 17.2;
|
||||
--sidebar-foreground: 0.2678 0.0097 355.6;
|
||||
--sidebar-primary: 0.5587 0.1881 23.2;
|
||||
--sidebar-primary-foreground: 0.9918 0.0011 17.2;
|
||||
--sidebar-accent: 0.9408 0.0011 17.2;
|
||||
--sidebar-accent-foreground: 0.2678 0.0097 355.6;
|
||||
--sidebar-border: 0.9093 0.0035 354.7;
|
||||
--sidebar-ring: 0.5587 0.1881 23.2;
|
||||
}
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0)
|
||||
|
||||
.dark,
|
||||
[data-bs-theme="dark"] {
|
||||
--background: 0.2178 0 90;
|
||||
--foreground: 0.9310 0 90;
|
||||
--card: 0.2350 0 90;
|
||||
--card-foreground: 0.9310 0 90;
|
||||
--popover: 0.2350 0 90;
|
||||
--popover-foreground: 0.9310 0 90;
|
||||
--primary: 0.6023 0.1848 20.3;
|
||||
--primary-foreground: 0.9310 0 90;
|
||||
--primary-hover: 0.6897 0.1779 16.9;
|
||||
--secondary: 0.2972 0 90;
|
||||
--secondary-foreground: 0.9310 0 90;
|
||||
--muted: 0.2972 0 90;
|
||||
--muted-foreground: 0.7826 0 90;
|
||||
--accent: 0.3485 0 90;
|
||||
--accent-foreground: 0.9310 0 90;
|
||||
--destructive: 0.6023 0.1848 20.3;
|
||||
--destructive-foreground: 0.9310 0 90;
|
||||
--border: 0.3715 0 90;
|
||||
--input: 0.3715 0 90;
|
||||
--ring: 0.6897 0.1779 16.9;
|
||||
--sidebar: 0.2350 0 90;
|
||||
--sidebar-foreground: 0.9310 0 90;
|
||||
--sidebar-primary: 0.6023 0.1848 20.3;
|
||||
--sidebar-primary-foreground: 0.9310 0 90;
|
||||
--sidebar-accent: 0.3485 0 90;
|
||||
--sidebar-accent-foreground: 0.9310 0 90;
|
||||
--sidebar-border: 0.3715 0 90;
|
||||
--sidebar-ring: 0.6897 0.1779 16.9;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground antialiased;
|
||||
font-feature-settings: "ss01", "cv11";
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-optical-sizing: auto;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: oklch(var(--primary) / 0.16);
|
||||
}
|
||||
|
||||
/* Thin, brand-tinted scrollbars */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: oklch(var(--border)) transparent;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: oklch(var(--border));
|
||||
border-radius: 9999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: oklch(var(--muted-foreground) / 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Minimal markdown prose for assistant turns (no typography plugin installed).
|
||||
* Scoped so it never leaks into widgets.
|
||||
*/
|
||||
@layer components {
|
||||
.thot-prose {
|
||||
color: oklch(var(--foreground));
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.thot-prose > :first-child { margin-top: 0; }
|
||||
.thot-prose > :last-child { margin-bottom: 0; }
|
||||
.thot-prose p { margin: 0.6em 0; }
|
||||
.thot-prose h1, .thot-prose h2, .thot-prose h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
margin: 1.1em 0 0.5em;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.thot-prose h1 { font-size: 1.4rem; }
|
||||
.thot-prose h2 { font-size: 1.2rem; }
|
||||
.thot-prose h3 { font-size: 1.05rem; }
|
||||
.thot-prose ul, .thot-prose ol { margin: 0.6em 0; padding-left: 1.3em; }
|
||||
.thot-prose li { margin: 0.25em 0; }
|
||||
.thot-prose a { color: oklch(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
|
||||
.thot-prose code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.85em;
|
||||
background: oklch(var(--muted));
|
||||
padding: 0.12em 0.4em;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.thot-prose pre {
|
||||
background: oklch(var(--muted));
|
||||
padding: 0.9rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
overflow-x: auto;
|
||||
border: 1px solid oklch(var(--border));
|
||||
}
|
||||
.thot-prose pre code { background: transparent; padding: 0; }
|
||||
.thot-prose blockquote {
|
||||
border-left: 2px solid oklch(var(--border));
|
||||
padding-left: 0.9em;
|
||||
color: oklch(var(--muted-foreground));
|
||||
margin: 0.7em 0;
|
||||
}
|
||||
.thot-prose table { border-collapse: collapse; width: 100%; margin: 0.7em 0; font-size: 0.875rem; }
|
||||
.thot-prose th, .thot-prose td { border: 1px solid oklch(var(--border)); padding: 0.4em 0.6em; text-align: left; }
|
||||
.thot-prose th { background: oklch(var(--muted)); font-weight: 600; }
|
||||
}
|
||||
|
||||
@@ -1,64 +1,103 @@
|
||||
import { useState } from "react";
|
||||
import { useSessionStream } from "../stream/useSessionStream";
|
||||
import { WidgetHost } from "./WidgetHost";
|
||||
import { Transcript } from "./Transcript";
|
||||
import { NavSessions } from "./NavSessions";
|
||||
import { NewSessionDialog } from "./NewSessionDialog";
|
||||
import { SettingsDialog } from "./SettingsDialog";
|
||||
import { SteerInput } from "./SteerInput";
|
||||
import { WorkflowBar } from "./WorkflowBar";
|
||||
import { Toaster } from "../components/ui/sonner";
|
||||
import { useState } from "react";
|
||||
|
||||
/**
|
||||
* The page is designed to live INSIDE the Omics Portal chrome (its left sidebar
|
||||
* + topbar) once embedded, so this shell intentionally has no left rail and no
|
||||
* top header of its own. The session rail sits on the RIGHT, mirroring the
|
||||
* portal's left sidebar, and the workflow phases ride a slim strip above the chat.
|
||||
*/
|
||||
export function AppShell() {
|
||||
const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
|
||||
useSessionStream(activeSessionId);
|
||||
|
||||
function handleSessionSelect(id: string) {
|
||||
setActiveSessionId(id);
|
||||
}
|
||||
|
||||
function handleCreated(id: string) {
|
||||
setActiveSessionId(id);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Left nav: new session button + sessions list */}
|
||||
<aside className="w-48 border-r p-2 flex flex-col gap-2">
|
||||
<NewSessionDialog onCreated={handleCreated} />
|
||||
<SettingsDialog />
|
||||
<NavSessions
|
||||
activeSessionId={activeSessionId}
|
||||
onSessionSelect={handleSessionSelect}
|
||||
/>
|
||||
</aside>
|
||||
<div className="flex h-screen bg-background text-foreground">
|
||||
{/* Conversation column */}
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
{activeSessionId && (
|
||||
<div className="shrink-0 border-b border-border/70 bg-background/80 px-6 py-2.5 backdrop-blur">
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<WorkflowBar />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
{/* Top workflow bar */}
|
||||
<header className="border-b px-4 py-2 flex items-center gap-4">
|
||||
<WorkflowBar />
|
||||
<button
|
||||
className="ml-auto text-xs text-muted-foreground hover:text-foreground border rounded px-2 py-0.5"
|
||||
onClick={() => setSidebarOpen((v) => !v)}
|
||||
aria-label={sidebarOpen ? "Chiudi sidebar" : "Apri sidebar"}
|
||||
>
|
||||
{sidebarOpen ? "←" : "→"}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Center: chat + steer input */}
|
||||
<main className="flex-1 overflow-auto p-4 flex flex-col gap-2">
|
||||
<WidgetHost sessionId={activeSessionId} />
|
||||
{activeSessionId && <SteerInput sessionId={activeSessionId} />}
|
||||
<main className="flex-1 overflow-y-auto px-6 py-8">
|
||||
<div className="mx-auto flex max-w-3xl flex-col gap-6">
|
||||
{activeSessionId ? (
|
||||
<>
|
||||
<Transcript />
|
||||
<WidgetHost sessionId={activeSessionId} />
|
||||
</>
|
||||
) : (
|
||||
<EmptyState />
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{activeSessionId && (
|
||||
<div className="shrink-0 px-6 pb-6 pt-2">
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<SteerInput sessionId={activeSessionId} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right artifact sidebar — collapsible */}
|
||||
{sidebarOpen && (
|
||||
<aside className="w-64 border-l p-2 flex flex-col">
|
||||
<p className="text-xs text-muted-foreground">Artefatti</p>
|
||||
</aside>
|
||||
)}
|
||||
{/* Right session rail — symmetric to the portal's left sidebar */}
|
||||
<aside className="flex w-[280px] shrink-0 flex-col border-l border-border bg-sidebar">
|
||||
<div className="px-4 pb-3 pt-5">
|
||||
<h1 className="font-heading text-xl font-semibold leading-none tracking-tight text-foreground">
|
||||
Thoth<span className="text-primary">II</span>
|
||||
</h1>
|
||||
<p className="mt-1.5 text-[0.7rem] uppercase tracking-[0.14em] text-muted-foreground">
|
||||
Query in linguaggio naturale
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 px-4 pb-3">
|
||||
<NewSessionDialog onCreated={setActiveSessionId} />
|
||||
<SettingsDialog />
|
||||
</div>
|
||||
|
||||
<div className="px-4 pb-1.5 pt-1">
|
||||
<span className="text-[0.7rem] font-bold uppercase tracking-[0.12em] text-primary">
|
||||
Sessioni
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-2 pb-4">
|
||||
<NavSessions
|
||||
activeSessionId={activeSessionId}
|
||||
onSessionSelect={setActiveSessionId}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<Toaster />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div className="flex min-h-[60vh] flex-col items-center justify-center text-center">
|
||||
<span className="font-heading text-5xl font-semibold tracking-tight text-foreground">
|
||||
Thoth<span className="text-primary">II</span>
|
||||
</span>
|
||||
<p className="mt-4 max-w-md text-balance text-[0.95rem] leading-relaxed text-muted-foreground">
|
||||
Interroga il tuo data warehouse in linguaggio naturale. Crea una nuova
|
||||
domanda dal pannello a destra per avviare una sessione guidata.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -23,24 +23,58 @@ export function NavSessions({ activeSessionId, onSessionSelect }: Props) {
|
||||
onSessionSelect(id);
|
||||
}
|
||||
|
||||
if (sessions.length === 0) {
|
||||
return (
|
||||
<p className="px-1 py-6 text-center text-xs text-muted-foreground">
|
||||
Nessuna sessione. Inizia con <span className="font-medium text-foreground">Nuova domanda</span>.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="flex flex-col gap-1">
|
||||
{sessions.map((s) => (
|
||||
<li key={s.id}>
|
||||
<button
|
||||
data-testid={`session-item-${s.id}`}
|
||||
data-active={s.id === activeSessionId ? "true" : "false"}
|
||||
onClick={() => handleClick(s.id)}
|
||||
className={[
|
||||
"w-full text-left rounded px-2 py-1 text-xs hover:bg-accent truncate",
|
||||
s.id === activeSessionId ? "bg-accent font-semibold" : "",
|
||||
].join(" ")}
|
||||
>
|
||||
<span className="block truncate">{s.question || s.id}</span>
|
||||
<span className="block text-muted-foreground text-[10px]">{s.status}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<ul className="flex flex-col gap-0.5">
|
||||
{sessions.map((s) => {
|
||||
const active = s.id === activeSessionId;
|
||||
return (
|
||||
<li key={s.id}>
|
||||
<button
|
||||
data-testid={`session-item-${s.id}`}
|
||||
data-active={active ? "true" : "false"}
|
||||
onClick={() => handleClick(s.id)}
|
||||
className={[
|
||||
"group w-full rounded-lg px-2.5 py-2 text-left transition-colors",
|
||||
active
|
||||
? "bg-[oklch(var(--primary)/0.12)]"
|
||||
: "hover:bg-accent",
|
||||
].join(" ")}
|
||||
>
|
||||
<span
|
||||
className={[
|
||||
"block truncate text-[0.8rem] leading-snug",
|
||||
active ? "font-bold text-primary" : "text-foreground/90",
|
||||
].join(" ")}
|
||||
>
|
||||
{s.question || s.id}
|
||||
</span>
|
||||
<span className="mt-1 flex items-center gap-1.5">
|
||||
<span
|
||||
className={[
|
||||
"size-1.5 rounded-full",
|
||||
s.status === "open"
|
||||
? "bg-[oklch(var(--success))]"
|
||||
: s.status === "finalized"
|
||||
? "bg-primary"
|
||||
: "bg-muted-foreground/50",
|
||||
].join(" ")}
|
||||
/>
|
||||
<span className="text-[0.65rem] uppercase tracking-wide text-muted-foreground">
|
||||
{s.status}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@ export function NewSessionDialog({ onCreated }: Props) {
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium mb-1" htmlFor="nsd-question">
|
||||
<label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="nsd-question">
|
||||
Domanda
|
||||
</label>
|
||||
<textarea
|
||||
@@ -63,7 +63,7 @@ export function NewSessionDialog({ onCreated }: Props) {
|
||||
value={question}
|
||||
onChange={(e) => setQuestion(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 resize-none"
|
||||
className="w-full resize-none rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
|
||||
placeholder="Inserisci la tua domanda…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -98,14 +98,14 @@ export function SettingsDialog() {
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSave} className="flex flex-col gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium mb-1" htmlFor="set-workspace">
|
||||
<label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="set-workspace">
|
||||
Workspace
|
||||
</label>
|
||||
<select
|
||||
id="set-workspace"
|
||||
value={workspace}
|
||||
onChange={(e) => setWorkspace(e.target.value)}
|
||||
className="w-full border rounded px-2 py-1 text-sm"
|
||||
className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
|
||||
>
|
||||
{workspaces.length === 0 ? (
|
||||
<option value="">—</option>
|
||||
@@ -120,7 +120,7 @@ export function SettingsDialog() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium mb-1" htmlFor="set-provider">
|
||||
<label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="set-provider">
|
||||
Provider
|
||||
</label>
|
||||
{hasModels ? (
|
||||
@@ -131,7 +131,7 @@ export function SettingsDialog() {
|
||||
setProvider(e.target.value);
|
||||
setModel(""); // reset model when provider changes
|
||||
}}
|
||||
className="w-full border rounded px-2 py-1 text-sm"
|
||||
className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
|
||||
>
|
||||
<option value="">— tutti —</option>
|
||||
{providers.map((p) => (
|
||||
@@ -147,14 +147,14 @@ export function SettingsDialog() {
|
||||
value={provider}
|
||||
onChange={(e) => setProvider(e.target.value)}
|
||||
placeholder="es. anthropic"
|
||||
className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1"
|
||||
className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
|
||||
data-testid="provider-freetext"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium mb-1" htmlFor="set-model">
|
||||
<label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="set-model">
|
||||
Modello
|
||||
</label>
|
||||
{hasModels ? (
|
||||
@@ -162,7 +162,7 @@ export function SettingsDialog() {
|
||||
id="set-model"
|
||||
value={model}
|
||||
onChange={(e) => setModel(e.target.value)}
|
||||
className="w-full border rounded px-2 py-1 text-sm"
|
||||
className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
|
||||
>
|
||||
<option value="">— default —</option>
|
||||
{modelsForProvider.map((m) => (
|
||||
@@ -178,21 +178,21 @@ export function SettingsDialog() {
|
||||
value={model}
|
||||
onChange={(e) => setModel(e.target.value)}
|
||||
placeholder="es. glm-5.2"
|
||||
className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1"
|
||||
className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
|
||||
data-testid="model-freetext"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium mb-1" htmlFor="set-thinking">
|
||||
<label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="set-thinking">
|
||||
Thinking
|
||||
</label>
|
||||
<select
|
||||
id="set-thinking"
|
||||
value={thinking}
|
||||
onChange={(e) => setThinking(e.target.value)}
|
||||
className="w-full border rounded px-2 py-1 text-sm"
|
||||
className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
|
||||
>
|
||||
{THINKING_LEVELS.map((lvl) => (
|
||||
<option key={lvl} value={lvl}>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
// frontend/src/shell/SteerInput.tsx
|
||||
import { useState } from "react";
|
||||
import { ArrowUpIcon } from "lucide-react";
|
||||
import { postSteer } from "../api/sessions";
|
||||
import { Button } from "../components/ui/button";
|
||||
|
||||
interface Props {
|
||||
sessionId: string;
|
||||
@@ -24,21 +26,24 @@ export function SteerInput({ sessionId }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center border-t pt-2">
|
||||
<div className="flex items-center gap-2 rounded-full border border-input bg-card px-2 py-1.5 shadow-sm transition-colors focus-within:border-primary/40 focus-within:ring-3 focus-within:ring-ring/15">
|
||||
<input
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Steering libero (!)…"
|
||||
className="flex-1 border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1"
|
||||
aria-label="Steering"
|
||||
className="flex-1 bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
size="icon-sm"
|
||||
onClick={submit}
|
||||
className="border rounded px-3 py-1 text-sm hover:bg-accent"
|
||||
disabled={!text.trim()}
|
||||
aria-label="Invia"
|
||||
>
|
||||
Invia
|
||||
</button>
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
// frontend/src/shell/Transcript.tsx
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { useSessionStore } from "../store/sessionStore";
|
||||
|
||||
/**
|
||||
* Renders the streamed assistant conversation. The store accumulates assistant
|
||||
* text deltas in `transcript`; this is the surface that shows them.
|
||||
*/
|
||||
export function Transcript() {
|
||||
const transcript = useSessionStore((s) => s.transcript);
|
||||
if (transcript.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{transcript.map((entry, i) => (
|
||||
<article key={i} className="flex flex-col gap-1.5">
|
||||
<span className="font-heading text-xs font-semibold uppercase tracking-[0.12em] text-primary/80">
|
||||
ThothII
|
||||
</span>
|
||||
<div className="thot-prose">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{entry.text}</ReactMarkdown>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -14,25 +14,55 @@ const PHASES = [
|
||||
|
||||
export function WorkflowBar() {
|
||||
const currentPhase = useSessionStore((s) => s.currentPhase);
|
||||
const activeIdx = PHASES.findIndex((p) => p.id === currentPhase);
|
||||
|
||||
return (
|
||||
<nav className="flex gap-1 overflow-x-auto">
|
||||
{PHASES.map((p) => {
|
||||
<nav
|
||||
aria-label="Avanzamento workflow"
|
||||
className="flex items-center gap-0 overflow-x-auto py-0.5"
|
||||
>
|
||||
{PHASES.map((p, i) => {
|
||||
const isActive = currentPhase === p.id;
|
||||
const isDone = activeIdx > -1 && i < activeIdx;
|
||||
return (
|
||||
<span
|
||||
key={p.id}
|
||||
data-testid={`phase-${p.id}`}
|
||||
data-active={isActive ? "true" : "false"}
|
||||
className={[
|
||||
"px-2 py-0.5 rounded text-xs whitespace-nowrap",
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground font-bold"
|
||||
: "text-muted-foreground border",
|
||||
].join(" ")}
|
||||
>
|
||||
{p.id}: {p.name}
|
||||
</span>
|
||||
<div key={p.id} className="flex items-center">
|
||||
{i > 0 && (
|
||||
<span
|
||||
aria-hidden
|
||||
className={[
|
||||
"mx-1.5 h-px w-4 shrink-0",
|
||||
isDone || isActive ? "bg-primary/40" : "bg-border",
|
||||
].join(" ")}
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
data-testid={`phase-${p.id}`}
|
||||
data-active={isActive ? "true" : "false"}
|
||||
title={`${p.id}: ${p.name}`}
|
||||
className={[
|
||||
"inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-1 text-xs transition-colors",
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground font-semibold shadow-sm shadow-primary/20"
|
||||
: isDone
|
||||
? "text-foreground/70 font-medium"
|
||||
: "text-muted-foreground",
|
||||
].join(" ")}
|
||||
>
|
||||
<span
|
||||
className={[
|
||||
"font-heading text-[0.7rem] font-semibold",
|
||||
isActive
|
||||
? "text-primary-foreground"
|
||||
: isDone
|
||||
? "text-primary/80"
|
||||
: "text-muted-foreground/70",
|
||||
].join(" ")}
|
||||
>
|
||||
{p.id}
|
||||
</span>
|
||||
<span className={isActive ? "inline" : "hidden md:inline"}>{p.name}</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
@@ -1,6 +1,21 @@
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
import { server } from "./msw";
|
||||
|
||||
// jsdom lacks matchMedia; sonner's <Toaster> (mounted in AppShell) needs it.
|
||||
if (!window.matchMedia) {
|
||||
window.matchMedia = (query: string) =>
|
||||
({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
dispatchEvent: () => false,
|
||||
}) as unknown as MediaQueryList;
|
||||
}
|
||||
|
||||
beforeAll(() => server.listen());
|
||||
afterEach(() => server.resetHandlers());
|
||||
afterAll(() => server.close());
|
||||
|
||||
Reference in New Issue
Block a user