@sybilion/uilib 1.2.17 → 1.2.18

package/dist/esm/components/ui/Chat/ChatEmptyState/ChatEmptyState.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".ChatEmptyState_root__j1n-C{align-items:center;display:flex;flex:1;flex-direction:column;gap:var(--p-10);justify-content:center;padding:var(--p-6);text-align:center;text-size:var(--text-sm);color:var(--text-secondary)}.ChatEmptyState_icon__YSDgv,.ChatEmptyState_icon__YSDgv>svg{height:32px;width:32px}";
+var css_248z = ".ChatEmptyState_root__j1n-C{align-items:center;color:var(--text-secondary);display:flex;flex:1;flex-direction:column;font-size:var(--text-sm);gap:var(--p-10);justify-content:center;padding:var(--p-6);text-align:center;text-wrap:balance}.ChatEmptyState_icon__YSDgv,.ChatEmptyState_icon__YSDgv>svg{height:32px;width:32px}";
 var S = {"root":"ChatEmptyState_root__j1n-C","icon":"ChatEmptyState_icon__YSDgv"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant, isPresetScriptGraph, branchesFromPresetScriptGraph } from '../ChatMessage/presetScript.js';
 import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
-import { useChatsForScopeId, useChat } from '../../../../contexts/chat-context.js';
+import { useChatsForScopeId, useChat, isChatEmpty } from '../../../../contexts/chat-context.js';
 import useEvent from '../../../../hooks/useEvent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import { useQueryParams } from '../../../../hooks/useQueryParams.js';
@@ -145,6 +145,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             removeSearchParams(CHAT_QUERY_PARAM);
         }
     };
