@xinghunm/ai-chat 1.3.0 → 1.3.1

package/dist/index.d.mts

@@ -441,6 +441,9 @@ interface AiChatLabels {
     questionnaireMultiSelectHint?: string;
     questionnaireOtherOptionLabel?: string;
     questionnaireOtherPlaceholder?: string;
+    modelLoading?: string;
+    modelLoadFailed?: string;
+    modelUnavailable?: string;
     skillLoading?: string;
     skillEmpty?: string;
     removeSkillAriaLabel?: string;
@@ -653,6 +656,9 @@ interface ChatComposerViewProps {
     skillLoadingLabel: string;
     skillEmptyLabel: string;
     removeSkillAriaLabel: string;
+    modelLoadingLabel: string;
+    modelLoadFailedLabel: string;
+    modelUnavailableLabel: string;
     onValueChange: (value: string) => void;
     onPickImages: (files: FileList | File[]) => void;
     onPasteImages: (files: File[]) => void;

package/dist/index.d.ts

@@ -441,6 +441,9 @@ interface AiChatLabels {
     questionnaireMultiSelectHint?: string;
     questionnaireOtherOptionLabel?: string;
     questionnaireOtherPlaceholder?: string;
+    modelLoading?: string;
+    modelLoadFailed?: string;
+    modelUnavailable?: string;
     skillLoading?: string;
     skillEmpty?: string;
     removeSkillAriaLabel?: string;
@@ -653,6 +656,9 @@ interface ChatComposerViewProps {
     skillLoadingLabel: string;
     skillEmptyLabel: string;
     removeSkillAriaLabel: string;
+    modelLoadingLabel: string;
+    modelLoadFailedLabel: string;
+    modelUnavailableLabel: string;
     onValueChange: (value: string) => void;
     onPickImages: (files: FileList | File[]) => void;
     onPasteImages: (files: File[]) => void;

package/dist/index.js

@@ -95,6 +95,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"
@@ -7513,6 +7516,9 @@ var ChatModelControl = ({
   isModelsLoading,
   isModelsError,
   hasModels,
+  loadingLabel,
+  loadFailedLabel,
+  unavailableLabel,
   onSelectedModelChange,
   onReloadModels
 }) => {
@@ -7525,7 +7531,7 @@ var ChatModelControl = ({
         "aria-label": "Reload",
         onClick: onReloadModels,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Failed to load models" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: loadFailedLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             ReloadIcon,
             {
@@ -7547,7 +7553,7 @@ var ChatModelControl = ({
     );
   }
   if (isModelsLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "Loading models..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { "data-testid": "chat-model-loading", children: loadingLabel });
   }
   if (hasModels && selectedModel) {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -7565,9 +7571,14 @@ var ChatModelControl = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "No model available" });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { "data-testid": "chat-model-unavailable", children: unavailableLabel });
 };
 var ModelBadge = import_styled11.default.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;
@@ -7575,6 +7586,9 @@ var ModelBadge = import_styled11.default.span`
   font-size: 12px;
   color: var(--text-secondary);
   line-height: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
 `;
 var ModelReloadButton = import_styled11.default.button`
   display: inline-flex;
@@ -7979,6 +7993,9 @@ var ChatComposerView = ({
   skillLoadingLabel,
   skillEmptyLabel,
   removeSkillAriaLabel,
+  modelLoadingLabel,
+  modelLoadFailedLabel,
+  modelUnavailableLabel,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -8020,9 +8037,10 @@ 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(3),
       flip3({ padding: 8 }),
@@ -8137,7 +8155,7 @@ var ChatComposerView = ({
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Container2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Surface, { "data-testid": "chat-composer-surface", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Surface, { ref: setSkillMenuReference, "data-testid": "chat-composer-surface", children: [
       enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "input",
         {
@@ -8171,7 +8189,7 @@ var ChatComposerView = ({
           }
         )
       ] }, skill)) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(InputArea, { ref: setSkillMenuReference, "data-testid": "chat-composer-input-area", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(InputArea, { "data-testid": "chat-composer-input-area", children: [
         isComposerExpanded || isComposerExpandable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           ComposerExpandButton,
           {
@@ -8238,6 +8256,9 @@ var ChatComposerView = ({
               isModelsLoading,
               isModelsError,
               hasModels,
+              loadingLabel: modelLoadingLabel,
+              loadFailedLabel: modelLoadFailedLabel,
+              unavailableLabel: modelUnavailableLabel,
               onSelectedModelChange,
               onReloadModels
             }
@@ -8261,6 +8282,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__ */ (0, import_jsx_runtime16.jsx)(SkillMenuState, { "data-testid": "chat-composer-skill-loading", children: skillLoadingLabel }) : filteredSkills.length ? filteredSkills.map((skill, index3) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           SkillMenuItem,
@@ -8322,6 +8345,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,

package/dist/index.mjs

@@ -48,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"
@@ -7470,6 +7473,9 @@ var ChatModelControl = ({
   isModelsLoading,
   isModelsError,
   hasModels,
+  loadingLabel,
+  loadFailedLabel,
+  unavailableLabel,
   onSelectedModelChange,
   onReloadModels
 }) => {
@@ -7482,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,
             {
@@ -7504,7 +7510,7 @@ 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) {
     return /* @__PURE__ */ jsx13(
@@ -7522,9 +7528,14 @@ var ChatModelControl = ({
       }
     );
   }
-  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;
@@ -7532,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;
@@ -7936,6 +7950,9 @@ var ChatComposerView = ({
   skillLoadingLabel,
   skillEmptyLabel,
   removeSkillAriaLabel,
+  modelLoadingLabel,
+  modelLoadFailedLabel,
+  modelUnavailableLabel,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -7977,9 +7994,10 @@ 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(3),
       flip3({ padding: 8 }),
@@ -8094,7 +8112,7 @@ var ChatComposerView = ({
     });
   };
   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",
         {
@@ -8128,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,
           {
@@ -8195,6 +8213,9 @@ var ChatComposerView = ({
               isModelsLoading,
               isModelsError,
               hasModels,
+              loadingLabel: modelLoadingLabel,
+              loadFailedLabel: modelLoadFailedLabel,
+              unavailableLabel: modelUnavailableLabel,
               onSelectedModelChange,
               onReloadModels
             }
@@ -8218,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,
@@ -8279,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xinghunm/ai-chat",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "AI chat React component library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",