@sybilion/uilib 1.3.78 → 1.3.80

package/src/contexts/chat-context.tsx

@@ -10,6 +10,7 @@ import {
 
 import {
   type Chat,
+  type ChatMeta,
   type ChatSendMessagePayload,
   type Message,
   MessageRole,
@@ -37,12 +38,14 @@ export type AddChatMessageOptions = {
   userTextFileAttachments?: UserTextFileAttachment[];
   /** SYSTEM-only: mark as transient progress placeholder (shimmer until removed). */
   inProgress?: boolean;
+  meta?: ChatMeta;
 };
 
 export type UpdateChatMessagePatch = {
   role?: MessageRole;
   text?: string;
   inProgress?: boolean;
+  meta?: ChatMeta;
 };
 
 export type NewChatOptions = {
@@ -50,6 +53,11 @@ export type NewChatOptions = {
   seedMessages?: readonly Message[];
 };
 
+export type SendMessageResult = {
+  response: string;
+  sessionId: string;
+};
+
 export interface ChatContextType {
   /** Returns the new session id, or undefined if no user / not created. */
   newChat: (scopeId: string, options?: NewChatOptions) => string | undefined;
@@ -78,11 +86,13 @@ export interface ChatContextType {
     chatId: string,
     messages: Message[],
   ) => void;
+  /** Shallow-merge keys into `chat.meta` and persist. */
+  updateChatMeta: (scopeId: string, chatId: string, patch: ChatMeta) => void;
   sendMessage: (
     scopeId: string,
     message: string | ChatSendMessagePayload,
     chatId?: string,
-  ) => Promise<string>;
+  ) => Promise<SendMessageResult>;
   getChatsForScopeId: (scopeId: string) => Chat[];
   getCurrentChatId: (scopeId: string) => string | null;
   deleteChat: (scopeId: string, sessionId: string) => void;
@@ -184,6 +194,7 @@ function cloneMessagesForNewSession(messages: readonly Message[]): Message[] {
     .filter(message => !message.inProgress)
     .map(message => ({
       ...message,
+      ...(message.meta ? { meta: { ...message.meta } } : {}),
       ...(message.userTextFileAttachments
         ? {
             userTextFileAttachments: message.userTextFileAttachments.map(
@@ -372,6 +383,7 @@ export function ChatProvider({
           ? { userTextFileAttachments: attachments }
           : {}),
         ...(options?.inProgress ? { inProgress: true } : {}),
+        ...(options?.meta ? { meta: { ...options.meta } } : {}),
       };
 
       setChats(prev => {
@@ -444,6 +456,9 @@ export function ChatProvider({
               ) {
                 delete next.inProgress;
               }
+              if (patch.meta != null) {
+                next.meta = { ...next.meta, ...patch.meta };
+              }
               return next;
             }),
           };
@@ -460,7 +475,10 @@ export function ChatProvider({
     (scopeId: string, chatId: string, messages: Message[]) => {
       if (userSwitchKey === null) return;
       addScopeIdToRegistry(scopeId);
-      const cloned = messages.map(message => ({ ...message }));
+      const cloned = messages.map(message => ({
+        ...message,
+        ...(message.meta ? { meta: { ...message.meta } } : {}),
+      }));
 
       setChats(prev => {
         const scopeChats = prev[scopeId] ?? [];
@@ -478,12 +496,34 @@ export function ChatProvider({
     [userSwitchKey],
   );
 
+  const updateChatMeta = useCallback(
+    (scopeId: string, chatId: string, patch: ChatMeta) => {
+      if (userSwitchKey === null) return;
+      setChats(prev => {
+        const scopeChats = prev[scopeId] ?? [];
+        const updatedChats = scopeChats.map(chat => {
+          if (chat.session_id !== chatId) return chat;
+          return {
+            ...chat,
+            meta: { ...chat.meta, ...patch },
+          };
+        });
+
+        const chatsKey = getChatsKey(scopeId);
+        LS.set(chatsKey, updatedChats);
+
+        return { ...prev, [scopeId]: updatedChats };
+      });
+    },
+    [userSwitchKey],
+  );
+
   const sendMessage = useCallback(
     async (
       scopeId: string,
       message: string | ChatSendMessagePayload,
       chatId?: string,
-    ): Promise<string> => {
+    ): Promise<SendMessageResult> => {
       const targetChatId = chatId ?? getCurrentChatId(scopeId);
       if (targetChatId === null || targetChatId === '') {
         throw new Error('No chat selected');
@@ -506,11 +546,28 @@ export function ChatProvider({
         );
       }
 
+      let progressMessageId: string | undefined;
+      if (typeof message !== 'string' && message.systemProgressLabel) {
+        progressMessageId = addMessage(
+          scopeId,
+          targetChatId,
+          MessageRole.SYSTEM,
+          message.systemProgressLabel,
+          { inProgress: true },
+        );
+      }
+
       const pendingChatSessionId = targetChatId;
       beginOutboundPending(scopeId, pendingChatSessionId);
+      let effectiveSessionId = pendingChatSessionId;
       try {
         const data = await sendChatMessageFn(apiPayload, pendingChatSessionId);
 
+        effectiveSessionId =
+          data.session_id && data.session_id !== pendingChatSessionId
+            ? data.session_id
+            : pendingChatSessionId;
+
         if (data.session_id && data.session_id !== pendingChatSessionId) {
           setChats(prev => {
             const scopeChats = prev[scopeId] ?? [];
@@ -528,15 +585,24 @@ export function ChatProvider({
           setCurrentChatId(scopeId, data.session_id);
         }
 
+        if (progressMessageId) {
+          removeMessageById(scopeId, effectiveSessionId, progressMessageId);
+          progressMessageId = undefined;
+        }
+
         addMessage(
           scopeId,
-          data.session_id ? data.session_id : pendingChatSessionId,
+          effectiveSessionId,
           MessageRole.ASSISTANT,
           data.response,
         );
 
-        return data.response;
+        return { response: data.response, sessionId: effectiveSessionId };
       } catch (error) {
+        if (progressMessageId) {
+          removeMessageById(scopeId, effectiveSessionId, progressMessageId);
+        }
+
         const errorMessage =
           error instanceof Error
             ? error.message
@@ -544,7 +610,7 @@ export function ChatProvider({
 
         addMessage(
           scopeId,
-          pendingChatSessionId,
+          effectiveSessionId,
           MessageRole.ASSISTANT,
           errorMessage,
         );
@@ -555,6 +621,7 @@ export function ChatProvider({
     },
     [
       addMessage,
+      removeMessageById,
       beginOutboundPending,
       endOutboundPending,
       getCurrentChatId,
@@ -597,6 +664,7 @@ export function ChatProvider({
         removeMessageById,
         updateMessageById,
         setChatMessages,
+        updateChatMeta,
         sendMessage,
         getChatsForScopeId,
         getCurrentChatId,
@@ -683,6 +751,8 @@ export function useChatsForScopeId(scopeId: string) {
     addMessage,
     removeMessageById,
     updateMessageById,
+    updateChatMeta,
+    setChatMessages,
     sendMessage,
     deleteChat,
   } = useChats();
@@ -713,6 +783,10 @@ export function useChatsForScopeId(scopeId: string) {
     ) => updateMessageById(scopeId, chatId, messageId, patch),
     sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) =>
       sendMessage(scopeId, message, chatId),
+    updateChatMeta: (chatId: string, patch: ChatMeta) =>
+      updateChatMeta(scopeId, chatId, patch),
+    setChatMessages: (chatId: string, messages: Message[]) =>
+      setChatMessages(scopeId, chatId, messages),
     deleteChat: (sessionId: string) => deleteChat(scopeId, sessionId),
   };
 }

package/src/docs/pages/ChatPage.styl

@@ -0,0 +1,6 @@
+.chatDemoHost
+  display flex
+  flex-direction column
+  flex 1
+  // Bounded height so ChatChrome flex column can place presets above the prompt
+  min-height 480px

package/src/docs/pages/ChatPage.styl.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chatDemoHost': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/docs/pages/ChatPage.tsx

@@ -1,106 +1,49 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { ChatChrome, Message, MessageRole } from '#uilib/components/ui/Chat';
+import { ChatChrome, useChatPanelChromeModel } from '#uilib/components/ui/Chat';
 import { PageContentSection } from '#uilib/components/ui/Page';
-import { ScrollRef } from '@homecode/ui';
 
+import {
+  DOCS_DATASET_PRESETS,
+  DOCS_SAMPLE_DATASET_NAME,
+} from '../chatPresets.sample';
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DOCS_CHAT_USER_KEY } from '../docsConstants';
 import { DocsHeaderActions } from '../docsHeaderActions';
+import S from './ChatPage.styl';
 
-const NO_QUICK_REPLY_KEYS: ReadonlySet<string> = new Set();
-
-const ASSISTANT_REPLY_TEXT =
-  'This is a generic assistant reply for the docs preview. Wire your app to a real model here.';
-
-function makeMessage(role: MessageRole, text: string): Message {
-  return {
-    id: crypto.randomUUID(),
-    role,
-    text,
-    timestamp: Date.now(),
-  };
-}
+const DOCS_CHAT_INLINE_SCOPE_ID = `${DOCS_CHAT_USER_KEY}-docs-chat-inline`;
 
 export default function ChatPage() {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const replyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const scrollRef = useRef<ScrollRef>(null);
-
-  useEffect(() => {
-    return () => {
-      if (replyTimeoutRef.current != null) {
-        clearTimeout(replyTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const isEmpty = messages.length === 0 && !isLoading;
-  const isLastMessageFromUser =
-    messages.length > 0 &&
-    messages[messages.length - 1]?.role === MessageRole.USER;
-
-  const onSubmit = useCallback(
-    (raw: string) => {
-      const text = raw.trim();
-      if (!text || isLoading) return;
-
-      setMessages(prev => [...prev, makeMessage(MessageRole.USER, text)]);
-      setIsLoading(true);
-
-      if (replyTimeoutRef.current != null) {
-        clearTimeout(replyTimeoutRef.current);
-      }
-      replyTimeoutRef.current = setTimeout(() => {
-        replyTimeoutRef.current = null;
-        setMessages(prev => [
-          ...prev,
-          makeMessage(MessageRole.ASSISTANT, ASSISTANT_REPLY_TEXT),
-        ]);
-        setIsLoading(false);
-      }, 900);
+  const { chromeProps } = useChatPanelChromeModel({
+    embedAsPage: true,
+    scopeId: DOCS_CHAT_INLINE_SCOPE_ID,
+    presets: DOCS_DATASET_PRESETS,
+    emptyState: {
+      title: 'Start a conversation',
+      description:
+        'Send a message below or pick a preset chip. The demo echoes your text after a short delay.',
+      additionalContent: (
+        <p>Optional empty-state slot via additionalContent.</p>
+      ),
     },
-    [isLoading],
-  );
+  });
 
   return (
     <>
       <AppPageHeader
         breadcrumbs={[{ label: 'Chat' }]}
         title="Chat"
-        subheader="Chat shell with message list and prompt."
-        actions={<DocsHeaderActions />}
+        subheader={`Chat shell with message list, prompt, and dataset-scoped preset bubbles for "${DOCS_SAMPLE_DATASET_NAME}".`}
+        actions={<DocsHeaderActions presets={DOCS_DATASET_PRESETS} />}
       />
       <PageContentSection>
-        <ChatChrome
-          showResizeHandle={false}
-          resizeHandle={undefined}
-          onClose={undefined}
-          isEmpty={isEmpty}
-          renderPresets={() => null}
-          messages={messages}
-          onQuickReply={() => {}}
-          suppressedQuickReplyKeys={NO_QUICK_REPLY_KEYS}
-          isLoading={isLoading}
-          scriptContinueLabel={undefined}
-          onScriptContinue={undefined}
-          showSyntheticBranchButtons={false}
-          unusedBranchKeys={[]}
-          showInlinePresets={false}
-          isLastMessageFromUser={isLastMessageFromUser}
-          scrollRef={scrollRef}
-          effectiveScopeId="docs-chat-inline"
-          onPromptSubmit={onSubmit}
-          onChatDeleted={() => {}}
-          emptyState={{
-            title: 'Start a conversation',
-            description:
-              'Send a message below. This demo appends a canned reply after a short delay.',
-            additionalContent: (
-              <p>Optional empty-state slot via additionalContent.</p>
-            ),
-          }}
-        />
+        <p style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>
+          Preset chips render above the prompt in the empty state (fixed layout)
+          and inline after the assistant reply. Click a chip to send its text;
+          used chips hide for the session.
+        </p>
+        <div className={S.chatDemoHost}>
+          <ChatChrome {...chromeProps} />
+        </div>
       </PageContentSection>
     </>
   );

package/src/docs/pages/ChatSlashCommandsPage.tsx

@@ -18,9 +18,9 @@ const NO_QUICK_REPLY_KEYS: ReadonlySet<string> = new Set();
 /** Sample items — default TipTap mention insert; optional `className` / `color` style the chip. */
 const DOCS_SLASH_ITEMS: SlashCommandItem[] = [
   {
-    id: 'generate-dashboard',
-    label: 'Generate dashboard',
-    description: 'Insert /generate-dashboard',
+    id: 'generate-report',
+    label: 'Generate report',
+    description: 'Insert /generate-report',
     color: 'var(--brand-color-600)',
   },
   {
@@ -48,7 +48,7 @@ function makeMessage(role: MessageRole, text: string): Message {
 }
 
 const ASSISTANT_REPLY_TEXT =
-  'Demo reply. Slash picks insert inline mention chips; plain text on send uses each item id (e.g. /generate-dashboard).';
+  'Demo reply. Slash picks insert inline mention chips; plain text on send uses each item id (e.g. /generate-report).';
 
 export default function ChatSlashCommandsPage() {
   const [messages, setMessages] = useState<Message[]>([]);