@sybilion/uilib 1.3.77 → 1.3.79

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[]>([]);