@sybilion/uilib 1.2.15 → 1.2.16

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

@@ -1,4 +1,5 @@
 import cn from 'classnames';
+import { useEffect } from 'react';
 
 import {
   displayLabelForBranchKeyFromMessages,
@@ -42,12 +43,28 @@ export function ChatChrome({
   onPromptSubmit,
   onChatDeleted,
   promptPrefill,
-  variant = 'sidebar',
   footerClassName,
   emptyState,
 }: ChatChromeProps) {
+  useEffect(() => {
+    if (isEmpty) return;
+
+    const scrollToBottom = () => {
+      const inner = scrollRef.current?.innerElem as HTMLDivElement | undefined;
+      if (inner) {
+        inner.scrollTo({
+          top: inner.scrollHeight + 1000,
+          behavior: 'smooth',
+        });
+      }
+    };
+
+    const inner = scrollRef.current?.innerElem as HTMLDivElement | undefined;
+    if (inner) setTimeout(scrollToBottom, 100);
+  }, [isEmpty, messages.length]);
+
   return (
-    <div className={cn(S.panelRoot, S[`variant-${variant}`])}>
+    <div className={S.root}>
       {showResizeHandle && resizeHandle ? (
         <PanelResizeHandle
           edge="leading"
@@ -74,7 +91,11 @@ export function ChatChrome({
         ) : null}
       </div>
       <div className={S.content}>
-        <Chat isEmpty={isEmpty}>
+        <Chat
+          isEmpty={isEmpty}
+          scopeId={effectiveScopeId}
+          onChatDeleted={onChatDeleted}
+        >
           {isEmpty ? (
             <>
               <Chat.EmptyState {...emptyState} />
@@ -174,10 +195,8 @@ export function ChatChrome({
 
           <div className={cn(S.footer, footerClassName)}>
             <Chat.Prompt
-              id={effectiveScopeId}
               onSubmit={onPromptSubmit}
               disabled={isLoading}
-              onChatDeleted={onChatDeleted}
               prefillMessage={promptPrefill ?? undefined}
             />
           </div>

package/src/components/ui/Chat/ChatChrome/ChatChrome.types.ts

@@ -44,7 +44,6 @@ export interface ChatChromeProps {
   onChatDeleted: (sessionId: string) => void;
   /** `?prompt=` deep link text for one-shot composer pre-fill. */
   promptPrefill?: string | null;
-  variant?: 'default' | 'sidebar';
   footerClassName?: string;
   emptyState?: ChatEmptyStateProps;
 }

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

@@ -3,7 +3,7 @@
   flex-direction column
   align-items center
   justify-content center
-  gap var(--p-2)
+  gap var(--p-10)
 
   // height 450px
   flex 1
@@ -14,7 +14,7 @@
   color var(--text-secondary)
 
 .icon
-  width 26px
-  height 26px
-  margin-bottom var(--p-4)
-  background url('./sparkles.svg') no-repeat center center;
+  &
+  & > svg
+    width 32px
+    height 32px

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

@@ -1,16 +1,21 @@
+import { PropsWithChildren } from 'react';
+
 import S from './ChatEmptyState.styl';
 import type { ChatEmptyStateProps } from './ChatEmptyState.types';
+import SparklesIcon from './icons/sparkles.svg';
 
 export function ChatEmptyState({
-  icon,
-  title,
+  icon = <SparklesIcon />,
+  title = 'Start a conversation',
   description,
-}: ChatEmptyStateProps) {
+  children,
+}: PropsWithChildren<ChatEmptyStateProps>) {
   return (
     <div className={S.root}>
       {icon && <div className={S.icon}>{icon}</div>}
       {title && <h2>{title}</h2>}
       {description && <p>{description}</p>}
+      {children}
     </div>
   );
 }

package/src/components/ui/Chat/ChatEmptyState/icons/sparkles.svg

@@ -0,0 +1,22 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M13.0843 21.2051L12 25L10.9157 21.2051C10.3462 19.2118 8.78817 17.6538 6.79492 17.0843L3 16L6.79492 14.9157C8.78817 14.3462 10.3462 12.7882 10.9157 10.7949L12 7L13.0843 10.7949C13.6538 12.7882 15.2118 14.3462 17.2051 14.9157L21 16L17.2051 17.0843C15.2118 17.6538 13.6538 19.2118 13.0843 21.2051Z" stroke="url(#paint0_linear_3178_5168)" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M24.3452 11.6194L24 13L23.6548 11.6194C23.2518 10.0071 21.9929 8.74822 20.3806 8.34515L19 8L20.3806 7.65485C21.9929 7.25178 23.2518 5.9929 23.6548 4.38062L24 3L24.3452 4.38062C24.7482 5.9929 26.0071 7.25178 27.6194 7.65485L29 8L27.6194 8.34515C26.0071 8.74822 24.7482 10.0071 24.3452 11.6194Z" stroke="url(#paint1_linear_3178_5168)" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M22.5257 27.423L22 29L21.4743 27.423C21.1757 26.5272 20.4728 25.8243 19.577 25.5257L18 25L19.577 24.4743C20.4728 24.1757 21.1757 23.4728 21.4743 22.577L22 21L22.5257 22.577C22.8243 23.4728 23.5272 24.1757 24.423 24.4743L26 25L24.423 25.5257C23.5272 25.8243 22.8243 26.5272 22.5257 27.423Z" stroke="url(#paint2_linear_3178_5168)" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round" />
+	<defs>
+		<linearGradient id="paint0_linear_3178_5168" x1="3" y1="16" x2="29" y2="16" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#19BFE9" />
+			<stop offset="0.673077" stop-color="#C670E8" />
+			<stop offset="1" stop-color="#DA62AB" />
+		</linearGradient>
+		<linearGradient id="paint1_linear_3178_5168" x1="3" y1="16" x2="29" y2="16" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#19BFE9" />
+			<stop offset="0.673077" stop-color="#C670E8" />
+			<stop offset="1" stop-color="#DA62AB" />
+		</linearGradient>
+		<linearGradient id="paint2_linear_3178_5168" x1="3" y1="16" x2="29" y2="16" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#19BFE9" />
+			<stop offset="0.673077" stop-color="#C670E8" />
+			<stop offset="1" stop-color="#DA62AB" />
+		</linearGradient>
+	</defs>
+</svg>

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

@@ -53,25 +53,6 @@
     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

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

@@ -6,8 +6,6 @@ interface CssExports {
   '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

@@ -1,10 +1,8 @@
 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 { SendHorizontalIcon } from 'lucide-react';
 
 import { Button } from '../../Button';
 import { Input } from '../../Input';
@@ -16,12 +14,9 @@ export function ChatPrompt({
   placeholder,
   className,
   footer,
-  id,
-  onChatDeleted,
   prefillMessage,
 }: ChatPromptProps) {
   const [message, setMessage] = useState('');
-  const { currentChatId, deleteChat, chats } = useChatsForScopeId(id);
 
   useEffect(() => {
     if (prefillMessage != null && prefillMessage !== '') {
@@ -29,13 +24,6 @@ export function ChatPrompt({
     }
   }, [prefillMessage]);
 
-  const handleDeleteChat = () => {
-    if (!currentChatId) return;
-    const sid = currentChatId;
-    deleteChat(sid);
-    onChatDeleted?.(sid);
-  };
-
   const handleSubmit = (e: FormEvent | KeyboardEvent) => {
     const trimmedMessage = message.trim();
 
@@ -82,19 +70,6 @@ export function ChatPrompt({
           >
           <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}

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

@@ -0,0 +1,24 @@
+@import 'lib/theme.styl';
+
+.wrapper
+  display flex
+  align-items center
+  gap var(--p-2)
+  min-width 200px
+  z-index 1000
+
+.selectGrow
+  flex 1
+  min-width 0
+
+.selectTrigger
+  // box-shadow 0 0 0 1px var(--border) !important
+  width 100%
+
+.deleteBtn
+  flex-shrink 0
+  border-radius 50px
+  opacity 0.3
+
+.wrapper:hover .deleteBtn
+  opacity 1

package/src/components/ui/Chat/ChatSheet/ChatSelector.styl.d.ts

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

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

@@ -1,6 +1,10 @@
+import cn from 'classnames';
+
 import { Chat } from '#uilib/components/ui/Chat/Chat.types';
 import { useChatsForScopeId } from '#uilib/contexts/chat-context';
+import { Trash2Icon } from 'lucide-react';
 
+import { Button } from '../../Button';
 import {
   Select,
   SelectContent,
@@ -8,14 +12,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../../Select/Select';
+import S from './ChatSelector.styl';
 
 export interface ChatSelectorProps {
   id: string;
   className?: string;
+  onChatDeleted?: (sessionId: string) => void;
 }
 
-export function ChatSelector({ id, className }: ChatSelectorProps) {
-  const { chats, currentChatId, setCurrentChatId, newChat } =
+export function ChatSelector({
+  id,
+  className,
+  onChatDeleted,
+}: ChatSelectorProps) {
+  const { chats, currentChatId, setCurrentChatId, newChat, deleteChat } =
     useChatsForScopeId(id);
 
   const handleValueChange = (value: string) => {
@@ -26,6 +36,13 @@ export function ChatSelector({ id, className }: ChatSelectorProps) {
     }
   };
 
+  const handleDeleteChat = () => {
+    if (!currentChatId) return;
+    const sid = currentChatId;
+    deleteChat(sid);
+    onChatDeleted?.(sid);
+  };
+
   const getChatDisplayName = (chat: Chat) => {
     if (chat.name) {
       return chat.name;
@@ -41,25 +58,46 @@ export function ChatSelector({ id, className }: ChatSelectorProps) {
   };
 
   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}
+    <div className={S.wrapper}>
+      <div className={S.selectGrow}>
+        <Select
+          variant="clear"
+          value={currentChatId?.toString() ?? ''}
+          onValueChange={handleValueChange}
+        >
+          <SelectTrigger
+            size="sm"
+            className={
+              className ? cn(S.selectTrigger, className) : S.selectTrigger
+            }
           >
-            {getChatDisplayName(chat)}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+            <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>
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className={S.deleteBtn}
+        aria-label="Delete chat"
+        disabled={!currentChatId || chats.length === 0}
+        onClick={handleDeleteChat}
+      >
+        <Trash2Icon size={16} />
+      </Button>
+    </div>
   );
 }

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

@@ -234,22 +234,6 @@ export function useChatPanelChromeModel({
     ],
   );
 
-  const scrollToBottom = () => {
-    const inner = scrollRef.current?.innerElem as HTMLDivElement;
-    if (inner) {
-      inner.scrollTo({
-        top: inner.scrollHeight + 1000,
-        behavior: 'smooth',
-      });
-    }
-  };
-
-  useEffect(() => {
-    const inner = scrollRef.current?.innerElem as HTMLDivElement;
-
-    if (inner) setTimeout(scrollToBottom, 100);
-  }, [chat?.messages.length]);
-
   const onOpenChange = (open: boolean) => {
     if (embedAsPage) {
       return;

package/src/components/ui/Page/AppShell/AppShell.styl

@@ -29,6 +29,8 @@
     margin-left var(--p-3)
 
 .mainBody
+  display flex
+  flex-direction column
   flex 1
   min-width 0
   padding-bottom var(--page-y-padding)

package/src/docs/index.tsx

@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
+import { DEFAULT_THEME_ACTIVE_COLOR } from '#uilib/docs/lib/theme';
+
 import App from './App/App';
 import { ThemeProvider } from './contexts/theme-context';
 
@@ -9,7 +11,7 @@ const root = createRoot(elem);
 
 root.render(
   <BrowserRouter>
-    <ThemeProvider activeColor="#">
+    <ThemeProvider activeColor={DEFAULT_THEME_ACTIVE_COLOR}>
       <App />
     </ThemeProvider>
   </BrowserRouter>,

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,38 @@ 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.',
+          }}
+        />
       </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 };