@sybilion/uilib 1.0.20

package/src/components/ui/Chat/ChatMessage/presetScript.ts

@@ -0,0 +1,282 @@
+import type { Message } from '../Chat.types';
+import { MessageRole } from '../Chat.types';
+
+function normalizeBranchMatchText(s: string): string {
+  return s.trim().normalize('NFC');
+}
+
+/** Branching demo: `initialMessage` + string-keyed nodes; buttons use `[Label|branchKey]`. */
+export type PresetScriptGraph = {
+  initialMessage: string;
+} & Record<string, string>;
+
+export function isPresetScriptGraph(
+  script: string[] | string | PresetScriptGraph | undefined,
+): script is PresetScriptGraph {
+  return (
+    script != null &&
+    typeof script === 'object' &&
+    !Array.isArray(script) &&
+    typeof (script as PresetScriptGraph).initialMessage === 'string'
+  );
+}
+
+function isPlainStringRecord(o: unknown): o is Record<string, string> {
+  if (o === null || typeof o !== 'object' || Array.isArray(o)) return false;
+  const rec = o as Record<string, unknown>;
+  for (const k of Object.keys(rec)) {
+    if (typeof rec[k] !== 'string') return false;
+  }
+  return true;
+}
+
+function tryParsePresetScriptGraph(
+  trimmed: string,
+  existing?: string[] | string | PresetScriptGraph,
+): PresetScriptGraph | null {
+  const candidate = trimmed.startsWith('{') ? trimmed : `{${trimmed}}`;
+  const fixed = candidate.replace(/,\s*}\s*$/, '}').trim();
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(fixed);
+  } catch {
+    return null;
+  }
+  if (!isPlainStringRecord(parsed)) return null;
+  const graph = { ...parsed } as PresetScriptGraph;
+  if (!Object.prototype.hasOwnProperty.call(graph, 'initialMessage')) {
+    if (isPresetScriptGraph(existing)) {
+      graph.initialMessage = existing.initialMessage;
+    } else {
+      return null;
+    }
+  }
+  return graph;
+}
+
+/**
+ * Parse Script field: branching graph as JSON (full `{ ... }` or inner `"key": "value",` list),
+ * or linear script as newline-separated lines. Empty input → undefined.
+ */
+export function parsePresetScriptFieldInput(
+  raw: string,
+  existing?: string[] | string | PresetScriptGraph,
+): PresetScriptGraph | string[] | undefined {
+  const trimmed = raw.trim();
+  if (trimmed === '') return undefined;
+
+  const graph = tryParsePresetScriptGraph(trimmed, existing);
+  if (graph != null) return graph;
+
+  const lines = raw.split('\n');
+  return lines.length === 1 && lines[0] === '' ? undefined : lines;
+}
+
+/** Branch map for quick-reply lookup (all keys except `initialMessage`). */
+export function branchesFromPresetScriptGraph(
+  graph: PresetScriptGraph,
+): Record<string, string> {
+  const { initialMessage: _im, ...rest } = graph;
+  void _im;
+  return rest;
+}
+
+/** Trailing ` [label]` defines the continue button; the rest is assistant body. */
+export function parseScriptLine(line: string): {
+  displayBody: string;
+  buttonLabel?: string;
+} {
+  const trimmed = line.trimEnd();
+  const m = trimmed.match(/^([\s\S]*?)\s+\[([^\]]+)\]\s*$/);
+  if (!m) return { displayBody: trimmed };
+  return { displayBody: m[1].trimEnd(), buttonLabel: m[2].trim() };
+}
+
+/** Same bracket rules as AgentMessageContent quick-reply parsing (no markdown link `[](url)`). */
+const QUICK_REPLY_BRACKET_RE =
+  /\[(?!CHART\]|DOWNLOAD_BUTTONS\]|DOWNLOAD:)([^\]]+)\](?!\()/gi;
+
+export function textHasQuickReplyMarkers(text: string): boolean {
+  const re = new RegExp(
+    QUICK_REPLY_BRACKET_RE.source,
+    QUICK_REPLY_BRACKET_RE.flags,
+  );
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(text)) !== null) {
+    const inner = m[1].trim();
+    const pipeIdx = inner.indexOf('|');
+    const displayLabel = pipeIdx >= 0 ? inner.slice(0, pipeIdx).trim() : inner;
+    const branchKey = pipeIdx >= 0 ? inner.slice(pipeIdx + 1).trim() : inner;
+    if (branchKey && displayLabel) return true;
+  }
+  return false;
+}
+
+/** Preset graph/linear step is done when assistant text has no `[Label|branchKey]` navigation. */
+export function isTerminalPresetScriptAssistantText(text: string): boolean {
+  return !textHasQuickReplyMarkers(text);
+}
+
+/**
+ * Graph intake: complete after this assistant bubble only when it is the `complete`
+ * node, or when `freeformNext` has no continuation for this key. Freeform prompts
+ * (e.g. p_mar “last question”) have no markers — do not treat as terminal via
+ * {@link isTerminalPresetScriptAssistantText} alone.
+ */
+export function isGraphIntakeAssistantStepComplete(
+  shownScriptKey: string,
+  freeformNext: Record<string, string>,
+  assistantBody: string,
+): boolean {
+  if (shownScriptKey === 'complete') return true;
+  const next = freeformNext[shownScriptKey];
+  if (next != null && next !== '') return false;
+  return isTerminalPresetScriptAssistantText(assistantBody);
+}
+
+export function humanizeBranchKey(key: string): string {
+  return key
+    .split(/[-_]+/)
+    .filter(Boolean)
+    .map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(' ');
+}
+
+/** Pairs from `[Label|branchKey]` (same rules as AgentMessageContent). */
+export function extractQuickReplyLabelKeyPairsFromText(text: string): Array<{
+  label: string;
+  key: string;
+}> {
+  const out: Array<{ label: string; key: string }> = [];
+  const re = new RegExp(
+    QUICK_REPLY_BRACKET_RE.source,
+    QUICK_REPLY_BRACKET_RE.flags,
+  );
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(text)) !== null) {
+    const inner = m[1].trim();
+    const pipeIdx = inner.indexOf('|');
+    const displayLabel = pipeIdx >= 0 ? inner.slice(0, pipeIdx).trim() : inner;
+    const branchKey = pipeIdx >= 0 ? inner.slice(pipeIdx + 1).trim() : inner;
+    if (branchKey && displayLabel) {
+      out.push({ label: displayLabel, key: branchKey });
+    }
+  }
+  return out;
+}
+
+/**
+ * If `userText` matches a `[label|key]` pair on the assistant message (trimmed NFC), return it.
+ */
+export function matchUserTextToQuickReply(
+  assistantText: string,
+  userText: string,
+): { key: string; label: string } | null {
+  const uNorm = normalizeBranchMatchText(userText);
+  for (const { label, key } of extractQuickReplyLabelKeyPairsFromText(
+    assistantText,
+  )) {
+    if (normalizeBranchMatchText(label) === uNorm) {
+      return { key, label };
+    }
+  }
+  return null;
+}
+
+/** First label seen in chat (assistant order) for a branch key; for synthetic row copy. */
+export function displayLabelForBranchKeyFromMessages(
+  branchKey: string,
+  messages: Message[] | undefined,
+): string | undefined {
+  if (!messages?.length) return undefined;
+  for (const msg of messages) {
+    if (msg.role !== MessageRole.ASSISTANT) continue;
+    for (const pair of extractQuickReplyLabelKeyPairsFromText(msg.text)) {
+      if (pair.key === branchKey) return pair.label;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Branch keys the user picked: USER line matches `[label|key]` on the **immediately
+ * preceding** assistant only (avoids suppressing the same label re-offered on a later bubble).
+ */
+export function branchKeysUsedFromChatHistory(
+  messages: Message[] | undefined,
+): string[] {
+  if (!messages?.length) return [];
+  const used = new Set<string>();
+  for (let i = 1; i < messages.length; i++) {
+    const u = messages[i];
+    if (u.role !== MessageRole.USER) continue;
+    let j = i - 1;
+    while (j >= 0 && messages[j].role !== MessageRole.ASSISTANT) j--;
+    if (j < 0) continue;
+    const a = messages[j];
+    const uNorm = normalizeBranchMatchText(u.text);
+    for (const { label, key } of extractQuickReplyLabelKeyPairsFromText(
+      a.text,
+    )) {
+      if (normalizeBranchMatchText(label) === uNorm) used.add(key);
+    }
+  }
+  return [...used];
+}
+
+/**
+ * User's last branch choice that led to the final assistant message: match the user
+ * line before last to `[label|key]` on the nearest preceding assistant bubble.
+ */
+export function entryBranchKeyBeforeLastAssistant(
+  messages: Message[] | undefined,
+): string | undefined {
+  if (!messages?.length) return undefined;
+  const lastIdx = messages.length - 1;
+  if (messages[lastIdx].role !== MessageRole.ASSISTANT) return undefined;
+  if (lastIdx < 2) return undefined;
+  const userMsg = messages[lastIdx - 1];
+  if (userMsg.role !== MessageRole.USER) return undefined;
+  let i = lastIdx - 2;
+  while (i >= 0 && messages[i].role !== MessageRole.ASSISTANT) i--;
+  if (i < 0) return undefined;
+  const prevAssistant = messages[i];
+  const uNorm = normalizeBranchMatchText(userMsg.text);
+  for (const { label, key } of extractQuickReplyLabelKeyPairsFromText(
+    prevAssistant.text,
+  )) {
+    if (normalizeBranchMatchText(label) === uNorm) return key;
+  }
+  return undefined;
+}
+
+/** Infer used branch keys from USER lines vs assistant `[label|key]` + humanized slug fallback. */
+export function branchKeysUsedByUserMessages(
+  messages: Message[] | undefined,
+  validBranchKeys: string[],
+): string[] {
+  if (!messages?.length || !validBranchKeys.length) return [];
+  const valid = new Set(validBranchKeys);
+  const userNorm = new Set(
+    messages
+      .filter(m => m.role === MessageRole.USER)
+      .map(m => normalizeBranchMatchText(m.text)),
+  );
+  const used = new Set<string>();
+  for (const msg of messages) {
+    if (msg.role !== MessageRole.ASSISTANT) continue;
+    for (const { label, key } of extractQuickReplyLabelKeyPairsFromText(
+      msg.text,
+    )) {
+      if (valid.has(key) && userNorm.has(normalizeBranchMatchText(label))) {
+        used.add(key);
+      }
+    }
+  }
+  for (const key of validBranchKeys) {
+    if (userNorm.has(normalizeBranchMatchText(humanizeBranchKey(key)))) {
+      used.add(key);
+    }
+  }
+  return [...used];
+}

package/src/components/ui/Chat/ChatPresets/ChatPresets.styl

@@ -0,0 +1,41 @@
+.root
+  // position fixed
+  width 100%
+  bottom 160px
+
+.inlineRoot
+  position relative
+  width 100%
+  margin-top var(--p-6)
+
+.inner
+  display flex
+  flex-wrap wrap
+  gap 8px
+  padding var(--p-2) var(--p-6) var(--p-3)
+  background-color var(--background)
+
+.innerInline
+  background-color transparent
+
+.item
+  flex-shrink 0
+  max-width 300px
+  padding var(--p-3)
+
+  background none
+  border 1px solid var(--border)
+  border-radius var(--p-4)
+  cursor pointer
+  transition all 0.2s ease
+  text-align left
+  font-size var(--text-xs)
+  line-height 1.4
+  white-space break-spaces
+  color var(--foreground)
+
+  &:hover
+    background var(--border) !important
+
+  :global(.dark) &
+    background-color var(--muted)

package/src/components/ui/Chat/ChatPresets/ChatPresets.styl.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'inlineRoot': string;
+  'inner': string;
+  'innerInline': string;
+  'item': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Chat/ChatPresets/ChatPresets.tsx

@@ -0,0 +1,59 @@
+import cn from 'classnames';
+import { useEffect, useState } from 'react';
+
+import { Button } from '#uilib/components/ui/Button';
+
+import type { ChatPreset } from '../Chat.types';
+import S from './ChatPresets.styl';
+
+export type ChatPresetsLayout = 'fixed' | 'inline';
+
+export interface ChatPresetsProps {
+  chatId: string;
+  items: ChatPreset[];
+  usedItemIds?: string[];
+  layout?: ChatPresetsLayout;
+  onSelect?: (preset: ChatPreset) => void;
+  onItemUsed?: (id: string) => void;
+}
+
+export function ChatPresets({
+  chatId,
+  items,
+  usedItemIds = [],
+  layout = 'fixed',
+  onSelect,
+  onItemUsed,
+}: ChatPresetsProps) {
+  const [localUsedItems, setLocalUsedItems] = useState<string[]>([]);
+
+  useEffect(() => {
+    setLocalUsedItems([]);
+  }, [chatId]);
+
+  const usedItems = [...new Set([...usedItemIds, ...localUsedItems])];
+  const availableItems = items.filter(item => !usedItems.includes(item.id));
+
+  if (availableItems.length === 0) return null;
+
+  return (
+    <div className={layout === 'inline' ? S.inlineRoot : S.root}>
+      <div className={cn(S.inner, layout === 'inline' && S.innerInline)}>
+        {availableItems.map(preset => (
+          <Button
+            key={preset.id}
+            type="button"
+            className={cn(S.item)}
+            onClick={() => {
+              onSelect?.(preset);
+              onItemUsed?.(preset.id);
+              setLocalUsedItems(prev => [...prev, preset.id]);
+            }}
+          >
+            {preset.text}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Chat/ChatPresets/index.ts

@@ -0,0 +1,2 @@
+export { ChatPresets } from './ChatPresets';
+export type { ChatPresetsLayout, ChatPresetsProps } from './ChatPresets';

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.styl

@@ -0,0 +1,84 @@
+@import 'lib/theme.styl';
+
+.root
+  position relative
+  display flex
+  flex-direction column
+  gap var(--p-2)
+  align-items center
+  padding var(--p-6)
+
+.input
+  flex 1
+  min-height 70px
+  resize none
+  border none
+  padding 0 !important
+  border-radius 0 !important
+  box-shadow none !important
+
+  &:focus
+    box-shadow none !important
+
+.actions
+  display flex
+  align-items center
+  flex-direction row-reverse
+  justify-content space-between
+  gap var(--p-2)
+
+  width 100%
+
+  & > button:focus
+    box-shadow 0 0 0 2px var(--brand-color-500) !important
+
+  & > button:first-child // submit button
+    position relative
+    border none
+
+    transition all 0.2s
+
+    &:focus
+      transform scale(1.2)
+
+    &::before
+      content ''
+      position absolute
+      top -100%
+      left -100%
+      right -100%
+      bottom -100%
+
+  .attachButton
+    background-color var(--page-color)
+    box-shadow 0 0 20px var(--background)
+
+.selectorWrapper
+  display flex
+  align-items center
+  gap var(--p-2)
+  min-width 200px
+  z-index 1000
+
+  & > button:first-child
+    flex 1
+  & > button:last-child
+    border-radius 50px
+    opacity 0.3
+
+  &:hover > button:last-child
+    opacity 1
+
+.selector
+  box-shadow 0 0 0 1px var(--border) !important
+
+.notice
+  font-size var(--text-xs)
+  text-align center
+  color var(--muted-foreground)
+  width 100%
+  // padding 0 var(--p-9)
+  // text-align center
+
+  @media (max-width MOBILE)
+    font-size 10px

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.styl.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'attachButton': string;
+  'input': string;
+  'notice': string;
+  'root': string;
+  'selector': string;
+  'selectorWrapper': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.tsx

@@ -0,0 +1,103 @@
+import cn from 'classnames';
+import { FormEvent, useEffect, useState } from 'react';
+
+import { ChatSelector } from '#uilib/components/ui/Chat/ChatSheet/ChatSelector';
+import { useChatsForScopeId } from '#uilib/contexts/chat-context';
+import useEvent from '#uilib/hooks/useEvent';
+import { SendHorizontalIcon, Trash2Icon } from 'lucide-react';
+
+import { Button } from '../../Button';
+import { Input } from '../../Input';
+import type { ChatPromptProps } from '../Chat.types';
+import S from './ChatPrompt.styl';
+
+export function ChatPrompt({
+  onSubmit,
+  placeholder,
+  className,
+  footer,
+  id,
+  onChatDeleted,
+  prefillMessage,
+}: ChatPromptProps) {
+  const [message, setMessage] = useState('');
+  const { currentChatId, deleteChat, chats } = useChatsForScopeId(id);
+
+  useEffect(() => {
+    if (prefillMessage != null && prefillMessage !== '') {
+      setMessage(prefillMessage);
+    }
+  }, [prefillMessage]);
+
+  const handleDeleteChat = () => {
+    if (!currentChatId) return;
+    const sid = currentChatId;
+    deleteChat(sid);
+    onChatDeleted?.(sid);
+  };
+
+  const handleSubmit = (e: FormEvent | KeyboardEvent) => {
+    const trimmedMessage = message.trim();
+
+    if (trimmedMessage) {
+      e.preventDefault();
+      onSubmit(trimmedMessage);
+      setMessage('');
+    }
+  };
+
+  useEvent({
+    event: 'keydown',
+    callback: (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && !(e.metaKey || e.shiftKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleSubmit(e);
+        setMessage('');
+      }
+    },
+  });
+
+  return (
+    <form onSubmit={handleSubmit} className={cn(S.root, className)}>
+      <Input
+        type="textarea"
+        value={message}
+        onChange={e => setMessage(e.target.value)}
+        placeholder={placeholder || 'Type a message...'}
+        className={cn(S.input)}
+      />
+
+      <div className={S.actions}>
+        <Button type="submit" size="sm" disabled={!message.trim()}>
+          <SendHorizontalIcon size={16} />
+        </Button>
+
+        <div className={S.notice}>Forecast Assistant can make mistakes.</div>
+
+        {/* <Button
+          variant="outline"
+          size="sm"
+          onClick={e => e.preventDefault()}
+          className={S.attachButton}
+          >
+          <PaperclipIcon size={16} />
+          </Button> */}
+        <div className={S.selectorWrapper}>
+          <ChatSelector id={id} className={S.selector} />
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            aria-label="Delete chat"
+            disabled={!currentChatId || chats.length === 0}
+            onClick={handleDeleteChat}
+          >
+            <Trash2Icon size={16} />
+          </Button>
+        </div>
+      </div>
+
+      {footer}
+    </form>
+  );
+}

package/src/components/ui/Chat/ChatPrompt/index.ts

@@ -0,0 +1 @@
+export { ChatPrompt } from './ChatPrompt';

package/src/components/ui/Chat/ChatSheet/ChatSelector.tsx

@@ -0,0 +1,65 @@
+import { Chat } from '#uilib/components/ui/Chat/Chat.types';
+import { useChatsForScopeId } from '#uilib/contexts/chat-context';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../Select/Select';
+
+export interface ChatSelectorProps {
+  id: string;
+  className?: string;
+}
+
+export function ChatSelector({ id, className }: ChatSelectorProps) {
+  const { chats, currentChatId, setCurrentChatId, newChat } =
+    useChatsForScopeId(id);
+
+  const handleValueChange = (value: string) => {
+    if (value === 'new') {
+      newChat();
+    } else if (value) {
+      setCurrentChatId(value);
+    }
+  };
+
+  const getChatDisplayName = (chat: Chat) => {
+    if (chat.name) {
+      return chat.name;
+    }
+    if (chat.messages.length > 0) {
+      const firstMessage = chat.messages[0];
+      return (
+        firstMessage.text.slice(0, 30) +
+        (firstMessage.text.length > 30 ? '...' : '')
+      );
+    }
+    return `Chat ${chat.session_id}`;
+  };
+
+  return (
+    <Select
+      value={currentChatId?.toString() ?? ''}
+      onValueChange={handleValueChange}
+    >
+      <SelectTrigger size="sm" className={className}>
+        <SelectValue placeholder="Select chat" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="new">+ New Chat</SelectItem>
+        {chats.map(chat => (
+          <SelectItem
+            key={chat.session_id}
+            value={chat.session_id.toString()}
+            selected={chat.session_id === currentChatId}
+          >
+            {getChatDisplayName(chat)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/ui/Chat/ChatSheet/ChatSettings.styl

@@ -0,0 +1,35 @@
+.root
+  z-index 1;
+  position relative
+  display flex
+  align-items center
+  // gap var(--p-2)
+
+  flex-grow 1
+  margin 0 var(--p-2)
+
+.toggler
+  position absolute
+  z-index 2
+  right 0
+  border-radius 30px
+  transform translateY(-22px)
+  opacity .5
+  transition none
+
+  &:hover
+    opacity 1
+
+.isOpen
+  padding var(--p-1) 0
+  // border-top 1px solid var(--border)
+
+  .toggler
+    position relative
+    transform translateY(0)
+
+.content
+  display flex
+  gap var(--p-2)
+  flex-grow 1
+