@xpert-ai/chatkit-ui 0.3.20 → 0.3.21

package/dist/index.cjs

@@ -1515,7 +1515,8 @@ var en_US_default = {
     regenerate: "Regenerate response"
   },
   startScreen: {
-    greeting: "What can I help with today?"
+    greeting: "What can I help with today?",
+    editPrompt: "Edit prompt"
   },
   composer: {
     openMenu: "Open menu",
@@ -1904,7 +1905,8 @@ var zh_CN_default = {
     regenerate: "\u91CD\u65B0\u751F\u6210\u56DE\u590D"
   },
   startScreen: {
-    greeting: "\u4ECA\u5929\u6211\u80FD\u5E2E\u4F60\u4EC0\u4E48\uFF1F"
+    greeting: "\u4ECA\u5929\u6211\u80FD\u5E2E\u4F60\u4EC0\u4E48\uFF1F",
+    editPrompt: "\u7F16\u8F91\u5E38\u7528\u95EE\u9898"
   },
   composer: {
     openMenu: "\u6253\u5F00\u83DC\u5355",
@@ -12144,30 +12146,75 @@ function getIconComponent2(icon) {
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
-function StartScreen({ startScreen, onPromptClick, className }) {
+function StartScreen({
+  startScreen,
+  onPromptClick,
+  onPromptEdit,
+  promptSendDisabled = false,
+  promptEditDisabled = false,
+  className
+}) {
   const { t } = useChatkitTranslation();
   const greeting = startScreen?.greeting ?? t("startScreen.greeting");
   const prompts = startScreen?.prompts ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-      "button",
-      {
-        type: "button",
-        onClick: () => onPromptClick?.(item.prompt),
-        className: cn(
-          "flex items-center gap-3 rounded-xl border bg-card p-4 text-left",
-          "hover:bg-muted/50 hover:border-primary/20 transition-colors",
-          "focus:outline-none focus:ring-2 focus:ring-primary/20"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
-        ]
-      },
-      `prompt-${index}`
-    )) }) })
-  ] });
+  const editPromptLabel = t("startScreen.editPrompt");
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center py-12 px-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+        prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex items-stretch rounded-xl border bg-card text-left",
+              "transition-colors hover:border-primary/20 hover:bg-muted/50",
+              "focus-within:ring-2 focus-within:ring-primary/20"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  disabled: promptSendDisabled,
+                  onClick: () => onPromptClick?.(item.prompt),
+                  className: cn(
+                    "flex min-w-0 flex-1 items-center gap-3 p-4 text-left",
+                    "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                "button",
+                {
+                  type: "button",
+                  disabled: promptEditDisabled,
+                  onClick: () => onPromptEdit?.(item.prompt),
+                  "aria-label": editPromptLabel,
+                  title: editPromptLabel,
+                  className: cn(
+                    "flex w-12 shrink-0 items-center justify-center border-l text-muted-foreground",
+                    "rounded-r-xl transition-colors hover:bg-muted hover:text-foreground",
+                    "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react25.Pencil, { size: 16 })
+                }
+              )
+            ]
+          },
+          `prompt-${index}`
+        )) }) })
+      ]
+    }
+  );
 }
 
 // src/hooks/useThreads.ts
@@ -14881,7 +14928,9 @@ function Chat({
   }, [missingConfigKind, t]);
   const showMissingConfig = !isClientSecretInitializing && missingConfig;
   const hasUploadingFiles = attachmentState.hasUploadingFiles;
