@sybilion/uilib 1.2.15 → 1.2.17

package/src/docs/pages/ChatPage.tsx

@@ -1,18 +1,67 @@
-import { useState } from 'react';
-
-import {
-  Chat,
-  ChatMessage,
-  ChatPrompt,
-  MessageRole,
-} from '#uilib/components/ui/Chat';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ChatChrome, Message, MessageRole } from '#uilib/components/ui/Chat';
 import { PageContentSection } from '#uilib/components/ui/Page';
+import { ScrollRef } from '@homecode/ui';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
+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(),
+  };
+}
+
 export default function ChatPage() {
-  const [text, setText] = useState('');
+  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);
+    },
+    [isLoading],
+  );
 
   return (
     <>
@@ -22,39 +71,41 @@ export default function ChatPage() {
         subheader="Chat shell with message list and prompt."
         actions={<DocsHeaderActions />}
       />
-      <PageContentSection
-        style={{
-          maxWidth: 560,
-          border: '1px solid var(--border)',
-          borderRadius: 12,
-          padding: 16,
-        }}
-      >
-        <Chat>
-          <ChatMessage
-            role={MessageRole.ASSISTANT}
-            text="This is a static assistant message in the docs preview."
-          />
-          <ChatMessage role={MessageRole.USER} text="Example user message." />
-          <ChatPrompt
-            id="docs-chat-inline"
-            placeholder="Message…"
-            onSubmit={msg => {
-              setText(msg);
-            }}
-          />
-          {text ? (
-            <p
-              style={{
-                marginTop: 12,
-                fontSize: 12,
-                color: 'var(--muted-foreground)',
-              }}
-            >
-              Last submit (local only): {text}
-            </p>
-          ) : null}
-        </Chat>
+      <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}
+          showBranchActionsRow={false}
+          showSyntheticBranchButtons={false}
+          unusedBranchKeys={[]}
+          isScriptComplete={false}
+          onGenerateDashboard={undefined}
+          generatingDashboard={false}
+          onGenerateDashboardClick={() => {}}
+          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>
+            ),
+          }}
+        />
       </PageContentSection>
     </>
   );

package/dist/standalone/vite-sybilion-standalone-dev.d.ts

@@ -1,13 +0,0 @@
-import type { UserConfig } from 'vite';
-export type SybilionStandaloneViteDevOptions = {
-    mode: string;
-    /** Directory containing `.env*` files. @default process.cwd() */
-    envDir?: string;
-    /** Prefix proxied to Sybilion API (SDK `apiPrefix`). @default `/api` */
-    apiPrefix?: string;
-};
-/**
- * Vite `server` + `preview` fragment for standalone Sybilion SPAs: same-origin `/api` in dev,
- * proxied to `VITE_SYBILION_API_BASE_URL`. Uses `PORT` from env (default `3000`).
- */
-export declare function sybilionStandaloneViteDev(options: SybilionStandaloneViteDevOptions): Pick<UserConfig, 'server' | 'preview'>;

package/dist/standalone/vite-sybilion-standalone-dev.js

@@ -1,49 +0,0 @@
-import { loadEnv } from 'vite';
-
-const DEFAULT_PORT = 3000;
-const SYBILION_API_ENV = 'VITE_SYBILION_API_BASE_URL';
-let warnedMissingApiUrl = false;
-function parsePort(raw) {
-    if (raw == null || raw === '')
-        return DEFAULT_PORT;
-    const n = Number.parseInt(raw, 10);
-    if (!Number.isFinite(n) || n <= 0 || n > 65_535)
-        return DEFAULT_PORT;
-    return n;
-}
-function normalizeApiPrefix(apiPrefix) {
-    return apiPrefix.startsWith('/') ? apiPrefix : `/${apiPrefix}`;
-}
-/**
- * Vite `server` + `preview` fragment for standalone Sybilion SPAs: same-origin `/api` in dev,
- * proxied to `VITE_SYBILION_API_BASE_URL`. Uses `PORT` from env (default `3000`).
- */
-function sybilionStandaloneViteDev(options) {
-    const envDir = options.envDir ?? process.cwd();
-    const apiPrefix = normalizeApiPrefix(options.apiPrefix ?? '/api');
-    const env = loadEnv(options.mode, envDir, '');
-    const port = parsePort(env.PORT);
-    const target = (env[SYBILION_API_ENV] ?? '').replace(/\/$/, '');
-    const proxy = {};
-    if (target) {
-        proxy[apiPrefix] = {
-            target,
-            changeOrigin: true,
-            secure: true,
-        };
-    }
-    else if (options.mode === 'development' && !warnedMissingApiUrl) {
-        warnedMissingApiUrl = true;
-        console.warn(`[@sybilion/uilib] ${SYBILION_API_ENV} is not set; API dev proxy disabled.`);
-    }
-    const serverPreview = {
-        port,
-        proxy,
-    };
-    return {
-        server: serverPreview,
-        preview: serverPreview,
-    };
-}
-
-export { sybilionStandaloneViteDev };

package/src/standalone/vite-sybilion-standalone-dev.ts

@@ -1,65 +0,0 @@
-import type { UserConfig } from 'vite';
-import { loadEnv } from 'vite';
-
-const DEFAULT_PORT = 3000;
-const SYBILION_API_ENV = 'VITE_SYBILION_API_BASE_URL';
-
-export type SybilionStandaloneViteDevOptions = {
-  mode: string;
-  /** Directory containing `.env*` files. @default process.cwd() */
-  envDir?: string;
-  /** Prefix proxied to Sybilion API (SDK `apiPrefix`). @default `/api` */
-  apiPrefix?: string;
-};
-
-let warnedMissingApiUrl = false;
-
-function parsePort(raw: string | undefined): number {
-  if (raw == null || raw === '') return DEFAULT_PORT;
-  const n = Number.parseInt(raw, 10);
-  if (!Number.isFinite(n) || n <= 0 || n > 65_535) return DEFAULT_PORT;
-  return n;
-}
-
-function normalizeApiPrefix(apiPrefix: string): string {
-  return apiPrefix.startsWith('/') ? apiPrefix : `/${apiPrefix}`;
-}
-
-/**
- * Vite `server` + `preview` fragment for standalone Sybilion SPAs: same-origin `/api` in dev,
- * proxied to `VITE_SYBILION_API_BASE_URL`. Uses `PORT` from env (default `3000`).
- */
-export function sybilionStandaloneViteDev(
-  options: SybilionStandaloneViteDevOptions,
-): Pick<UserConfig, 'server' | 'preview'> {
-  const envDir = options.envDir ?? process.cwd();
-  const apiPrefix = normalizeApiPrefix(options.apiPrefix ?? '/api');
-  const env = loadEnv(options.mode, envDir, '');
-  const port = parsePort(env.PORT);
-  const target = (env[SYBILION_API_ENV] ?? '').replace(/\/$/, '');
-
-  const proxy: NonNullable<UserConfig['server']>['proxy'] = {};
-
-  if (target) {
-    proxy[apiPrefix] = {
-      target,
-      changeOrigin: true,
-      secure: true,
-    };
-  } else if (options.mode === 'development' && !warnedMissingApiUrl) {
-    warnedMissingApiUrl = true;
-    console.warn(
-      `[@sybilion/uilib] ${SYBILION_API_ENV} is not set; API dev proxy disabled.`,
-    );
-  }
-
-  const serverPreview = {
-    port,
-    proxy,
-  };
-
-  return {
-    server: serverPreview,
-    preview: serverPreview,
-  };
-}