@sybilion/uilib 1.2.19 → 1.2.21

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

@@ -17,6 +17,13 @@
 .role-user
   align-items flex-end
 
+  .userColumn
+    display flex
+    flex-direction column
+    align-items flex-end
+    gap var(--p-2)
+    max-width 100%
+
   .text
     padding var(--p-3) var(--p-4)
 
@@ -29,6 +36,66 @@
     :global(.dark) &
       background-color var(--sb-gray-800)
 
+  .userCsvCard
+    appearance none
+    border 0
+    margin 0
+    font inherit
+    display flex
+    align-items center
+    gap var(--p-4)
+    padding var(--p-3)
+    padding-right var(--p-4)
+    background-color var(--sb-slate-100)
+    box-shadow 0 0 0 1px var(--border)
+    border-radius var(--p-4)
+    border-bottom-right-radius 0
+    width fit-content
+    max-width 100%
+    text-align left
+    cursor pointer
+    transition background-color 150ms
+    color var(--sb-green-600)
+
+    &:hover
+      background-color var(--sb-gray-50)
+
+    &:focus-visible
+      outline 2px solid var(--ring)
+      outline-offset 2px
+
+    :global(.dark) &
+      background-color var(--sb-gray-800)
+      color var(--sb-green-400)
+
+      &:hover
+        background-color var(--sb-gray-900)
+
+  .userCsvCardIcon
+    display flex
+    align-items center
+    justify-content center
+    width 32px
+    height 32px
+    flex-shrink 0
+
+  .userCsvCardContent
+    display flex
+    flex-direction column
+    flex 1
+    min-width 0
+
+  .userCsvCardTitle
+    font-size var(--text-base)
+    font-weight 600
+    line-height 1.4
+    color var(--text-secondary)
+
+  .userCsvCardSubtitle
+    font-size var(--text-sm)
+    color var(--muted-foreground)
+    line-height 1.4
+
 .role-system
   align-items center
 

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

