@gendive/chatllm 0.5.0 → 0.6.0

package/dist/react/index.mjs

@@ -59,6 +59,7 @@ var useChatUI = (options) => {
     ...DEFAULT_PERSONALIZATION,
     ...initialPersonalization
   });
+  const [activeAlternatives, setActiveAlternatives] = useState({});
   const abortControllerRef = useRef(null);
   const currentSession = sessions.find((s) => s.id === currentSessionId) || null;
   const messages = currentSession?.messages || [];
@@ -658,6 +659,15 @@ ${currentSession.contextSummary}` },
     onSendMessage,
     onError
   ]);
+  const setActiveAlternative = useCallback((assistantMessageId, index) => {
+    setActiveAlternatives((prev) => ({
+      ...prev,
+      [assistantMessageId]: index
+    }));
+  }, []);
+  const getActiveAlternative = useCallback((assistantMessageId) => {
+    return activeAlternatives[assistantMessageId] ?? 0;
+  }, [activeAlternatives]);
   return {
     // State
     sessions,
@@ -674,6 +684,7 @@ ${currentSession.contextSummary}` },
     copiedMessageId,
     editingMessageId,
     personalization,
+    activeAlternatives,
     // Actions
     setInput,
     sendMessage,
@@ -693,6 +704,8 @@ ${currentSession.contextSummary}` },
     saveEdit,
     regenerate,
     askOtherModel,
+    setActiveAlternative,
+    getActiveAlternative,
     updatePersonalization,
     models
   };
@@ -2158,16 +2171,20 @@ var MessageBubble = ({
   models,
   alternatives,
   activeAlternativeIndex = 0,
-  onAlternativeChange
+  onAlternativeChange,
+  nextAssistantMessage
 }) => {
   const [showActions, setShowActions] = useState5(false);
   const [showModelMenu, setShowModelMenu] = useState5(false);
   const isUser = message.role === "user";
   const isAssistant = message.role === "assistant";
-  const otherModels = models?.filter((m) => m.id !== message.model) || [];
-  const displayContent = alternatives && alternatives.length > 0 && activeAlternativeIndex > 0 ? alternatives[activeAlternativeIndex - 1]?.content || message.content : message.content;
-  const displayModel = alternatives && alternatives.length > 0 && activeAlternativeIndex > 0 ? alternatives[activeAlternativeIndex - 1]?.model : message.model;
-  const displaySources = alternatives && alternatives.length > 0 && activeAlternativeIndex > 0 ? alternatives[activeAlternativeIndex - 1]?.sources : message.sources;
+  const relevantAlternatives = isUser ? alternatives : message.alternatives;
+  const relevantActiveIndex = activeAlternativeIndex;
+  const currentAssistantModel = isUser ? nextAssistantMessage?.model : message.model;
+  const otherModels = models?.filter((m) => m.id !== currentAssistantModel) || [];
+  const displayContent = isAssistant && relevantAlternatives && relevantAlternatives.length > 0 && relevantActiveIndex > 0 ? relevantAlternatives[relevantActiveIndex - 1]?.content || message.content : message.content;
+  const displayModel = isAssistant && relevantAlternatives && relevantAlternatives.length > 0 && relevantActiveIndex > 0 ? relevantAlternatives[relevantActiveIndex - 1]?.model : message.model;
+  const displaySources = isAssistant && relevantAlternatives && relevantAlternatives.length > 0 && relevantActiveIndex > 0 ? relevantAlternatives[relevantActiveIndex - 1]?.sources : message.sources;
   const handleMouseUp = () => {
     if (!onQuote) return;
     const selection = window.getSelection();
@@ -2329,7 +2346,7 @@ var MessageBubble = ({
               ]
             }
           ),
-          alternatives && alternatives.length > 0 && /* @__PURE__ */ jsxs6(
+          isUser && relevantAlternatives && relevantAlternatives.length > 0 && /* @__PURE__ */ jsxs6(
             "div",
             {
               style: {
@@ -2344,30 +2361,30 @@ var MessageBubble = ({
                 /* @__PURE__ */ jsx7(
                   "button",
                   {
-                    onClick: () => onAlternativeChange?.(Math.max(0, activeAlternativeIndex - 1)),
-                    disabled: activeAlternativeIndex === 0,
+                    onClick: () => onAlternativeChange?.(Math.max(0, relevantActiveIndex - 1)),
+                    disabled: relevantActiveIndex === 0,
                     style: {
                       ...navButtonStyle,
-                      opacity: activeAlternativeIndex === 0 ? 0.5 : 1,
-                      cursor: activeAlternativeIndex === 0 ? "not-allowed" : "pointer"
+                      opacity: relevantActiveIndex === 0 ? 0.5 : 1,
+                      cursor: relevantActiveIndex === 0 ? "not-allowed" : "pointer"
                     },
                     children: /* @__PURE__ */ jsx7(IconSvg, { name: "arrow-left-line", size: 14 })
                   }
                 ),
                 /* @__PURE__ */ jsxs6("span", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
-                  activeAlternativeIndex + 1,
+                  relevantActiveIndex + 1,
                   " / ",
-                  alternatives.length + 1
+                  relevantAlternatives.length + 1
                 ] }),
                 /* @__PURE__ */ jsx7(
                   "button",
                   {
-                    onClick: () => onAlternativeChange?.(Math.min(alternatives.length, activeAlternativeIndex + 1)),
-                    disabled: activeAlternativeIndex === alternatives.length,
+                    onClick: () => onAlternativeChange?.(Math.min(relevantAlternatives.length, relevantActiveIndex + 1)),
+                    disabled: relevantActiveIndex === relevantAlternatives.length,
                     style: {
                       ...navButtonStyle,
-                      opacity: activeAlternativeIndex === alternatives.length ? 0.5 : 1,
-                      cursor: activeAlternativeIndex === alternatives.length ? "not-allowed" : "pointer"
+                      opacity: relevantActiveIndex === relevantAlternatives.length ? 0.5 : 1,
+                      cursor: relevantActiveIndex === relevantAlternatives.length ? "not-allowed" : "pointer"
                     },
                     children: /* @__PURE__ */ jsx7(IconSvg, { name: "arrow-right-line", size: 14 })
                   }
@@ -2394,7 +2411,7 @@ var MessageBubble = ({
                 ) }),
                 isUser && /* @__PURE__ */ jsx7("button", { onClick: onEdit, style: actionButtonStyle, title: "\uC218\uC815", children: /* @__PURE__ */ jsx7(IconSvg, { name: "edit-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) }),
                 isAssistant && onRegenerate && /* @__PURE__ */ jsx7("button", { onClick: onRegenerate, style: actionButtonStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ jsx7(IconSvg, { name: "refresh-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) }),
-                isAssistant && onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ jsxs6("div", { style: { position: "relative" }, children: [
+                isUser && onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ jsxs6("div", { style: { position: "relative" }, children: [
                   /* @__PURE__ */ jsxs6(
                     "button",
                     {
@@ -2544,6 +2561,8 @@ var MessageList = ({
   onRegenerate,
   onQuote,
   onAskOtherModel,
+  onSetActiveAlternative,
+  activeAlternatives = {},
   models,
   copiedId,
   editingId
@@ -2598,23 +2617,31 @@ var MessageList = ({
       },
       onMouseUp: handleMouseUp,
       children: [
-        messages.map((message, index) => /* @__PURE__ */ jsx8(
-          MessageBubble,
-          {
-            message,
-            isLoading: isLoading && index === messages.length - 1 && message.role === "assistant",
-            isCopied: copiedId === message.id,
-            isEditing: editingId === message.id,
-            onCopy: () => onCopy(message.content, message.id),
-            onEdit: () => onEdit(message),
-            onRegenerate: message.role === "assistant" ? () => onRegenerate(message.id) : void 0,
-            onQuote,
-            onAskOtherModel: message.role === "assistant" && onAskOtherModel ? (targetModel) => onAskOtherModel(message.id, targetModel) : void 0,
-            models,
-            alternatives: message.alternatives
-          },
-          message.id
-        )),
+        messages.map((message, index) => {
+          const nextAssistant = message.role === "user" && index + 1 < messages.length ? messages[index + 1] : null;
+          const assistantForAlts = nextAssistant?.role === "assistant" ? nextAssistant : null;
+          const activeAltIndex = assistantForAlts ? activeAlternatives[assistantForAlts.id] ?? 0 : 0;
+          return /* @__PURE__ */ jsx8(
+            MessageBubble,
+            {
+              message,
+              isLoading: isLoading && index === messages.length - 1 && message.role === "assistant",
+              isCopied: copiedId === message.id,
+              isEditing: editingId === message.id,
+              onCopy: () => onCopy(message.content, message.id),
+              onEdit: () => onEdit(message),
+              onRegenerate: message.role === "assistant" ? () => onRegenerate(message.id) : void 0,
+              onQuote,
+              nextAssistantMessage: assistantForAlts,
+              activeAlternativeIndex: message.role === "user" ? activeAltIndex : activeAlternatives[message.id] ?? 0,
+              onAskOtherModel: message.role === "user" && assistantForAlts && onAskOtherModel ? (targetModel) => onAskOtherModel(message.id, assistantForAlts.id, targetModel) : void 0,
+              onAlternativeChange: message.role === "user" && assistantForAlts && onSetActiveAlternative ? (idx) => onSetActiveAlternative(assistantForAlts.id, idx) : message.role === "assistant" && onSetActiveAlternative ? (idx) => onSetActiveAlternative(message.id, idx) : void 0,
+              models,
+              alternatives: message.role === "assistant" ? message.alternatives : assistantForAlts?.alternatives
+            },
+            message.id
+          );
+        }),
         selectionPosition && /* @__PURE__ */ jsxs7(
           "div",
           {