204 lines
7.8 KiB
JavaScript
204 lines
7.8 KiB
JavaScript
import * as React from 'react';
|
|
import { Maximize2, Minimize2, PanelRightClose, RotateCcw, Sparkles } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { Surface } from '@/components/ds/Surface';
|
|
import { IconButton } from '@/components/ds/IconButton';
|
|
import { Alert } from '@/components/ds/Alert';
|
|
import { useAssistantFacts, useConversation, useCurrentUserName } from './useAssistant';
|
|
import { buildIntro, buildPrompts } from './dynamic';
|
|
import { Message, ThinkingIndicator, TurnDivider } from './AssistantMessage';
|
|
import { PromptInput } from './PromptInput';
|
|
import { PromptChips } from './PromptChips';
|
|
|
|
/**
|
|
* Owliver — the dashboard's contextual panel.
|
|
*
|
|
* One component, reused on every supported page; only `context` differs.
|
|
*
|
|
* The frame is fixed at three parts — header, body, composer — and only the body
|
|
* scrolls. That is what lets the panel stay pinned beside a long dashboard
|
|
* without ever growing the page or scrolling its own input out of reach.
|
|
*
|
|
* The frame does not change between states, only the body's content does: an
|
|
* empty thread shows the greeting and this page's most relevant fact, and once a
|
|
* question is asked the same region holds the conversation. Keeping the composer
|
|
* anchored either way means the primary action never moves under the user, and
|
|
* the panel never reads as two different components.
|
|
*
|
|
* `expanded` widens the same panel into an analysis workspace. `data-wide` lets
|
|
* individual response blocks use the extra room (a KPI row goes to three
|
|
* columns) without any of them needing to know the panel's pixel width.
|
|
*
|
|
* Independent of Owliver. Answers come from a provider (see provider.js) that
|
|
* can later be pointed at an external service without changing anything here.
|
|
*/
|
|
export default function KrowAssistant({
|
|
context,
|
|
className,
|
|
expanded = false,
|
|
onClose,
|
|
onExpand,
|
|
onRestore,
|
|
}) {
|
|
const facts = useAssistantFacts();
|
|
const userName = useCurrentUserName();
|
|
const { messages, pending, error, busy, send, stop, reset } = useConversation({
|
|
contextId: context.id,
|
|
facts,
|
|
});
|
|
|
|
const [input, setInput] = React.useState('');
|
|
const scrollRef = React.useRef(null);
|
|
const isEmpty = messages.length === 0 && !pending;
|
|
|
|
/* Greeting and suggestions come from live data, so they recompute only when
|
|
the data or the page actually changes. */
|
|
const intro = React.useMemo(
|
|
() => buildIntro(context.id, facts, userName),
|
|
[context.id, facts, userName]
|
|
);
|
|
const prompts = React.useMemo(() => buildPrompts(context.id, facts), [context.id, facts]);
|
|
|
|
/* Follow the newest content. Direct `scrollTop` rather than smooth scrolling:
|
|
at streaming frequency a smooth scroll never catches up and the thread
|
|
visibly lags the text. */
|
|
React.useEffect(() => {
|
|
const el = scrollRef.current;
|
|
if (el) el.scrollTop = el.scrollHeight;
|
|
}, [messages, pending]);
|
|
|
|
const submit = React.useCallback((text) => {
|
|
const question = String(text).trim();
|
|
if (!question || busy) return;
|
|
send({ question });
|
|
setInput('');
|
|
}, [busy, send]);
|
|
|
|
/* A chip is already a complete question, so it runs on click. */
|
|
const runPrompt = React.useCallback((prompt) => {
|
|
if (busy) return;
|
|
setInput('');
|
|
send({ question: prompt.prompt, capability: prompt.capability });
|
|
}, [busy, send]);
|
|
|
|
const composer = (
|
|
<PromptInput
|
|
value={input}
|
|
onChange={setInput}
|
|
onSubmit={submit}
|
|
onStop={stop}
|
|
busy={busy}
|
|
placeholders={intro.placeholders}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<Surface
|
|
variant="glass"
|
|
radius="xl"
|
|
padding="none"
|
|
elevation="sm"
|
|
data-wide={expanded || undefined}
|
|
className={cn('flex flex-col overflow-hidden', className)}
|
|
role="region"
|
|
aria-label="Owliver assistant"
|
|
>
|
|
{/* Header */}
|
|
<div className="flex shrink-0 items-center gap-2.5 border-b border-white/60 px-3.5 py-2.5">
|
|
<span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-krow-blue text-white shadow-brand">
|
|
<Sparkles className="h-3.5 w-3.5" aria-hidden="true" />
|
|
</span>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<h2 className="font-heading text-body-sm font-semibold leading-tight text-ink-1">Owliver</h2>
|
|
<p className="truncate text-caption leading-tight text-ink-3">{context.page}</p>
|
|
</div>
|
|
|
|
{/* Window controls */}
|
|
<div className="flex items-center gap-0.5">
|
|
{messages.length > 0 && (
|
|
<IconButton icon={RotateCcw} label="New conversation" variant="ghost" size="sm" onClick={reset} />
|
|
)}
|
|
{expanded
|
|
? onRestore && (
|
|
<IconButton icon={Minimize2} label="Restore the default workspace width" variant="ghost" size="sm" onClick={onRestore} />
|
|
)
|
|
: onExpand && (
|
|
<IconButton icon={Maximize2} label="Expand the Owliver workspace" variant="ghost" size="sm" onClick={onExpand} />
|
|
)}
|
|
{onClose && (
|
|
<IconButton icon={PanelRightClose} label="Collapse the Owliver workspace" variant="ghost" size="sm" onClick={onClose} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Body: the only region that scrolls ─────────────────────────── */}
|
|
<div
|
|
ref={scrollRef}
|
|
className="min-h-0 flex-1 overflow-y-auto px-4 py-3.5"
|
|
aria-live="polite"
|
|
aria-relevant="additions text"
|
|
>
|
|
{isEmpty ? (
|
|
/* Greeting and the single most relevant fact about this page. Top
|
|
aligned rather than centred: it is the first thing in a
|
|
conversation, not a splash screen, so it belongs where the first
|
|
message would be. */
|
|
<div className="animate-fade-in">
|
|
<p className="font-heading text-body-lg font-semibold leading-snug text-ink-1">
|
|
{intro.title}
|
|
</p>
|
|
<p className="mt-1 text-balance text-body-sm leading-relaxed text-ink-2">
|
|
{intro.greeting}
|
|
</p>
|
|
<p className="mt-2.5 border-t border-border/70 pt-2.5 text-caption leading-relaxed text-ink-3">
|
|
{intro.description}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{messages.map((message, i) => (
|
|
<React.Fragment key={i}>
|
|
{i > 0 && message.role === 'user' && <TurnDivider />}
|
|
<Message
|
|
role={message.role}
|
|
text={message.text}
|
|
blocks={message.blocks}
|
|
stopped={message.stopped}
|
|
/>
|
|
</React.Fragment>
|
|
))}
|
|
|
|
{pending?.thinking && <ThinkingIndicator />}
|
|
{pending && !pending.thinking && (
|
|
<Message role="assistant" blocks={pending.blocks} streaming />
|
|
)}
|
|
|
|
{error && <Alert tone="destructive">{error}</Alert>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Composer: fixed to the bottom in both states ───────────────── */}
|
|
<div className="shrink-0 space-y-2 border-t border-white/60 px-3 pb-2.5 pt-2.5">
|
|
{/* All suggestions on the landing screen, where they teach what can be
|
|
asked. Capped once a thread exists, because from then on the vertical
|
|
space belongs to the conversation. Expanded fits more per line, so it
|
|
can afford one more. */}
|
|
{!busy && (
|
|
<PromptChips
|
|
prompts={prompts}
|
|
onSelect={runPrompt}
|
|
max={isEmpty ? undefined : expanded ? 4 : 3}
|
|
align="start"
|
|
/>
|
|
)}
|
|
{composer}
|
|
<p className="px-1 text-[10px] leading-tight text-ink-4">
|
|
Owliver reads this page's data. Check anything you act on.
|
|
</p>
|
|
</div>
|
|
</Surface>
|
|
);
|
|
}
|