-  const isSendDisabled = !trimmedDraft && !hasReferences || hasPendingInteractiveRequest || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
+  const isSubmissionBlocked = hasPendingInteractiveRequest || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
+  const isSendDisabled = !trimmedDraft && !hasReferences || isSubmissionBlocked;
+  const isPromptEditDisabled = hasPendingInteractiveRequest || missingConfig || isHistoryLoading;
   const resizeComposerInput = React48.useCallback(() => {
     const input = composerInputRef.current;
     if (!input) {
@@ -15183,7 +15232,7 @@ function Chat({
   );
   const submitDraft = React48.useCallback(
     (submitOptions = {}) => {
-      if (isSendDisabled) return;
+      if (isSubmissionBlocked) return;
       const contentToSubmit = (submitOptions.inputText ?? trimmedDraft).trim();
       const filesToSend = uploadedFiles.length > 0 ? [...uploadedFiles] : void 0;
       const referencesToSend = references.length > 0 ? [...references] : void 0;
@@ -15286,7 +15335,7 @@ function Chat({
     },
     [
       effectiveSessionRuntimeCapabilities,
-      isSendDisabled,
+      isSubmissionBlocked,
       options?.request,
       persistSessionRuntimeCapabilities,
       references,
@@ -15859,50 +15908,21 @@ function Chat({
   const handleToolSelect = (tool) => {
     setSelectedTool((prev) => prev?.id === tool.id ? null : tool);
   };
-  const handlePromptClick = (prompt) => {
-    if (missingConfig || isHistoryLoading) return;
-    const newMessage = {
-      id: createMessageId(),
-      type: "human",
-      content: prompt
-    };
-    const nextFollowUpMode = stream.isLoading ? "queue" : void 0;
-    const inputPayload = {
-      input: prompt,
-      ...planModeEnabled ? { planMode: true } : {},
-      ...effectiveSessionRuntimeCapabilities ? { runtimeCapabilities: effectiveSessionRuntimeCapabilities } : {}
-    };
-    const requestOptions = buildInjectedRequestOptions({
-      defaults: options?.request,
-      humanInput: inputPayload
-    });
-    const sessionRuntimeCapabilitiesForPersistence = effectiveSessionRuntimeCapabilities;
-    const shouldPersistSessionRuntimeCapabilities = !!sessionRuntimeCapabilitiesForPersistence && !stream.threadId && !nextFollowUpMode;
-    stream.submit(
-      {
-        input: inputPayload,
-        ...requestOptions.state ? { state: requestOptions.state } : {}
-      },
-      {
-        ...nextFollowUpMode ? { followUpMode: nextFollowUpMode } : {},
-        ...requestOptions.context ? { context: requestOptions.context } : {},
-        ...requestOptions.config ? { config: requestOptions.config } : {},
-        ...shouldPersistSessionRuntimeCapabilities ? {
-          onThreadResolved: (threadId) => persistSessionRuntimeCapabilities(
-            threadId,
-            sessionRuntimeCapabilitiesForPersistence
-          )
-        } : {},
-        ...!nextFollowUpMode ? {
-          optimisticValues: (prev) => {
-            const prevMessages = prev?.messages ?? [];
-            return { ...prev, messages: [...prevMessages, newMessage] };
-          }
-        } : {}
-      }
-    );
-    scrollToBottom(true, true);
-  };
+  const handlePromptClick = React48.useCallback(
+    (prompt) => {
+      submitDraft({ inputText: prompt, displayText: prompt });
+    },
+    [submitDraft]
+  );
+  const handlePromptEdit = React48.useCallback(
+    (prompt) => {
+      if (isPromptEditDisabled) return;
+      setComposerText(prompt, prompt.length);
+      setRuntimeCapabilityPalette(null);
+      focusComposerAt(prompt.length);
+    },
+    [focusComposerAt, isPromptEditDisabled, setComposerText]
+  );
   const loadConversationMessages = React48.useCallback(
     async (recordId) => {
       if (missingConfig) {
@@ -16191,7 +16211,10 @@ function Chat({
             StartScreen,
             {
               startScreen,
-              onPromptClick: handlePromptClick
+              onPromptClick: handlePromptClick,
+              onPromptEdit: handlePromptEdit,
+              promptSendDisabled: isSubmissionBlocked,
+              promptEditDisabled: isPromptEditDisabled
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "space-y-4", children: [
             canLoadMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [

package/dist/index.js

@@ -1515,7 +1515,8 @@ var en_US_default = {
     regenerate: "Regenerate response"
   },
   startScreen: {
-    greeting: "What can I help with today?"
+    greeting: "What can I help with today?",
+    editPrompt: "Edit prompt"
   },
   composer: {
     openMenu: "Open menu",
@@ -1904,7 +1905,8 @@ var zh_CN_default = {
     regenerate: "\u91CD\u65B0\u751F\u6210\u56DE\u590D"
   },
   startScreen: {
-    greeting: "\u4ECA\u5929\u6211\u80FD\u5E2E\u4F60\u4EC0\u4E48\uFF1F"
+    greeting: "\u4ECA\u5929\u6211\u80FD\u5E2E\u4F60\u4EC0\u4E48\uFF1F",
+    editPrompt: "\u7F16\u8F91\u5E38\u7528\u95EE\u9898"
   },
   composer: {
     openMenu: "\u6253\u5F00\u83DC\u5355",
@@ -12252,30 +12254,75 @@ function getIconComponent2(icon) {
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
-function StartScreen({ startScreen, onPromptClick, className }) {
+function StartScreen({
+  startScreen,
+  onPromptClick,
+  onPromptEdit,
+  promptSendDisabled = false,
+  promptEditDisabled = false,
+  className
+}) {
   const { t } = useChatkitTranslation();
   const greeting = startScreen?.greeting ?? t("startScreen.greeting");
   const prompts = startScreen?.prompts ?? [];
-  return /* @__PURE__ */ jsxs30("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
-    /* @__PURE__ */ jsx43("div", { className: "mb-8 text-center", children: /* @__PURE__ */ jsx43("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-    prompts.length > 0 && /* @__PURE__ */ jsx43("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx43("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ jsxs30(
-      "button",
-      {
-        type: "button",
-        onClick: () => onPromptClick?.(item.prompt),
-        className: cn(
-          "flex items-center gap-3 rounded-xl border bg-card p-4 text-left",
-          "hover:bg-muted/50 hover:border-primary/20 transition-colors",
-          "focus:outline-none focus:ring-2 focus:ring-primary/20"
-        ),
-        children: [
-          /* @__PURE__ */ jsx43("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
-          /* @__PURE__ */ jsx43("span", { className: "text-sm font-medium text-foreground", children: item.label })
-        ]
-      },
-      `prompt-${index}`
-    )) }) })
-  ] });
+  const editPromptLabel = t("startScreen.editPrompt");
+  return /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center py-12 px-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx43("div", { className: "mb-8 text-center", children: /* @__PURE__ */ jsx43("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+        prompts.length > 0 && /* @__PURE__ */ jsx43("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx43("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ jsxs30(
+          "div",
+          {
+            className: cn(
+              "flex items-stretch rounded-xl border bg-card text-left",
+              "transition-colors hover:border-primary/20 hover:bg-muted/50",
+              "focus-within:ring-2 focus-within:ring-primary/20"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs30(
+                "button",
+                {
+                  type: "button",
+                  disabled: promptSendDisabled,
+                  onClick: () => onPromptClick?.(item.prompt),
+                  className: cn(
+                    "flex min-w-0 flex-1 items-center gap-3 p-4 text-left",
+                    "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx43("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
+                    /* @__PURE__ */ jsx43("span", { className: "text-sm font-medium text-foreground", children: item.label })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx43(
+                "button",
+                {
+                  type: "button",
+                  disabled: promptEditDisabled,
+                  onClick: () => onPromptEdit?.(item.prompt),
+                  "aria-label": editPromptLabel,
+                  title: editPromptLabel,
+                  className: cn(
+                    "flex w-12 shrink-0 items-center justify-center border-l text-muted-foreground",
+                    "rounded-r-xl transition-colors hover:bg-muted hover:text-foreground",
+                    "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                  ),
+                  children: /* @__PURE__ */ jsx43(Pencil3, { size: 16 })
+                }
+              )
+            ]
+          },
+          `prompt-${index}`
+        )) }) })
+      ]
+    }
+  );
 }
 
 // src/hooks/useThreads.ts
@@ -14992,7 +15039,9 @@ function Chat({
   }, [missingConfigKind, t]);
   const showMissingConfig = !isClientSecretInitializing && missingConfig;
   const hasUploadingFiles = attachmentState.hasUploadingFiles;
-  const isSendDisabled = !trimmedDraft && !hasReferences || hasPendingInteractiveRequest || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
+  const isSubmissionBlocked = hasPendingInteractiveRequest || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
+  const isSendDisabled = !trimmedDraft && !hasReferences || isSubmissionBlocked;
+  const isPromptEditDisabled = hasPendingInteractiveRequest || missingConfig || isHistoryLoading;
   const resizeComposerInput = React48.useCallback(() => {
     const input = composerInputRef.current;
     if (!input) {
@@ -15294,7 +15343,7 @@ function Chat({
   );
   const submitDraft = React48.useCallback(
     (submitOptions = {}) => {
-      if (isSendDisabled) return;
+      if (isSubmissionBlocked) return;
       const contentToSubmit = (submitOptions.inputText ?? trimmedDraft).trim();
       const filesToSend = uploadedFiles.length > 0 ? [...uploadedFiles] : void 0;
       const referencesToSend = references.length > 0 ? [...references] : void 0;
@@ -15397,7 +15446,7 @@ function Chat({
     },
     [
       effectiveSessionRuntimeCapabilities,
-      isSendDisabled,
+      isSubmissionBlocked,
       options?.request,
       persistSessionRuntimeCapabilities,
       references,
@@ -15970,50 +16019,21 @@ function Chat({
   const handleToolSelect = (tool) => {
     setSelectedTool((prev) => prev?.id === tool.id ? null : tool);
   };
-  const handlePromptClick = (prompt) => {
-    if (missingConfig || isHistoryLoading) return;
-    const newMessage = {
-      id: createMessageId(),
-      type: "human",
-      content: prompt
-    };
-    const nextFollowUpMode = stream.isLoading ? "queue" : void 0;
-    const inputPayload = {
-      input: prompt,
-      ...planModeEnabled ? { planMode: true } : {},
-      ...effectiveSessionRuntimeCapabilities ? { runtimeCapabilities: effectiveSessionRuntimeCapabilities } : {}
-    };
-    const requestOptions = buildInjectedRequestOptions({
-      defaults: options?.request,
-      humanInput: inputPayload
-    });
-    const sessionRuntimeCapabilitiesForPersistence = effectiveSessionRuntimeCapabilities;
-    const shouldPersistSessionRuntimeCapabilities = !!sessionRuntimeCapabilitiesForPersistence && !stream.threadId && !nextFollowUpMode;
-    stream.submit(
-      {
-        input: inputPayload,
-        ...requestOptions.state ? { state: requestOptions.state } : {}
-      },
-      {
-        ...nextFollowUpMode ? { followUpMode: nextFollowUpMode } : {},
-        ...requestOptions.context ? { context: requestOptions.context } : {},
-        ...requestOptions.config ? { config: requestOptions.config } : {},
-        ...shouldPersistSessionRuntimeCapabilities ? {
-          onThreadResolved: (threadId) => persistSessionRuntimeCapabilities(
-            threadId,
-            sessionRuntimeCapabilitiesForPersistence
-          )
-        } : {},
-        ...!nextFollowUpMode ? {
-          optimisticValues: (prev) => {
-            const prevMessages = prev?.messages ?? [];
-            return { ...prev, messages: [...prevMessages, newMessage] };
-          }
-        } : {}
-      }
-    );
-    scrollToBottom(true, true);
-  };
+  const handlePromptClick = React48.useCallback(
+    (prompt) => {
+      submitDraft({ inputText: prompt, displayText: prompt });
+    },
+    [submitDraft]
+  );
+  const handlePromptEdit = React48.useCallback(
+    (prompt) => {
+      if (isPromptEditDisabled) return;
+      setComposerText(prompt, prompt.length);
+      setRuntimeCapabilityPalette(null);
+      focusComposerAt(prompt.length);
+    },
+    [focusComposerAt, isPromptEditDisabled, setComposerText]
+  );
   const loadConversationMessages = React48.useCallback(
     async (recordId) => {
       if (missingConfig) {
@@ -16302,7 +16322,10 @@ function Chat({
             StartScreen,
             {
               startScreen,
-              onPromptClick: handlePromptClick
+              onPromptClick: handlePromptClick,
+              onPromptEdit: handlePromptEdit,
+              promptSendDisabled: isSubmissionBlocked,
+              promptEditDisabled: isPromptEditDisabled
             }
           ) : /* @__PURE__ */ jsxs36("div", { className: "space-y-4", children: [
             canLoadMoreMessages && /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3 py-1", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpert-ai/chatkit-ui",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "ChatKit UI.",
   "type": "module",
   "sideEffects": false,

package/dist/app/assets/channel-D2P4ANqW.js

@@ -1 +0,0 @@
-import{aq as o,ar as n}from"./index-DKNbfCqG.js";const t=(r,a)=>o.lang.round(n.parse(r)[a]);export{t as c};

package/dist/app/assets/classDiagram-6PBFFD2Q-BMjJP3qv.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-DiI3vXpV.js";import{_ as i}from"./index-DKNbfCqG.js";import"./chunk-FMBD7UC4-DYgOt2vm.js";import"./chunk-YZCP3GAM-pPNMK4mQ.js";import"./chunk-55IACEB6-BbmFk-DA.js";import"./chunk-EDXVE4YY-MjXpiNnM.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/classDiagram-v2-HSJHXN6E-BMjJP3qv.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-DiI3vXpV.js";import{_ as i}from"./index-DKNbfCqG.js";import"./chunk-FMBD7UC4-DYgOt2vm.js";import"./chunk-YZCP3GAM-pPNMK4mQ.js";import"./chunk-55IACEB6-BbmFk-DA.js";import"./chunk-EDXVE4YY-MjXpiNnM.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/clone-DoQzxKYE.js

@@ -1 +0,0 @@
-import{b as r}from"./graph-RZk9H4ri.js";var e=4;function a(o){return r(o,e)}export{a as c};