@sybilion/uilib 1.2.15 → 1.2.17

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

@@ -1,23 +1,13 @@
 @import 'lib/theme.styl'
 
-.panelRoot
+.root
   position relative
   display flex
   flex-direction column
   height 100%
   min-height 0
   overflow hidden
-
-  &.variant-sidebar
-    .footer
-      backdrop-filter blur(30px)
-      background-color var(--background-alpha-800)
-      box-shadow 0 0 20px 16px var(--background)
-      border-top 1px solid var(--border)
-
-  &.variant-default
-    .footer
-      --chat-chrome-footer-variant default
+  border-radius var(--p-4)
 
 .chatResizeHandle
   position: absolute;
@@ -44,7 +34,10 @@
 
 .panelHeader
   position absolute
+  display flex
+  align-items center
   width 100%
+  min-height 70px
   z-index 100
 
   flex-shrink 0
@@ -84,6 +77,7 @@
 
 .scrollInner
   padding-top var(--p-10)
+  min-height 100%
   // padding-bottom 320px // goes under prompt
 
   &::after
@@ -103,6 +97,10 @@
   bottom 0
   width 100%;
 
+  backdrop-filter blur(30px)
+  background-color var(--background-alpha-800)
+  border-top 1px solid var(--border)
+  box-shadow 0 0 20px 16px var(--background)
 
 .loader
   // z-index 1

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

@@ -9,13 +9,11 @@ interface CssExports {
   'loader': string;
   'panelClose': string;
   'panelHeader': string;
-  'panelRoot': string;
+  'root': string;
   'scroll': string;
   'scrollInner': string;
   'scrollWrapper': string;
   'scrollbar': string;
-  'variant-default': string;
-  'variant-sidebar': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

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,23 @@
+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) {
+  additionalContent,
+  children,
+}: PropsWithChildren<ChatEmptyStateProps>) {
   return (
     <div className={S.root}>
       {icon && <div className={S.icon}>{icon}</div>}
       {title && <h2>{title}</h2>}
       {description && <p>{description}</p>}
+      {additionalContent}
+      {children}
     </div>
   );
 }

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

@@ -2,4 +2,6 @@ export interface ChatEmptyStateProps {
   icon?: React.ReactNode;
   title?: string;
   description?: string;
+  /** Extra block below description (works when passed via `ChatChrome` / `ChatSheet` `emptyState`). */
+  additionalContent?: React.ReactNode;
 }

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/ChatSheet.tsx

@@ -43,6 +43,7 @@ export function ChatSheet({
   onScriptComplete,
   onGenerateDashboard,
   renderMessageChart,
+  emptyState,
   inline = false,
 }: ChatSheetProps) {
   const model = useChatPanelChromeModel({
@@ -53,6 +54,7 @@ export function ChatSheet({
     onScriptComplete,
     onGenerateDashboard,
     renderMessageChart,
+    emptyState,
   });
 
   if (actionsRef) {

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

@@ -34,6 +34,7 @@ import { ScrollRef } from '@homecode/ui';
 import { useSidebar } from '../../Sidebar/Sidebar';
 import { Chat } from '../Chat';
 import type { ChatChromeProps } from '../ChatChrome';
+import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
 
 export type UseChatPanelChromeModelInput = {
   /** When true, skip sidebar chat slot, URL `?chat=`, and portal behavior (e.g. page main content). */
@@ -48,6 +49,8 @@ export type UseChatPanelChromeModelInput = {
   onGenerateDashboard?: (transcript: string) => void | Promise<void>;
   /** Renders `[CHART]` tokens in assistant messages. */
   renderMessageChart?: () => React.ReactNode;
+  /** Forwarded to `ChatChrome` when the thread is empty. */
+  emptyState?: ChatEmptyStateProps;
 };
 
 export type UseChatPanelChromeModelResult = {
@@ -92,6 +95,7 @@ export function useChatPanelChromeModel({
   onScriptComplete,
   onGenerateDashboard,
   renderMessageChart,
+  emptyState,
 }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult {
   const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
   const isMobile = useIsMobile();
@@ -234,22 +238,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;
@@ -1009,6 +997,7 @@ export function useChatPanelChromeModel({
     onPromptSubmit: handlePromptSubmit,
     onChatDeleted: endLocalDemoFlow,
     promptPrefill: promptLinkPrefill,
+    emptyState,
   };
 
   const toggleOpen = () => onOpenChange(!isOpen);

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/components/ui/Page/PageContent/PageContent.styl

@@ -7,7 +7,6 @@
   min-height 0
   width 100%
   max-width var(--page-width)
-  padding-bottom var(--page-y-padding)
 
 .section
   pageXPadding()

package/src/docs/docsHeaderActions.tsx

@@ -13,6 +13,14 @@ export function DocsHeaderActions() {
         </>
       }
       scopeId={DOCS_CHAT_SCOPE_ID}
+      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>
+        ),
+      }}
     />
   );
 }

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>,