@xinghunm/ai-chat 1.2.2 → 1.3.1

package/dist/index.mjs

@@ -1,4 +1,5 @@
 // src/components/ai-chat/index.tsx
+import { useEffect as useEffect9 } from "react";
 import styled17 from "@emotion/styled";
 import { ConfigProvider } from "@xinghunm/compass-ui";
 
@@ -47,6 +48,9 @@ var DEFAULT_AI_CHAT_LABELS = {
   questionnaireMultiSelectHint: "Multiple choice",
   questionnaireOtherOptionLabel: "Other",
   questionnaireOtherPlaceholder: "Other",
+  modelLoading: "Loading models...",
+  modelLoadFailed: "Failed to load models",
+  modelUnavailable: "No model available",
   skillLoading: "Loading skills...",
   skillEmpty: "No matching skills",
   removeSkillAriaLabel: "Remove skill"
@@ -82,6 +86,9 @@ var resolveSessionTitleFromMessage = (message) => {
   if (trimmedContent) {
     return trimmedContent.slice(0, 30);
   }
+  if (message.skills?.length) {
+    return message.skills.join(", ").slice(0, 30);
+  }
   if ((message.attachments?.length ?? 0) > 0) {
     return IMAGE_MESSAGE_SESSION_TITLE;
   }
@@ -627,7 +634,7 @@ var createDefaultRequestBody = async ({
   attachments
 }) => {
   const hasAttachments = Boolean(attachments?.length);
-  const skillPayload = skills?.length ? { skill: skills.length === 1 ? skills[0] : skills } : {};
+  const skillPayload = skills?.length ? { skills } : {};
   if (!hasAttachments) {
     return {
       model,
@@ -2823,7 +2830,7 @@ var areMessageBlocksEqual = (previousBlocks, nextBlocks) => {
     }
   });
 };
-var isSameMessage = (previousMessage, nextMessage, previousMode, nextMode, previousConfirmationSubmit, nextConfirmationSubmit, previousQuestionnaireSubmit, nextQuestionnaireSubmit, previousRenderMessageBlock, nextRenderMessageBlock) => previousMessage.id === nextMessage.id && previousMessage.sessionId === nextMessage.sessionId && previousMessage.role === nextMessage.role && previousMessage.content === nextMessage.content && areMessageBlocksEqual(previousMessage.blocks, nextMessage.blocks) && previousMessage.localOnly === nextMessage.localOnly && areChatAttachmentsEqual(previousMessage.attachments, nextMessage.attachments) && previousMessage.status === nextMessage.status && previousMessage.createdAt === nextMessage.createdAt && previousMode === nextMode && previousConfirmationSubmit === nextConfirmationSubmit && previousQuestionnaireSubmit === nextQuestionnaireSubmit && previousRenderMessageBlock === nextRenderMessageBlock;
+var isSameMessage = (previousMessage, nextMessage, previousMode, nextMode, previousConfirmationSubmit, nextConfirmationSubmit, previousQuestionnaireSubmit, nextQuestionnaireSubmit, previousRenderMessageBlock, nextRenderMessageBlock) => previousMessage.id === nextMessage.id && previousMessage.sessionId === nextMessage.sessionId && previousMessage.role === nextMessage.role && previousMessage.content === nextMessage.content && areStringArraysEqual(previousMessage.skills ?? [], nextMessage.skills ?? []) && areMessageBlocksEqual(previousMessage.blocks, nextMessage.blocks) && previousMessage.localOnly === nextMessage.localOnly && areChatAttachmentsEqual(previousMessage.attachments, nextMessage.attachments) && previousMessage.status === nextMessage.status && previousMessage.createdAt === nextMessage.createdAt && previousMode === nextMode && previousConfirmationSubmit === nextConfirmationSubmit && previousQuestionnaireSubmit === nextQuestionnaireSubmit && previousRenderMessageBlock === nextRenderMessageBlock;
 var ChatMessageItemView = ({
   message,
   mode = "agent",
@@ -2843,6 +2850,7 @@ var ChatMessageItemView = ({
   } = useChatMessageReveal(message);
   const isStoppedAssistant = message.role === "assistant" && message.status === "stopped";
   const attachments = message.attachments ?? [];
+  const skills = message.skills ?? [];
   const blocks = message.blocks ?? [];
   const hasStructuredBlocks = blocks.length > 0;
   const hasMarkdownOnlyBlocks = hasStructuredBlocks && blocks.every((block) => block.type === "markdown");
@@ -2884,6 +2892,7 @@ var ChatMessageItemView = ({
     freshContent,
     settledContent
   });
+  const shouldRenderHeader = isAssistantStreaming || isUserMessageCollapsible || isStoppedAssistant;
   const renderMessageContent = (content) => messageRenderMode === "plain-text" ? renderPlainTextContent(content) : renderMarkdownContent(content);
   const renderChatMessageBlock = (block, index3) => {
     switch (block.type) {
@@ -3033,7 +3042,7 @@ var ChatMessageItemView = ({
   })();
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsxs5(Bubble, { "data-role": message.role, "data-status": message.status ?? "done", children: [
-      /* @__PURE__ */ jsxs5(Header2, { children: [
+      shouldRenderHeader ? /* @__PURE__ */ jsxs5(Header2, { children: [
         isAssistantStreaming ? /* @__PURE__ */ jsxs5(
           StreamingIndicator,
           {
@@ -3045,7 +3054,6 @@ var ChatMessageItemView = ({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx8(Role, { children: message.role === "user" ? labels.userRoleLabel : labels.assistantRoleLabel }),
         isUserMessageCollapsible ? /* @__PURE__ */ jsx8(
           CollapseToggle,
           {
@@ -3058,8 +3066,9 @@ var ChatMessageItemView = ({
           }
         ) : null,
         isStoppedAssistant ? /* @__PURE__ */ jsx8(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
-      ] }),
+      ] }) : null,
       /* @__PURE__ */ jsxs5(Content, { "data-testid": "chat-message-content", children: [
+        skills.length ? /* @__PURE__ */ jsx8(SkillTagList, { "data-testid": "chat-message-skill-tags", children: skills.map((skill) => /* @__PURE__ */ jsx8(SkillTag, { children: skill }, skill)) }) : null,
         shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsx8(
           ContentStack,
           {
@@ -3124,19 +3133,22 @@ var ChatMessageItem = memo(
 var Bubble = styled7.article`
   width: 100%;
   max-width: 100%;
-  padding: 14px 16px;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.07);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.03),
-    0 12px 30px rgba(0, 0, 0, 0.18);
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
 
   &[data-role='user'] {
     width: auto;
     max-width: min(760px, 100%);
     margin-left: auto;
+    padding: 14px 16px;
+    border-radius: 22px;
     background: linear-gradient(180deg, rgba(59, 59, 63, 0.9) 0%, rgba(42, 43, 46, 0.92) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.03),
+      0 12px 30px rgba(0, 0, 0, 0.18);
   }
 `;
 var Header2 = styled7.div`
@@ -3145,12 +3157,6 @@ var Header2 = styled7.div`
   gap: 10px;
   margin-bottom: 10px;
 `;
-var Role = styled7.div`
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.42);
-  text-transform: capitalize;
-  letter-spacing: 0.08em;
-`;
 var StatusTag = styled7.span`
   display: inline-flex;
   align-items: center;
@@ -3257,6 +3263,23 @@ var Content = styled7.div`
     margin: 0 0 8px;
   }
 `;
+var SkillTagList = styled7.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+`;
+var SkillTag = styled7.span`
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  padding: 10px 18px;
+  border-radius: 999px;
+  background: rgba(65, 65, 63, 0.6);
+  color: #c5c1ba;
+  font-size: 14px;
+  line-height: 1;
+`;
 var ContentStack = styled7.div`
   display: flex;
   flex-direction: column;
@@ -6515,6 +6538,7 @@ function useFloating2(options) {
 var createUserMessage = ({
   sessionId,
   content,
+  skills,
   attachments,
   localOnly,
   createdAt,
@@ -6524,6 +6548,7 @@ var createUserMessage = ({
   sessionId,
   role: "user",
   content,
+  skills,
   attachments,
   localOnly,
   createdAt
@@ -6543,16 +6568,20 @@ var createAssistantStreamingMessage = ({
 var canSendChatMessage = ({
   value,
   attachmentCount = 0,
+  skillCount = 0,
   isModelsLoading,
   isModelsError,
   hasModels
 }) => {
   const hasText = Boolean(value.trim());
   const hasAttachments = attachmentCount > 0;
-  if (!hasText && !hasAttachments)
+  const hasSkills = skillCount > 0;
+  if (!hasText && !hasAttachments && !hasSkills)
     return false;
   if (!hasText && hasAttachments)
     return true;
+  if (!hasText && !hasAttachments && hasSkills)
+    return !isModelsLoading && !isModelsError && hasModels;
   return !isModelsLoading && !isModelsError && hasModels;
 };
 var shouldSubmitChatComposer = ({
@@ -6848,6 +6877,7 @@ var useChatComposer = () => {
   const abortControllerBySessionRef = useRef10(/* @__PURE__ */ new Map());
   const stopRequestBySessionRef = useRef10(/* @__PURE__ */ new Map());
   const lastRequestBySessionRef = useRef10(/* @__PURE__ */ new Map());
+  const previousActiveSessionIdRef = useRef10(activeSessionId);
   useEffect7(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
@@ -6860,6 +6890,12 @@ var useChatComposer = () => {
     }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [activeSession, preferredMode]);
+  useEffect7(() => {
+    if (previousActiveSessionIdRef.current !== activeSessionId) {
+      setSelectedSkills([]);
+      previousActiveSessionIdRef.current = activeSessionId;
+    }
+  }, [activeSessionId]);
   useEffect7(() => {
     if (!attachmentNotice)
       return;
@@ -7051,6 +7087,7 @@ var useChatComposer = () => {
       if (!canSendChatMessage({
         value: content,
         attachmentCount: composerAttachmentCount,
+        skillCount: messageSkills?.length ?? 0,
         isModelsLoading,
         isModelsError,
         hasModels
@@ -7078,6 +7115,7 @@ var useChatComposer = () => {
       const userMessage = createUserMessage({
         sessionId: localSessionId,
         content,
+        skills: messageSkills,
         attachments: messageAttachments,
         localOnly: false,
         createdAt: nowIso(),
@@ -7120,6 +7158,19 @@ var useChatComposer = () => {
       store
     ]
   );
+  const openSkillPicker = useCallback7(() => {
+    setValue((current) => {
+      const matchedSkillQuery = current.match(/(^|\s)\/([^\s/]*)$/);
+      if (matchedSkillQuery && matchedSkillQuery.index !== void 0) {
+        const queryStart = matchedSkillQuery.index + matchedSkillQuery[1].length;
+        return current.slice(0, queryStart).replace(/\s+$/, "");
+      }
+      if (!current.trim()) {
+        return "/";
+      }
+      return /\s$/.test(current) ? `${current}/` : `${current} /`;
+    });
+  }, []);
   const stopSession = useCallback7(
     async (sessionId) => {
       const storeState = store.getState();
@@ -7194,6 +7245,7 @@ var useChatComposer = () => {
       removeSkill: (skill) => {
         setSelectedSkills((current) => current.filter((item) => item !== skill));
       },
+      openSkillPicker,
       setSelectedModel,
       setSelectedMode: (mode) => {
         setSelectedModeLocal(mode);
@@ -7388,12 +7440,42 @@ var CloseGlyph = styled10.span`
 import styled11 from "@emotion/styled";
 import { Select } from "@xinghunm/compass-ui";
 import { jsx as jsx13, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+var ModelIcon = () => /* @__PURE__ */ jsx13(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    style: { display: "block" },
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxs10(
+      "g",
+      {
+        transform: "translate(1.6545 1.0182)",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.22181818",
+        children: [
+          /* @__PURE__ */ jsx13("path", { d: "M4.80808081 11.8021107C5.17998715 12.0158424 5.63819467 12.0158424 6.01010101 11.8021107L10.2171717 9.40913806C10.588697 9.19562567 10.8177418 8.8012024 10.8181818 8.37417739V3.58823209C10.8177418 3.16120709 10.588697 2.76678381 10.2171717 2.55327142L6.01010101 0.160298772C5.63819467 -0.0534329241 5.17998715 -0.0534329241 4.80808081 0.160298772L0.601010101 2.55327142C0.229484841 2.76678381 0.000440028788 3.16120709 0 3.58823209V8.37417739C0.000440028788 8.8012024 0.229484841 9.19562567 0.601010101 9.40913806L4.80808081 11.8021107Z" }),
+          /* @__PURE__ */ jsx13("path", { d: "M5.40909091 11.9636364V5.98120474" }),
+          /* @__PURE__ */ jsx13("path", { d: "M0.174292929 2.98998893L5.40909091 5.98120474L10.6438889 2.98998893" })
+        ]
+      }
+    )
+  }
+);
 var ChatModelControl = ({
   selectedModel,
   availableModels,
   isModelsLoading,
   isModelsError,
   hasModels,
+  loadingLabel,
+  loadFailedLabel,
+  unavailableLabel,
   onSelectedModelChange,
   onReloadModels
 }) => {
@@ -7406,7 +7488,7 @@ var ChatModelControl = ({
         "aria-label": "Reload",
         onClick: onReloadModels,
         children: [
-          /* @__PURE__ */ jsx13("span", { children: "Failed to load models" }),
+          /* @__PURE__ */ jsx13("span", { children: loadFailedLabel }),
           /* @__PURE__ */ jsxs10(
             ReloadIcon,
             {
@@ -7428,29 +7510,32 @@ var ChatModelControl = ({
     );
   }
   if (isModelsLoading) {
-    return /* @__PURE__ */ jsx13(ModelBadge, { children: "Loading models..." });
+    return /* @__PURE__ */ jsx13(ModelBadge, { "data-testid": "chat-model-loading", children: loadingLabel });
   }
   if (hasModels && selectedModel) {
-    if (availableModels.length > 1) {
-      return /* @__PURE__ */ jsx13(
-        ModelSelect,
-        {
-          "data-testid": "chat-model-select",
-          "aria-label": "Select model",
-          value: selectedModel,
-          onChange: (value) => onSelectedModelChange(String(value)),
-          options: availableModels.map((model) => ({
-            label: model.id,
-            value: model.id
-          }))
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx13(ModelBadge, { children: selectedModel });
+    return /* @__PURE__ */ jsx13(
+      ModelSelect,
+      {
+        "data-testid": "chat-model-select",
+        "aria-label": "Select model",
+        value: selectedModel,
+        onChange: (value) => onSelectedModelChange(String(value)),
+        options: availableModels.map((model) => ({
+          label: model.id,
+          value: model.id
+        })),
+        labelRender: () => /* @__PURE__ */ jsx13(ModelIcon, {})
+      }
+    );
   }
-  return /* @__PURE__ */ jsx13(ModelBadge, { children: "No model available" });
+  return /* @__PURE__ */ jsx13(ModelBadge, { "data-testid": "chat-model-unavailable", children: unavailableLabel });
 };
 var ModelBadge = styled11.span`
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
   border-radius: 999px;
   border: 1px solid var(--border-hover);
   padding: 5px 12px;
@@ -7458,6 +7543,9 @@ var ModelBadge = styled11.span`
   font-size: 12px;
   color: var(--text-secondary);
   line-height: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
 `;
 var ModelReloadButton = styled11.button`
   display: inline-flex;
@@ -7489,20 +7577,55 @@ var ReloadIcon = styled11.svg`
 `;
 var ModelSelect = styled11(Select)`
   && {
-    width: auto;
+    width: 24px;
+    min-width: 24px;
+    max-width: 24px;
+    flex: 0 0 24px;
+  }
+
+  && .compass-select-selector {
+    justify-content: center;
+    border-radius: 999px;
+    min-height: 24px;
+    height: 24px;
+    width: 24px;
+    padding: 0;
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.14);
+    color: #c5c1ba;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    margin-right: 0;
+  }
+
+  && .compass-select-selector:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  && .compass-select-selection-item {
+    display: flex;
+    width: 100%;
+    margin-right: 0;
     min-width: 0;
-    max-width: 100%;
+    min-height: 24px;
+    align-items: center;
+    justify-content: center;
+  }
 
-    .compass-select-selector {
-      line-height: 1;
-      border-radius: 999px;
-      min-height: 24px;
-      height: 24px;
-      background: rgba(255, 255, 255, 0.04);
-      border-color: rgba(255, 255, 255, 0.12);
-      color: rgba(255, 255, 255, 0.82);
-      padding: 4px 12px;
-    }
+  && .compass-select-selector > div:first-of-type {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0;
+  }
+
+  && .compass-select-selection-item svg {
+    display: block;
+  }
+
+  && .compass-select-selector > span:last-child {
+    display: none;
   }
 `;
 
@@ -7533,21 +7656,27 @@ var ChatModeControl = ({
 };
 var ModeSelect = styled12(Select2)`
   && {
-    flex: 0 1 auto;
-    width: auto;
-    min-width: 0;
-    max-width: 100%;
+    flex: 0 0 auto;
+    width: fit-content;
+    min-width: fit-content;
+    max-width: none;
+  }
 
-    .compass-select-selector {
-      line-height: 1;
-      border-radius: 999px;
-      min-height: 24px;
-      height: 24px;
-      background: rgba(255, 255, 255, 0.04);
-      border-color: rgba(255, 255, 255, 0.12);
-      color: rgba(255, 255, 255, 0.82);
-      padding: 4px 12px;
-    }
+  && .compass-select-selector {
+    width: fit-content;
+    line-height: 1;
+    border-radius: 999px;
+    min-height: 24px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.82);
+    padding: 4px 12px;
+  }
+
+  && .compass-select-selector > div:first-of-type {
+    width: auto;
+    min-width: max-content;
   }
 `;
 
@@ -7722,6 +7851,31 @@ var PlusIcon = () => /* @__PURE__ */ jsx16(
     children: /* @__PURE__ */ jsx16("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
   }
 );
+var SkillIcon = () => /* @__PURE__ */ jsx16(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxs11(
+      "g",
+      {
+        transform: "translate(1.7818 2.2909)",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.22181818",
+        children: [
+          /* @__PURE__ */ jsx16("path", { d: "M5.28181818 2.12121212V9.54545455" }),
+          /* @__PURE__ */ jsx16("path", { d: "M0.528181818 7.95454545C0.236475055 7.95454545 0 7.7171207 0 7.42424242V0.53030303C0 0.237424754 0.236475055 0 0.528181818 0H3.16909091C4.33591796 0 5.28181818 0.949699016 5.28181818 2.12121212C5.28181818 0.949699016 6.2277184 0 7.39454545 0H10.0354545C10.3271613 0 10.5636364 0.237424754 10.5636364 0.53030303V7.42424242C10.5636364 7.7171207 10.3271613 7.95454545 10.0354545 7.95454545H6.86636364C5.99124335 7.95454545 5.28181818 8.66681972 5.28181818 9.54545455C5.28181818 8.66681972 4.57239302 7.95454545 3.69727273 7.95454545H0.528181818Z" })
+        ]
+      }
+    )
+  }
+);
 var ComposerExpandIcon = ({ expanded }) => /* @__PURE__ */ jsx16(
   "svg",
   {
@@ -7796,6 +7950,9 @@ var ChatComposerView = ({
   skillLoadingLabel,
   skillEmptyLabel,
   removeSkillAriaLabel,
+  modelLoadingLabel,
+  modelLoadFailedLabel,
+  modelUnavailableLabel,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -7805,6 +7962,7 @@ var ChatComposerView = ({
   onSelectedModelChange,
   onSelectedModeChange,
   onReloadModels,
+  onOpenSkillPicker,
   onStop,
   onSend
 }) => {
@@ -7819,6 +7977,7 @@ var ChatComposerView = ({
   const canSend = canSendChatMessage({
     value,
     attachmentCount: attachments.length,
+    skillCount: selectedSkills.length,
     isModelsLoading,
     isModelsError,
     hasModels
@@ -7835,11 +7994,12 @@ var ChatComposerView = ({
   }) : [];
   const showSkillMenu = Boolean(skillQueryMatch);
   const activeSkillQueryKey = skillQueryMatch ? `${skillQueryMatch.start}:${skillQueryMatch.end}:${skillQueryMatch.query}:${selectedSkills.join("\0")}` : "";
-  const { refs, floatingStyles } = useFloating2({
+  const { refs, floatingStyles, placement } = useFloating2({
     open: showSkillMenu,
     placement: "bottom-start",
+    strategy: "fixed",
     middleware: [
-      offset3(8),
+      offset3(3),
       flip3({ padding: 8 }),
       shift3({ padding: 8 }),
       size3({
@@ -7945,8 +8105,14 @@ var ChatComposerView = ({
     event.preventDefault();
     onPasteImages(imageFiles);
   };
+  const handleOpenSkillPicker = () => {
+    onOpenSkillPicker();
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+  };
   return /* @__PURE__ */ jsxs11(Container2, { children: [
-    /* @__PURE__ */ jsxs11(Surface, { "data-testid": "chat-composer-surface", children: [
+    /* @__PURE__ */ jsxs11(Surface, { ref: setSkillMenuReference, "data-testid": "chat-composer-surface", children: [
       enableImageAttachments ? /* @__PURE__ */ jsx16(
         "input",
         {
@@ -7967,7 +8133,7 @@ var ChatComposerView = ({
         }
       ),
       attachmentNotice === "limit_reached" ? /* @__PURE__ */ jsx16(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
-      selectedSkills.length ? /* @__PURE__ */ jsx16(SkillTagList, { "data-testid": "chat-composer-skill-tags", children: selectedSkills.map((skill) => /* @__PURE__ */ jsxs11(SkillTag, { children: [
+      selectedSkills.length ? /* @__PURE__ */ jsx16(SkillTagList2, { "data-testid": "chat-composer-skill-tags", children: selectedSkills.map((skill) => /* @__PURE__ */ jsxs11(SkillTag2, { children: [
         /* @__PURE__ */ jsx16("span", { children: skill }),
         /* @__PURE__ */ jsx16(
           SkillTagRemoveButton,
@@ -7980,7 +8146,7 @@ var ChatComposerView = ({
           }
         )
       ] }, skill)) }) : null,
-      /* @__PURE__ */ jsxs11(InputArea, { ref: setSkillMenuReference, "data-testid": "chat-composer-input-area", children: [
+      /* @__PURE__ */ jsxs11(InputArea, { "data-testid": "chat-composer-input-area", children: [
         isComposerExpanded || isComposerExpandable ? /* @__PURE__ */ jsx16(
           ComposerExpandButton,
           {
@@ -8007,17 +8173,27 @@ var ChatComposerView = ({
         )
       ] }),
       /* @__PURE__ */ jsxs11(Footer, { children: [
-        /* @__PURE__ */ jsx16(LeadingActions, { "data-testid": "chat-composer-leading-actions", children: enableImageAttachments ? /* @__PURE__ */ jsx16(
-          AttachButton,
-          {
-            type: "button",
-            "data-testid": "chat-composer-attach-image",
-            "aria-label": "Attach image",
-            onClick: () => imageInputRef.current?.click(),
-            children: /* @__PURE__ */ jsx16(PlusIcon, {})
-          }
-        ) : null }),
-        /* @__PURE__ */ jsxs11(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
+        /* @__PURE__ */ jsxs11(LeadingActions, { "data-testid": "chat-composer-leading-actions", children: [
+          enableImageAttachments ? /* @__PURE__ */ jsx16(
+            AttachButton,
+            {
+              type: "button",
+              "data-testid": "chat-composer-attach-image",
+              "aria-label": "Attach image",
+              onClick: () => imageInputRef.current?.click(),
+              children: /* @__PURE__ */ jsx16(PlusIcon, {})
+            }
+          ) : null,
+          /* @__PURE__ */ jsx16(
+            SkillButton,
+            {
+              type: "button",
+              "data-testid": "chat-composer-skill-trigger",
+              "aria-label": "Open skill picker",
+              onClick: handleOpenSkillPicker,
+              children: /* @__PURE__ */ jsx16(SkillIcon, {})
+            }
+          ),
           /* @__PURE__ */ jsx16(
             ChatModeControl,
             {
@@ -8026,7 +8202,9 @@ var ChatComposerView = ({
               labels: modeLabels,
               onChange: onSelectedModeChange
             }
-          ),
+          )
+        ] }),
+        /* @__PURE__ */ jsxs11(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
           /* @__PURE__ */ jsx16(
             ChatModelControl,
             {
@@ -8035,6 +8213,9 @@ var ChatComposerView = ({
               isModelsLoading,
               isModelsError,
               hasModels,
+              loadingLabel: modelLoadingLabel,
+              loadFailedLabel: modelLoadFailedLabel,
+              unavailableLabel: modelUnavailableLabel,
               onSelectedModelChange,
               onReloadModels
             }
@@ -8058,6 +8239,8 @@ var ChatComposerView = ({
         ref: setSkillMenuFloating,
         style: floatingStyles,
         "data-testid": "chat-composer-skill-menu",
+        "data-placement": placement,
+        "data-floating-strategy": "fixed",
         role: "listbox",
         children: isSkillsLoading ? /* @__PURE__ */ jsx16(SkillMenuState, { "data-testid": "chat-composer-skill-loading", children: skillLoadingLabel }) : filteredSkills.length ? filteredSkills.map((skill, index3) => /* @__PURE__ */ jsx16(
           SkillMenuItem,
@@ -8119,6 +8302,9 @@ var ChatComposer = () => {
       skillLoadingLabel: labels.skillLoading,
       skillEmptyLabel: labels.skillEmpty,
       removeSkillAriaLabel: labels.removeSkillAriaLabel,
+      modelLoadingLabel: labels.modelLoading,
+      modelLoadFailedLabel: labels.modelLoadFailed,
+      modelUnavailableLabel: labels.modelUnavailable,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,
@@ -8128,6 +8314,7 @@ var ChatComposer = () => {
       onSelectedModelChange: actions.setSelectedModel,
       onSelectedModeChange: actions.setSelectedMode,
       onReloadModels: actions.reloadModels,
+      onOpenSkillPicker: actions.openSkillPicker,
       onStop: actions.stop,
       onSend: send
     }
@@ -8166,31 +8353,55 @@ var AttachmentNotice = styled14.div`
   font-size: 12px;
   line-height: 1.4;
 `;
-var SkillTagList = styled14.div`
+var SkillTagList2 = styled14.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 12px 0;
+  gap: 9px;
+  padding: 11px 16px;
 `;
-var SkillTag = styled14.span`
+var SkillTag2 = styled14.span`
+  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
   max-width: 100%;
-  border-radius: 999px;
-  padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-primary);
-  font-size: 13px;
+  padding: 11px 16px;
+  background: rgba(65, 65, 63, 0.35);
+  border-radius: 18px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #c5c1ba;
   line-height: 1;
+
+  :hover {
+    background: #41413f;
+  }
+
+  &:hover > button,
+  &:focus-within > button {
+    opacity: 1;
+    pointer-events: auto;
+  }
 `;
 var SkillTagRemoveButton = styled14.button`
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #000000;
+  display: grid;
+  place-items: center;
   border: none;
   padding: 0;
-  background: transparent;
   color: inherit;
   cursor: pointer;
   line-height: 1;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 120ms ease,
+    background-color 120ms ease;
 `;
 var InputArea = styled14.div`
   grid-area: input;
@@ -8251,18 +8462,21 @@ var SkillMenu = styled14.div`
   gap: 4px;
   max-height: 240px;
   overflow-y: auto;
-  padding: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 16px;
+  padding: 4px;
+  border-radius: 12px;
   background: rgba(28, 28, 28, 0.98);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
   z-index: 1000;
+  background: #1c1c1c;
+  box-shadow: 0px 4px 6px 0px rgba(14, 14, 14, 0.3);
+  border-radius: 12px;
+  border: 1px solid #282825;
 `;
 var SkillMenuItem = styled14.button`
   width: 100%;
   border: none;
-  border-radius: 12px;
-  padding: 12px 14px;
+  border-radius: 8px;
+  padding: 12px;
   background: transparent;
   color: var(--text-primary);
   text-align: left;
@@ -8270,7 +8484,7 @@ var SkillMenuItem = styled14.button`
 
   &[data-active='true'],
   &:hover {
-    background: rgba(255, 255, 255, 0.12);
+    background: #41413f;
   }
 `;
 var SkillMenuState = styled14.div`
@@ -8300,9 +8514,8 @@ var ComposerExpandButton = styled14.button`
 `;
 var Footer = styled14.div`
   grid-area: footer;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: flex-end;
+  display: flex;
+  align-items: center;
   gap: 8px;
   padding: 0 14px 14px;
 `;
@@ -8310,33 +8523,72 @@ var LeadingActions = styled14.div`
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 8px;
+  gap: 4px;
   min-width: 0;
 `;
 var TrailingActions = styled14.div`
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   min-width: 0;
-  width: fit-content;
-  max-width: 100%;
-  justify-self: end;
+  margin-left: auto;
   justify-content: flex-end;
   gap: 8px;
 `;
 var AttachButton = styled14.button`
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   display: grid;
   place-items: center;
-  border: none;
   border-radius: 999px;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  padding: 0;
+  color: #c5c1ba;
   cursor: pointer;
+  flex: 0 0 24px;
+
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  svg {
+    display: block;
+  }
+`;
+var SkillButton = styled14.button`
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  padding: 0;
+  color: #c5c1ba;
+  cursor: pointer;
+  flex: 0 0 24px;
+
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  svg {
+    display: block;
   }
 `;
 
@@ -8469,6 +8721,76 @@ var List2 = styled16.div`
 
 // src/components/ai-chat/index.tsx
 import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
+var NewTalkIcon = () => /* @__PURE__ */ jsx19(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    style: { display: "block" },
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxs14(
+      "g",
+      {
+        transform: "translate(1.8909 2.0364)",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.36533333",
+        children: [
+          /* @__PURE__ */ jsxs14("g", { transform: "translate(9.8909 2.3273) rotate(-315) translate(-9.8909 -2.3273) translate(8.2909 0.7273)", children: [
+            /* @__PURE__ */ jsx19("path", { d: "M0 0C0 0 1.06666667 1.06666667 3.2 3.2" }),
+            /* @__PURE__ */ jsx19("path", { d: "M3.2 0C3.2 0 2.13333333 1.06666667 0 3.2" })
+          ] }),
+          /* @__PURE__ */ jsx19("path", { d: "M12.2181818 6.15099432V7.31151515C12.2181818 8.25408112 11.4540811 9.01818182 10.5115152 9.01818182H4.19089868C4.07080994 9.01818182 3.95380126 9.05618401 3.85662972 9.12674601L0.903157852 11.2714364C0.648927541 11.4560481 0.293175841 11.399611 0.10856419 11.1453807C0.0380021898 11.0482092 0 10.9312005 0 10.8111117V1.70666667C0 0.764100694 0.764100694 0 1.70666667 0H6.07111268" })
+        ]
+      }
+    )
+  }
+);
+var hasStartedConversation = ({
+  activeSessionId,
+  messagesBySession,
+  streamingMessageBySession,
+  errorBySession
+}) => {
+  if (!activeSessionId) {
+    return false;
+  }
+  return Boolean(
+    (messagesBySession[activeSessionId]?.length ?? 0) > 0 || streamingMessageBySession[activeSessionId] || errorBySession[activeSessionId]
+  );
+};
+var AiChatWorkspaceContent = ({
+  showConversationList,
+  showNewChatButton,
+  renderNewChatTrigger,
+  showComposerOnlyBeforeFirstMessage = false,
+  onConversationStartedChange
+}) => {
+  const isConversationStarted = useChatStore(
+    (state) => hasStartedConversation({
+      activeSessionId: state.activeSessionId,
+      messagesBySession: state.messagesBySession,
+      streamingMessageBySession: state.streamingMessageBySession,
+      errorBySession: state.errorBySession
+    })
+  );
+  const shouldShowComposerOnly = showComposerOnlyBeforeFirstMessage && !showConversationList && !isConversationStarted;
+  useEffect9(() => {
+    onConversationStartedChange?.(isConversationStarted);
+  }, [isConversationStarted, onConversationStartedChange]);
+  return /* @__PURE__ */ jsxs14(Root, { "data-testid": "ai-chat", children: [
+    showConversationList ? /* @__PURE__ */ jsx19(ChatConversationList, {}) : null,
+    /* @__PURE__ */ jsxs14(Workspace, { children: [
+      showNewChatButton && !showConversationList && !shouldShowComposerOnly ? /* @__PURE__ */ jsx19(QuickActions, { renderNewChatTrigger }) : null,
+      shouldShowComposerOnly ? null : /* @__PURE__ */ jsx19(ChatThread, {}),
+      /* @__PURE__ */ jsx19(ChatComposer, {})
+    ] })
+  ] });
+};
 var QuickActions = ({ renderNewChatTrigger }) => {
   const { labels, stopRef, store } = useChatContext();
   const startNewChat = useChatStore((state) => state.startNewChat);
@@ -8522,9 +8844,11 @@ var QuickActions = ({ renderNewChatTrigger }) => {
     {
       type: "button",
       "data-testid": "chat-start-new-session",
+      "aria-label": labels.newChat,
+      title: labels.newChat,
       onClick: () => void handleStartNewChat(),
       disabled: isActiveSessionStopping,
-      children: labels.newChat
+      children: /* @__PURE__ */ jsx19(NewTalkIcon, {})
     }
   ) });
 };
@@ -8536,6 +8860,8 @@ var AiChat = ({
   showConversationList = false,
   showNewChatButton = false,
   renderNewChatTrigger,
+  showComposerOnlyBeforeFirstMessage = false,
+  onConversationStartedChange,
   ...providerProps
 }) => /* @__PURE__ */ jsx19(
   ConfigProvider,
@@ -8572,14 +8898,16 @@ var AiChat = ({
         }
       }
     },
-    children: /* @__PURE__ */ jsx19(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ jsxs14(Root, { "data-testid": "ai-chat", children: [
-      showConversationList ? /* @__PURE__ */ jsx19(ChatConversationList, {}) : null,
-      /* @__PURE__ */ jsxs14(Workspace, { children: [
-        showNewChatButton && !showConversationList ? /* @__PURE__ */ jsx19(QuickActions, { renderNewChatTrigger }) : null,
-        /* @__PURE__ */ jsx19(ChatThread, {}),
-        /* @__PURE__ */ jsx19(ChatComposer, {})
-      ] })
-    ] }) })
+    children: /* @__PURE__ */ jsx19(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ jsx19(
+      AiChatWorkspaceContent,
+      {
+        showConversationList,
+        showNewChatButton,
+        renderNewChatTrigger,
+        showComposerOnlyBeforeFirstMessage,
+        onConversationStartedChange
+      }
+    ) })
   }
 );
 var Root = styled17.div`
@@ -8603,12 +8931,26 @@ var QuickActionsRow = styled17.div`
   padding: 12px 12px 0;
 `;
 var QuickActionButton = styled17.button`
-  border: none;
-  border-radius: 12px;
-  padding: 10px 14px;
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   color: var(--text-primary, #fcfbf8);
   cursor: pointer;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
 
   &:disabled {
     opacity: 0.5;