+    const isEmpty = isChatEmpty(chat) && !isLoading;
     /**
      * App link: `?prompt=…` — open panel, pre-fill composer, strip param (read once on mount
      * from `location.search`). If the selected session already has messages, `newChat()` first.
@@ -168,12 +169,8 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             return;
         }
         promptParamHandledInEffectRef.current = true;
-        const selected = currentChatId
-            ? chats.find(c => c.session_id === currentChatId)
-            : undefined;
-        const selectedHasMessages = (selected?.messages?.length ?? 0) > 0;
         const needsFirstSession = chats.length === 0;
-        if (selectedHasMessages || needsFirstSession) {
+        if (!isEmpty || needsFirstSession) {
             const sessionId = newChat();
             if (sessionId == null) {
                 logger.warn('Chat prompt link: sign in to use the assistant.');
@@ -641,7 +638,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     };
     const isLastMessageFromUser = chat?.messages.length > 0 &&
         chat.messages[chat.messages.length - 1]?.role === MessageRole.USER;
-    const isEmpty = !chat?.messages?.length && !isLoading;
     const linearScriptActive = Boolean(currentChatId && scriptByChatId[currentChatId]);
     const quickBranches = currentChatId
         ? quickReplyBranchesByChat[currentChatId]

package/dist/esm/contexts/chat-context.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useCallback, useEffect, useContext } from 'react';
+import { createContext, useState, useCallback, useEffect, useContext, useMemo } from 'react';
 import { MessageRole } from '../components/ui/Chat/Chat.types.js';
 import { stripJsonDashboardFences } from '../lib/dashboard-spec/stripJsonDashboardFences.js';
 import { LS } from '@homecode/ui';
@@ -255,6 +255,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             deleteChat,
         }, children: children }));
 }
+const isChatEmpty = (chat) => chat?.messages.length === 0;
 function useChats() {
     const context = useContext(ChatContext);
     if (context === undefined) {
@@ -264,17 +265,21 @@ function useChats() {
 }
 function useChat(scopeId, chatId) {
     const { getChatsForScopeId } = useChats();
-    if (!scopeId || !chatId)
-        return null;
-    const list = getChatsForScopeId(scopeId);
-    return list.find(chat => chat.session_id === chatId) ?? null;
+    return useMemo(() => {
+        if (!scopeId || !chatId)
+            return null;
+        return (getChatsForScopeId(scopeId)?.find(chat => chat.session_id === chatId) ??
+            null);
+    }, [scopeId, chatId, getChatsForScopeId]);
 }
 function useChatsForScopeId(scopeId) {
     const { getChatsForScopeId, getCurrentChatId, setCurrentChatId, newChat, addMessage, removeMessageById, sendMessage, deleteChat, } = useChats();
     const chats = getChatsForScopeId(scopeId);
     const currentChatId = getCurrentChatId(scopeId);
+    const currentChat = useChat(scopeId, currentChatId ?? undefined);
     return {
         chats,
+        currentChat,
         currentChatId,
         setCurrentChatId: (targetId) => setCurrentChatId(scopeId, targetId),
         newChat: () => newChat(scopeId),
@@ -294,4 +299,4 @@ function useCurrentChat(scopeId) {
     return useChat(scopeId, chatId ?? undefined);
 }
 
-export { ChatContext, ChatProvider, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };
+export { ChatContext, ChatProvider, isChatEmpty, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };

package/dist/esm/index.js

@@ -4,7 +4,7 @@ export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';
 export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl } from './sybilion-auth/authPaths.js';
 export { exchangeAuth0AccessTokenForSybilionJwt } from './sybilion-auth/exchangeSybilionToken.js';
-export { ChatContext, ChatProvider, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
+export { ChatContext, ChatProvider, isChatEmpty, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
 export { AnalysesSelector } from './components/ui/AnalysesSelector/AnalysesSelector.js';
 export { AnalysisLineIcon } from './components/ui/AnalysisLineIcon/AnalysisLineIcon.js';
 export { AppHeaderHost, AppHeaderPortal } from './components/ui/AppHeader/AppHeader.js';

package/dist/esm/types/src/contexts/chat-context.d.ts

@@ -21,10 +21,12 @@ export interface ChatProviderProps {
     sendChatMessage: SendChatMessageFn;
 }
 export declare function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessageFn, }: ChatProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const isChatEmpty: (chat: Chat | null) => boolean;
 export declare function useChats(): ChatContextType;
 export declare function useChat(scopeId: string | undefined, chatId: string | undefined): Chat | null;
 export declare function useChatsForScopeId(scopeId: string): {
     chats: Chat[];
+    currentChat: Chat;
     currentChatId: string;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;
@@ -36,6 +38,7 @@ export declare function useChatsForScopeId(scopeId: string): {
 /** @deprecated Use useChatsForScopeId */
 export declare function useChatsForDataset(scopeId: string): {
     chats: Chat[];
+    currentChat: Chat;
     currentChatId: string;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

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

@@ -10,7 +10,8 @@
   padding var(--p-6)
 
   text-align center
-  text-size var(--text-sm)
+  text-wrap balance
+  font-size var(--text-sm)
   color var(--text-secondary)
 
 .icon

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

@@ -23,7 +23,11 @@ import {
   formatChatTranscript,
   usedPresetIdsFromMessages,
 } from '#uilib/components/ui/Chat/chat-preset-utils';
-import { useChat, useChatsForScopeId } from '#uilib/contexts/chat-context';
+import {
+  isChatEmpty,
+  useChat,
+  useChatsForScopeId,
+} from '#uilib/contexts/chat-context';
 import useEvent from '#uilib/hooks/useEvent';
 import { useIsMobile } from '#uilib/hooks/useIsMobile';
 import { useQueryParams } from '#uilib/hooks/useQueryParams';
@@ -268,6 +272,8 @@ export function useChatPanelChromeModel({
     }
   };
 
+  const isEmpty = isChatEmpty(chat) && !isLoading;
+
   /**
    * App link: `?prompt=…` — open panel, pre-fill composer, strip param (read once on mount
    * from `location.search`). If the selected session already has messages, `newChat()` first.
@@ -294,13 +300,9 @@ export function useChatPanelChromeModel({
     }
     promptParamHandledInEffectRef.current = true;
 
-    const selected = currentChatId
-      ? chats.find(c => c.session_id === currentChatId)
-      : undefined;
-    const selectedHasMessages = (selected?.messages?.length ?? 0) > 0;
     const needsFirstSession = chats.length === 0;
 
-    if (selectedHasMessages || needsFirstSession) {
+    if (!isEmpty || needsFirstSession) {
       const sessionId = newChat();
       if (sessionId == null) {
         logger.warn('Chat prompt link: sign in to use the assistant.');
@@ -820,8 +822,6 @@ export function useChatPanelChromeModel({
     chat?.messages.length > 0 &&
     chat.messages[chat.messages.length - 1]?.role === MessageRole.USER;
 
-  const isEmpty = !chat?.messages?.length && !isLoading;
-
   const linearScriptActive = Boolean(
     currentChatId && scriptByChatId[currentChatId],
   );

package/src/contexts/chat-context.tsx

@@ -4,6 +4,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 
@@ -383,6 +384,9 @@ export function ChatProvider({
   );
 }
 
+export const isChatEmpty = (chat: Chat | null): boolean =>
+  chat?.messages.length === 0;
+
 export function useChats() {
   const context = useContext(ChatContext);
   if (context === undefined) {
@@ -396,9 +400,13 @@ export function useChat(
   chatId: string | undefined,
 ): Chat | null {
   const { getChatsForScopeId } = useChats();
-  if (!scopeId || !chatId) return null;
-  const list = getChatsForScopeId(scopeId);
-  return list.find(chat => chat.session_id === chatId) ?? null;
+  return useMemo(() => {
+    if (!scopeId || !chatId) return null;
+    return (
+      getChatsForScopeId(scopeId)?.find(chat => chat.session_id === chatId) ??
+      null
+    );
+  }, [scopeId, chatId, getChatsForScopeId]);
 }
 
 export function useChatsForScopeId(scopeId: string) {
@@ -414,9 +422,11 @@ export function useChatsForScopeId(scopeId: string) {
   } = useChats();
   const chats = getChatsForScopeId(scopeId);
   const currentChatId = getCurrentChatId(scopeId);
+  const currentChat = useChat(scopeId, currentChatId ?? undefined);
 
   return {
     chats,
+    currentChat,
     currentChatId,
     setCurrentChatId: (targetId: string) => setCurrentChatId(scopeId, targetId),
     newChat: () => newChat(scopeId),

package/src/docs/pages/CardPage.tsx

@@ -22,7 +22,7 @@ export default function CardPage() {
         actions={<DocsHeaderActions />}
       />
       <PageContentSection>
-        <Card style={{ maxWidth: 360 }}>
+        <Card paddingSize="s" style={{ maxWidth: 360 }}>
           <CardHeader>
             <CardTitle>Card title</CardTitle>
             <CardDescription>Supporting description text.</CardDescription>