@@ -17,6 +17,12 @@ interface CssExports {
   'root': string;
   'scrollHorizontal': string;
   'text': string;
+  'userColumn': string;
+  'userCsvCard': string;
+  'userCsvCardContent': string;
+  'userCsvCardIcon': string;
+  'userCsvCardSubtitle': string;
+  'userCsvCardTitle': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

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

@@ -8,10 +8,12 @@ import {
 } from '../Chat.types';
 import { AgentMessageContent } from './AgentMessageContent';
 import S from './ChatMessage.styl';
+import { UserCsvAttachmentBubble } from './UserCsvAttachmentBubble';
 
 export function ChatMessage({
   role,
   text,
+  userCsvAttachment,
   onQuickReply,
   suppressedQuickReplyKeys,
   quickReplyDisabled,
@@ -45,7 +47,12 @@ export function ChatMessage({
           renderMessageChart={renderMessageChart}
         />
       ) : (
-        <div className={S.text}>{text}</div>
+        <div className={S.userColumn}>
+          <div className={S.text}>{text}</div>
+          {userCsvAttachment ? (
+            <UserCsvAttachmentBubble attachment={userCsvAttachment} />
+          ) : null}
+        </div>
       )}
     </div>
   );

package/src/components/ui/Chat/ChatMessage/UserCsvAttachmentBubble.tsx

@@ -0,0 +1,36 @@
+import type { UserCsvAttachment } from '../Chat.types';
+import { downloadTextFile } from '#uilib/utils/downloadTextFile';
+
+import { CsvIcon } from './icons/CsvIcon';
+import S from './ChatMessage.styl';
+
+const CSV_DOWNLOAD_HINT = 'Download .CSV file';
+
+export function UserCsvAttachmentBubble({
+  attachment,
+}: {
+  attachment: UserCsvAttachment;
+}) {
+  return (
+    <button
+      type="button"
+      className={S.userCsvCard}
+      aria-label={`${CSV_DOWNLOAD_HINT}: ${attachment.displayName}`}
+      onClick={() =>
+        downloadTextFile(
+          attachment.content,
+          attachment.filename,
+          'text/csv;charset=utf-8',
+        )
+      }
+    >
+      <div className={S.userCsvCardIcon}>
+        <CsvIcon size={32} />
+      </div>
+      <div className={S.userCsvCardContent}>
+        <div className={S.userCsvCardTitle}>{attachment.displayName}</div>
+        <div className={S.userCsvCardSubtitle}>{CSV_DOWNLOAD_HINT}</div>
+      </div>
+    </button>
+  );
+}

package/src/components/ui/Chat/ChatMessage/icons/CsvIcon.tsx

@@ -0,0 +1,7 @@
+import { FileSpreadsheet } from 'lucide-react';
+
+export function CsvIcon({ size = 32 }: { size?: number }) {
+  return (
+    <FileSpreadsheet size={size} aria-hidden strokeWidth={1.75} color="currentColor" />
+  );
+}

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

@@ -26,6 +26,7 @@ import {
 import {
   isChatEmpty,
   useChat,
+  useChatOutboundPending,
   useChatsForScopeId,
 } from '#uilib/contexts/chat-context';
 import useEvent from '#uilib/hooks/useEvent';
@@ -112,6 +113,7 @@ export function useChatPanelChromeModel({
     getShellWidth,
     setChatPanelOpen,
   } = useSidebar();
+  const [localUiBusy, setLocalUiBusy] = useState(false);
   const {
     chats,
     currentChatId,
@@ -122,6 +124,11 @@ export function useChatPanelChromeModel({
     removeMessageById,
   } = useChatsForScopeId(effectiveScopeId);
   const chat = useChat(effectiveScopeId, currentChatId);
+  const isOutboundPending = useChatOutboundPending(
+    effectiveScopeId,
+    currentChatId,
+  );
+  const isLoading = isOutboundPending || localUiBusy;
 
   const {
     searchParams,
@@ -130,7 +137,6 @@ export function useChatPanelChromeModel({
     mutateSearchParams,
   } = useQueryParams();
   const chatOpen = searchParams.has(CHAT_QUERY_PARAM);
-  const [isLoading, setIsLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   /** `?prompt=` deep link text for one-shot composer pre-fill (see ChatPrompt). */
   const [promptLinkPrefill, setPromptLinkPrefill] = useState<string | null>(
@@ -355,7 +361,7 @@ export function useChatPanelChromeModel({
       ) {
         if (quickReplyLockRef.current) return;
         quickReplyLockRef.current = true;
-        setIsLoading(true);
+        setLocalUiBusy(true);
         setUsedScriptBranchKeysByChat(prev => ({
           ...prev,
           [chatId]: [...new Set([...(prev[chatId] || []), branchKey])],
@@ -413,7 +419,7 @@ export function useChatPanelChromeModel({
           } catch (error) {
             logger.error('Error resolving preset quick reply:', error);
           } finally {
-            setIsLoading(false);
+            setLocalUiBusy(false);
             quickReplyLockRef.current = false;
           }
         })();
@@ -422,14 +428,11 @@ export function useChatPanelChromeModel({
 
       endLocalDemoFlow(chatId);
       void (async () => {
-        setIsLoading(true);
         try {
           await sendMessage(displayLabel);
           onMessage?.(displayLabel);
         } catch (error) {
           logger.error('Error sending chat message:', error);
-        } finally {
-          setIsLoading(false);
         }
       })();
     },
@@ -499,7 +502,7 @@ export function useChatPanelChromeModel({
         ) {
           if (quickReplyLockRef.current) return;
           quickReplyLockRef.current = true;
-          setIsLoading(true);
+          setLocalUiBusy(true);
           const newAnswers = {
             ...intake.answers,
             [intake.scriptStepId]: message,
@@ -544,7 +547,7 @@ export function useChatPanelChromeModel({
             } catch (e) {
               logger.error('Error advancing freeform preset script:', e);
             } finally {
-              setIsLoading(false);
+              setLocalUiBusy(false);
               quickReplyLockRef.current = false;
             }
           })();
@@ -569,15 +572,12 @@ export function useChatPanelChromeModel({
         }
       }
 
-      setIsLoading(true);
       try {
         if (chatId) endLocalDemoFlow(chatId);
         await sendMessage(message);
         onMessage?.(message);
       } catch (error) {
         logger.error('Error sending chat message:', error);
-      } finally {
-        setIsLoading(false);
       }
     },
     [
@@ -613,7 +613,7 @@ export function useChatPanelChromeModel({
       return;
     }
 
-    setIsLoading(true);
+    setLocalUiBusy(true);
     try {
       if (!currentChatId) return;
       setScriptCompleteByChatId(prev => {
@@ -683,7 +683,7 @@ export function useChatPanelChromeModel({
     } catch (error) {
       logger.error('Error sending chat message:', error);
     } finally {
-      setIsLoading(false);
+      setLocalUiBusy(false);
     }
   };
 
@@ -717,7 +717,7 @@ export function useChatPanelChromeModel({
 
     const chatId = currentChatId;
     scriptAdvanceLockRef.current = true;
-    setIsLoading(true);
+    setLocalUiBusy(true);
     addMessage(chatId, MessageRole.USER, step.buttonLabel);
 
     void (async () => {
@@ -761,7 +761,7 @@ export function useChatPanelChromeModel({
       } catch (error) {
         logger.error('Error advancing preset script:', error);
       } finally {
-        setIsLoading(false);
+        setLocalUiBusy(false);
         scriptAdvanceLockRef.current = false;
       }
     })();

package/src/components/ui/Chat/chat-preset-utils.ts

@@ -11,17 +11,23 @@ export function normalizePresetMatchText(s: string): string {
   return s.trim().normalize('NFC');
 }
 
+function presetMatchesUserText(presetText: string, userTextNorm: string): boolean {
+  const presetNorm = normalizePresetMatchText(presetText);
+  if (!presetNorm) return false;
+  if (userTextNorm === presetNorm) return true;
+  const prefix = `${presetNorm} `;
+  return userTextNorm.startsWith(prefix);
+}
+
 export function usedPresetIdsFromMessages(
   messages: Message[] | undefined,
   presets: ChatPreset[] | undefined,
 ): string[] {
   if (!messages?.length || !presets?.length) return [];
-  const userTexts = new Set(
-    messages
-      .filter(m => m.role === MessageRole.USER)
-      .map(m => normalizePresetMatchText(m.text)),
-  );
+  const userTexts = messages
+    .filter(m => m.role === MessageRole.USER)
+    .map(m => normalizePresetMatchText(m.text));
   return presets
-    .filter(p => userTexts.has(normalizePresetMatchText(p.text)))
+    .filter(p => userTexts.some(ut => presetMatchesUserText(p.text, ut)))
     .map(p => p.id);
 }

package/src/components/ui/Chat/index.ts

@@ -17,8 +17,10 @@ export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
 export type {
   Chat as ChatType,
-  Message,
+  ChatSendMessagePayload,
   ChatProps,
   ChatPreset as ChatPresetType,
+  Message,
+  UserCsvAttachment,
 } from './Chat.types';
 export { MessageRole } from './Chat.types';

package/src/contexts/chat-context.tsx

@@ -10,8 +10,10 @@ import {
 
 import {
   type Chat,
+  type ChatSendMessagePayload,
   type Message,
   MessageRole,
+  type UserCsvAttachment,
 } from '#uilib/components/ui/Chat/Chat.types';
 import { stripJsonDashboardFences } from '#uilib/lib/dashboard-spec/stripJsonDashboardFences';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
@@ -22,9 +24,18 @@ export type SendChatMessageFn = (
   targetChatId: string,
 ) => Promise<ChatResponse>;
 
+export type {
+  ChatSendMessagePayload,
+  UserCsvAttachment,
+} from '#uilib/components/ui/Chat/Chat.types';
+
 const CHATS_PREFIX = 'chats-';
 const CHAT_SCOPE_IDS_REGISTRY_KEY = 'chat-scope-ids';
 
+export type AddChatMessageOptions = {
+  userCsvAttachment?: UserCsvAttachment;
+};
+
 export interface ChatContextType {
   /** Returns the new session id, or undefined if no user / not created. */
   newChat: (scopeId: string) => string | undefined;
@@ -34,6 +45,7 @@ export interface ChatContextType {
     chatId: string,
     role: MessageRole,
     text: string,
+    options?: AddChatMessageOptions,
   ) => string | undefined;
   removeMessageById: (
     scopeId: string,
@@ -42,16 +54,26 @@ export interface ChatContextType {
   ) => void;
   sendMessage: (
     scopeId: string,
-    message: string,
+    message: string | ChatSendMessagePayload,
     chatId?: string,
   ) => Promise<string>;
   getChatsForScopeId: (scopeId: string) => Chat[];
   getCurrentChatId: (scopeId: string) => string | null;
   deleteChat: (scopeId: string, sessionId: string) => void;
+  /**
+   * Ref-count of in-flight `sendChatMessage` requests keyed by
+   * `outboundPendingKey(scopeId, chatSessionId)` (session id at send start).
+   */
+  outboundPendingByKey: Readonly<Record<string, number>>;
 }
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
 
+/** Stable composite key; avoids collisions if `scopeId` contains `:`. */
+export function outboundPendingKey(scopeId: string, chatSessionId: string) {
+  return `${scopeId}\0${chatSessionId}`;
+}
+
 function getCurrentChatIdKey(scopeId: string) {
   return `chat-current-id-${scopeId}`;
 }
@@ -149,6 +171,35 @@ export function ChatProvider({
     return loadChatsFromLS(userSwitchKey).currentChatId;
   });
 
+  const [outboundPendingByKey, setOutboundPendingByKey] = useState<
+    Record<string, number>
+  >({});
+
+  const beginOutboundPending = useCallback(
+    (scopeId: string, chatSessionId: string) => {
+      const key = outboundPendingKey(scopeId, chatSessionId);
+      setOutboundPendingByKey(prev => ({
+        ...prev,
+        [key]: (prev[key] ?? 0) + 1,
+      }));
+    },
+    [],
+  );
+
+  const endOutboundPending = useCallback(
+    (scopeId: string, chatSessionId: string) => {
+      const key = outboundPendingKey(scopeId, chatSessionId);
+      setOutboundPendingByKey(prev => {
+        const next = { ...prev };
+        const n = (next[key] ?? 0) - 1;
+        if (n <= 0) delete next[key];
+        else next[key] = n;
+        return next;
+      });
+    },
+    [],
+  );
+
   const getChatsForScopeId = useCallback(
     (scopeId: string): Chat[] => chats[scopeId] ?? [],
     [chats],
@@ -239,15 +290,24 @@ export function ChatProvider({
   }, []);
 
   const addMessage = useCallback(
-    (scopeId: string, chatId: string, role: MessageRole, text: string) => {
+    (
+      scopeId: string,
+      chatId: string,
+      role: MessageRole,
+      text: string,
+      options?: AddChatMessageOptions,
+    ) => {
       if (userSwitchKey === null) return undefined;
       addScopeIdToRegistry(scopeId);
       const storedText = stripJsonDashboardFences(text);
+      const attachment =
+        role === MessageRole.USER ? options?.userCsvAttachment : undefined;
       const newMessage: Message = {
         id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
         role,
         text: storedText,
         timestamp: Date.now(),
+        ...(attachment ? { userCsvAttachment: attachment } : {}),
       };
 
       setChats(prev => {
@@ -292,7 +352,7 @@ export function ChatProvider({
   const sendMessage = useCallback(
     async (
       scopeId: string,
-      message: string,
+      message: string | ChatSendMessagePayload,
       chatId?: string,
     ): Promise<string> => {
       const targetChatId = chatId ?? getCurrentChatId(scopeId);
@@ -300,16 +360,33 @@ export function ChatProvider({
         throw new Error('No chat selected');
       }
 
-      addMessage(scopeId, targetChatId, MessageRole.USER, message);
+      const apiPayload =
+        typeof message === 'string' ? message : message.apiMessage;
 
+      if (typeof message === 'string') {
+        addMessage(scopeId, targetChatId, MessageRole.USER, message);
+      } else {
+        addMessage(
+          scopeId,
+          targetChatId,
+          MessageRole.USER,
+          message.displayText,
+          {
+            userCsvAttachment: message.userCsvAttachment,
+          },
+        );
+      }
+
+      const pendingChatSessionId = targetChatId;
+      beginOutboundPending(scopeId, pendingChatSessionId);
       try {
-        const data = await sendChatMessageFn(message, targetChatId);
+        const data = await sendChatMessageFn(apiPayload, pendingChatSessionId);
 
-        if (data.session_id && data.session_id !== targetChatId) {
+        if (data.session_id && data.session_id !== pendingChatSessionId) {
           setChats(prev => {
             const scopeChats = prev[scopeId] ?? [];
             const updatedChats = scopeChats.map(chat =>
-              chat.session_id === targetChatId
+              chat.session_id === pendingChatSessionId
                 ? { ...chat, session_id: data.session_id! }
                 : chat,
             );
@@ -324,7 +401,7 @@ export function ChatProvider({
 
         addMessage(
           scopeId,
-          data.session_id ? data.session_id : targetChatId,
+          data.session_id ? data.session_id : pendingChatSessionId,
           MessageRole.ASSISTANT,
           data.response,
         );
@@ -336,17 +413,32 @@ export function ChatProvider({
             ? error.message
             : 'Sorry, I encountered an error processing your message. Please try again.';
 
-        addMessage(scopeId, targetChatId, MessageRole.ASSISTANT, errorMessage);
+        addMessage(
+          scopeId,
+          pendingChatSessionId,
+          MessageRole.ASSISTANT,
+          errorMessage,
+        );
         throw error;
+      } finally {
+        endOutboundPending(scopeId, pendingChatSessionId);
       }
     },
-    [addMessage, getCurrentChatId, sendChatMessageFn, setCurrentChatId],
+    [
+      addMessage,
+      beginOutboundPending,
+      endOutboundPending,
+      getCurrentChatId,
+      sendChatMessageFn,
+      setCurrentChatId,
+    ],
   );
 
   useEffect(() => {
     if (userSwitchKey === null) {
       setChats({});
       setCurrentChatIdState({});
+      setOutboundPendingByKey({});
       return;
     }
 
@@ -377,6 +469,7 @@ export function ChatProvider({
         getChatsForScopeId,
         getCurrentChatId,
         deleteChat,
+        outboundPendingByKey,
       }}
     >
       {children}
@@ -409,6 +502,18 @@ export function useChat(
   }, [scopeId, chatId, getChatsForScopeId]);
 }
 
+export function useChatOutboundPending(
+  scopeId: string | undefined | null,
+  chatSessionId: string | null | undefined,
+): boolean {
+  const { outboundPendingByKey } = useChats();
+  return useMemo(() => {
+    if (!scopeId || !chatSessionId) return false;
+    const key = outboundPendingKey(scopeId, chatSessionId);
+    return (outboundPendingByKey[key] ?? 0) > 0;
+  }, [scopeId, chatSessionId, outboundPendingByKey]);
+}
+
 export function useChatsForScopeId(scopeId: string) {
   const {
     getChatsForScopeId,
@@ -423,18 +528,24 @@ export function useChatsForScopeId(scopeId: string) {
   const chats = getChatsForScopeId(scopeId);
   const currentChatId = getCurrentChatId(scopeId);
   const currentChat = useChat(scopeId, currentChatId ?? undefined);
+  const isOutboundPending = useChatOutboundPending(scopeId, currentChatId);
 
   return {
     chats,
     currentChat,
     currentChatId,
+    isOutboundPending,
     setCurrentChatId: (targetId: string) => setCurrentChatId(scopeId, targetId),
     newChat: () => newChat(scopeId),
-    addMessage: (chatId: string, role: MessageRole, text: string) =>
-      addMessage(scopeId, chatId, role, text),
+    addMessage: (
+      chatId: string,
+      role: MessageRole,
+      text: string,
+      options?: AddChatMessageOptions,
+    ) => addMessage(scopeId, chatId, role, text, options),
     removeMessageById: (chatId: string, messageId: string) =>
       removeMessageById(scopeId, chatId, messageId),
-    sendMessage: (message: string, chatId?: string) =>
+    sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) =>
       sendMessage(scopeId, message, chatId),
     deleteChat: (sessionId: string) => deleteChat(scopeId, sessionId),
   };