@xinghunm/ai-chat 1.2.2 → 1.3.0

package/dist/index.js

@@ -46,6 +46,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/ai-chat/index.tsx
+var import_react20 = require("react");
 var import_styled17 = __toESM(require("@emotion/styled"));
 var import_compass_ui4 = require("@xinghunm/compass-ui");
 
@@ -129,6 +130,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;
   }
@@ -674,7 +678,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,
@@ -2866,7 +2870,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",
@@ -2886,6 +2890,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");
@@ -2927,6 +2932,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) {
@@ -3076,7 +3082,7 @@ var ChatMessageItemView = ({
   })();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Bubble, { "data-role": message.role, "data-status": message.status ?? "done", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Header2, { children: [
+      shouldRenderHeader ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Header2, { children: [
         isAssistantStreaming ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           StreamingIndicator,
           {
@@ -3088,7 +3094,6 @@ var ChatMessageItemView = ({
             ]
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Role, { children: message.role === "user" ? labels.userRoleLabel : labels.assistantRoleLabel }),
         isUserMessageCollapsible ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           CollapseToggle,
           {
@@ -3101,8 +3106,9 @@ var ChatMessageItemView = ({
           }
         ) : null,
         isStoppedAssistant ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
-      ] }),
+      ] }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Content, { "data-testid": "chat-message-content", children: [
+        skills.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkillTagList, { "data-testid": "chat-message-skill-tags", children: skills.map((skill) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkillTag, { children: skill }, skill)) }) : null,
         shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ContentStack,
           {
@@ -3167,19 +3173,22 @@ var ChatMessageItem = (0, import_react9.memo)(
 var Bubble = import_styled7.default.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 = import_styled7.default.div`
@@ -3188,12 +3197,6 @@ var Header2 = import_styled7.default.div`
   gap: 10px;
   margin-bottom: 10px;
 `;
-var Role = import_styled7.default.div`
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.42);
-  text-transform: capitalize;
-  letter-spacing: 0.08em;
-`;
 var StatusTag = import_styled7.default.span`
   display: inline-flex;
   align-items: center;
@@ -3300,6 +3303,23 @@ var Content = import_styled7.default.div`
     margin: 0 0 8px;
   }
 `;
+var SkillTagList = import_styled7.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+`;
+var SkillTag = import_styled7.default.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 = import_styled7.default.div`
   display: flex;
   flex-direction: column;
@@ -6558,6 +6578,7 @@ function useFloating2(options) {
 var createUserMessage = ({
   sessionId,
   content,
+  skills,
   attachments,
   localOnly,
   createdAt,
@@ -6567,6 +6588,7 @@ var createUserMessage = ({
   sessionId,
   role: "user",
   content,
+  skills,
   attachments,
   localOnly,
   createdAt
@@ -6586,16 +6608,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 = ({
@@ -6891,6 +6917,7 @@ var useChatComposer = () => {
   const abortControllerBySessionRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
   const stopRequestBySessionRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
   const lastRequestBySessionRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
+  const previousActiveSessionIdRef = (0, import_react15.useRef)(activeSessionId);
   (0, import_react15.useEffect)(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
@@ -6903,6 +6930,12 @@ var useChatComposer = () => {
     }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [activeSession, preferredMode]);
+  (0, import_react15.useEffect)(() => {
+    if (previousActiveSessionIdRef.current !== activeSessionId) {
+      setSelectedSkills([]);
+      previousActiveSessionIdRef.current = activeSessionId;
+    }
+  }, [activeSessionId]);
   (0, import_react15.useEffect)(() => {
     if (!attachmentNotice)
       return;
@@ -7094,6 +7127,7 @@ var useChatComposer = () => {
       if (!canSendChatMessage({
         value: content,
         attachmentCount: composerAttachmentCount,
+        skillCount: messageSkills?.length ?? 0,
         isModelsLoading,
         isModelsError,
         hasModels
@@ -7121,6 +7155,7 @@ var useChatComposer = () => {
       const userMessage = createUserMessage({
         sessionId: localSessionId,
         content,
+        skills: messageSkills,
         attachments: messageAttachments,
         localOnly: false,
         createdAt: nowIso(),
@@ -7163,6 +7198,19 @@ var useChatComposer = () => {
       store
     ]
   );
+  const openSkillPicker = (0, import_react15.useCallback)(() => {
+    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 = (0, import_react15.useCallback)(
     async (sessionId) => {
       const storeState = store.getState();
@@ -7237,6 +7285,7 @@ var useChatComposer = () => {
       removeSkill: (skill) => {
         setSelectedSkills((current) => current.filter((item) => item !== skill));
       },
+      openSkillPicker,
       setSelectedModel,
       setSelectedMode: (mode) => {
         setSelectedModeLocal(mode);
@@ -7431,6 +7480,33 @@ var CloseGlyph = import_styled10.default.span`
 var import_styled11 = __toESM(require("@emotion/styled"));
 var import_compass_ui = require("@xinghunm/compass-ui");
 var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+var ModelIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  "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__ */ (0, import_jsx_runtime13.jsxs)(
+      "g",
+      {
+        transform: "translate(1.6545 1.0182)",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.22181818",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M5.40909091 11.9636364V5.98120474" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M0.174292929 2.98998893L5.40909091 5.98120474L10.6438889 2.98998893" })
+        ]
+      }
+    )
+  }
+);
 var ChatModelControl = ({
   selectedModel,
   availableModels,
@@ -7474,22 +7550,20 @@ var ChatModelControl = ({
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "Loading models..." });
   }
   if (hasModels && selectedModel) {
-    if (availableModels.length > 1) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        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__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: selectedModel });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      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__ */ (0, import_jsx_runtime13.jsx)(ModelIcon, {})
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "No model available" });
 };
@@ -7532,20 +7606,55 @@ var ReloadIcon = import_styled11.default.svg`
 `;
 var ModelSelect = (0, import_styled11.default)(import_compass_ui.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;
   }
 `;
 
@@ -7576,21 +7685,27 @@ var ChatModeControl = ({
 };
 var ModeSelect = (0, import_styled12.default)(import_compass_ui2.Select)`
   && {
-    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;
   }
 `;
 
@@ -7765,6 +7880,31 @@ var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
   }
 );
+var SkillIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "g",
+      {
+        transform: "translate(1.7818 2.2909)",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.22181818",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M5.28181818 2.12121212V9.54545455" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)(
   "svg",
   {
@@ -7848,6 +7988,7 @@ var ChatComposerView = ({
   onSelectedModelChange,
   onSelectedModeChange,
   onReloadModels,
+  onOpenSkillPicker,
   onStop,
   onSend
 }) => {
@@ -7862,6 +8003,7 @@ var ChatComposerView = ({
   const canSend = canSendChatMessage({
     value,
     attachmentCount: attachments.length,
+    skillCount: selectedSkills.length,
     isModelsLoading,
     isModelsError,
     hasModels
@@ -7882,7 +8024,7 @@ var ChatComposerView = ({
     open: showSkillMenu,
     placement: "bottom-start",
     middleware: [
-      offset3(8),
+      offset3(3),
       flip3({ padding: 8 }),
       shift3({ padding: 8 }),
       size3({
@@ -7988,6 +8130,12 @@ var ChatComposerView = ({
     event.preventDefault();
     onPasteImages(imageFiles);
   };
+  const handleOpenSkillPicker = () => {
+    onOpenSkillPicker();
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Container2, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Surface, { "data-testid": "chat-composer-surface", children: [
       enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -8010,7 +8158,7 @@ var ChatComposerView = ({
         }
       ),
       attachmentNotice === "limit_reached" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
-      selectedSkills.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SkillTagList, { "data-testid": "chat-composer-skill-tags", children: selectedSkills.map((skill) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(SkillTag, { children: [
+      selectedSkills.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SkillTagList2, { "data-testid": "chat-composer-skill-tags", children: selectedSkills.map((skill) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(SkillTag2, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: skill }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           SkillTagRemoveButton,
@@ -8050,17 +8198,27 @@ var ChatComposerView = ({
         )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Footer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LeadingActions, { "data-testid": "chat-composer-leading-actions", children: enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          AttachButton,
-          {
-            type: "button",
-            "data-testid": "chat-composer-attach-image",
-            "aria-label": "Attach image",
-            onClick: () => imageInputRef.current?.click(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PlusIcon, {})
-          }
-        ) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(LeadingActions, { "data-testid": "chat-composer-leading-actions", children: [
+          enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            AttachButton,
+            {
+              type: "button",
+              "data-testid": "chat-composer-attach-image",
+              "aria-label": "Attach image",
+              onClick: () => imageInputRef.current?.click(),
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PlusIcon, {})
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            SkillButton,
+            {
+              type: "button",
+              "data-testid": "chat-composer-skill-trigger",
+              "aria-label": "Open skill picker",
+              onClick: handleOpenSkillPicker,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SkillIcon, {})
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             ChatModeControl,
             {
@@ -8069,7 +8227,9 @@ var ChatComposerView = ({
               labels: modeLabels,
               onChange: onSelectedModeChange
             }
-          ),
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             ChatModelControl,
             {
@@ -8171,6 +8331,7 @@ var ChatComposer = () => {
       onSelectedModelChange: actions.setSelectedModel,
       onSelectedModeChange: actions.setSelectedMode,
       onReloadModels: actions.reloadModels,
+      onOpenSkillPicker: actions.openSkillPicker,
       onStop: actions.stop,
       onSend: send
     }
@@ -8209,31 +8370,55 @@ var AttachmentNotice = import_styled14.default.div`
   font-size: 12px;
   line-height: 1.4;
 `;
-var SkillTagList = import_styled14.default.div`
+var SkillTagList2 = import_styled14.default.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 12px 0;
+  gap: 9px;
+  padding: 11px 16px;
 `;
-var SkillTag = import_styled14.default.span`
+var SkillTag2 = import_styled14.default.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 = import_styled14.default.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 = import_styled14.default.div`
   grid-area: input;
@@ -8294,18 +8479,21 @@ var SkillMenu = import_styled14.default.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 = import_styled14.default.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;
@@ -8313,7 +8501,7 @@ var SkillMenuItem = import_styled14.default.button`
 
   &[data-active='true'],
   &:hover {
-    background: rgba(255, 255, 255, 0.12);
+    background: #41413f;
   }
 `;
 var SkillMenuState = import_styled14.default.div`
@@ -8343,9 +8531,8 @@ var ComposerExpandButton = import_styled14.default.button`
 `;
 var Footer = import_styled14.default.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;
 `;
@@ -8353,33 +8540,72 @@ var LeadingActions = import_styled14.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 8px;
+  gap: 4px;
   min-width: 0;
 `;
 var TrailingActions = import_styled14.default.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 = import_styled14.default.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 = import_styled14.default.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;
   }
 `;
 
@@ -8512,6 +8738,76 @@ var List2 = import_styled16.default.div`
 
 // src/components/ai-chat/index.tsx
 var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
+var NewTalkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  "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__ */ (0, import_jsx_runtime19.jsxs)(
+      "g",
+      {
+        transform: "translate(1.8909 2.0364)",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.36533333",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("g", { transform: "translate(9.8909 2.3273) rotate(-315) translate(-9.8909 -2.3273) translate(8.2909 0.7273)", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M0 0C0 0 1.06666667 1.06666667 3.2 3.2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M3.2 0C3.2 0 2.13333333 1.06666667 0 3.2" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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;
+  (0, import_react20.useEffect)(() => {
+    onConversationStartedChange?.(isConversationStarted);
+  }, [isConversationStarted, onConversationStartedChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Root, { "data-testid": "ai-chat", children: [
+    showConversationList ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatConversationList, {}) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Workspace, { children: [
+      showNewChatButton && !showConversationList && !shouldShowComposerOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(QuickActions, { renderNewChatTrigger }) : null,
+      shouldShowComposerOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatThread, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatComposer, {})
+    ] })
+  ] });
+};
 var QuickActions = ({ renderNewChatTrigger }) => {
   const { labels, stopRef, store } = useChatContext();
   const startNewChat = useChatStore((state) => state.startNewChat);
@@ -8565,9 +8861,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__ */ (0, import_jsx_runtime19.jsx)(NewTalkIcon, {})
     }
   ) });
 };
@@ -8579,6 +8877,8 @@ var AiChat = ({
   showConversationList = false,
   showNewChatButton = false,
   renderNewChatTrigger,
+  showComposerOnlyBeforeFirstMessage = false,
+  onConversationStartedChange,
   ...providerProps
 }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   import_compass_ui4.ConfigProvider,
@@ -8615,14 +8915,16 @@ var AiChat = ({
         }
       }
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Root, { "data-testid": "ai-chat", children: [
-      showConversationList ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatConversationList, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Workspace, { children: [
-        showNewChatButton && !showConversationList ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(QuickActions, { renderNewChatTrigger }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatThread, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatComposer, {})
-      ] })
-    ] }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      AiChatWorkspaceContent,
+      {
+        showConversationList,
+        showNewChatButton,
+        renderNewChatTrigger,
+        showComposerOnlyBeforeFirstMessage,
+        onConversationStartedChange
+      }
+    ) })
   }
 );
 var Root = import_styled17.default.div`
@@ -8646,12 +8948,26 @@ var QuickActionsRow = import_styled17.default.div`
   padding: 12px 12px 0;
 `;
 var QuickActionButton = import_styled17.default.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;