@gendive/chatllm 0.3.1 → 0.5.0

package/dist/react/index.mjs

@@ -359,6 +359,22 @@ ${contextSummary}` },
           );
           return;
         }
+        if (typeof result === "object" && "content" in result) {
+          setSessions(
+            (prev) => prev.map((s) => {
+              if (s.id === capturedSessionId) {
+                return {
+                  ...s,
+                  messages: s.messages.map(
+                    (m) => m.id === assistantMessageId ? { ...m, content: result.content, sources: result.sources } : m
+                  )
+                };
+              }
+              return s;
+            })
+          );
+          return;
+        }
         response = new Response(result);
       } else {
         response = await fetch(apiEndpoint, {
@@ -490,6 +506,158 @@ ${contextSummary}` },
     setInput(userMessage.content);
     await sendMessage(userMessage.content);
   }, [currentSession, currentSessionId, isLoading, sendMessage]);
+  const askOtherModel = useCallback(async (messageId, targetModel) => {
+    if (!currentSession || !currentSessionId || isLoading) return;
+    const assistantIndex = currentSession.messages.findIndex((m) => m.id === messageId);
+    if (assistantIndex === -1) return;
+    const assistantMessage = currentSession.messages[assistantIndex];
+    if (assistantMessage.role !== "assistant") return;
+    const userMessage = currentSession.messages[assistantIndex - 1];
+    if (!userMessage || userMessage.role !== "user") return;
+    setIsLoading(true);
+    abortControllerRef.current = new AbortController();
+    try {
+      const messagesToSend = currentSession.messages.slice(0, assistantIndex);
+      let chatMessages;
+      if (currentSession.contextSummary) {
+        const recentMessages = messagesToSend.slice(-keepRecentMessages);
+        chatMessages = [
+          { role: "system", content: `[\uC774\uC804 \uB300\uD654 \uC694\uC57D]
+${currentSession.contextSummary}` },
+          ...recentMessages.map((m) => ({ role: m.role, content: m.content }))
+        ];
+      } else {
+        chatMessages = messagesToSend.map((m) => ({ role: m.role, content: m.content }));
+      }
+      const baseSystemPrompt = buildSystemPrompt();
+      const messagesForApi = baseSystemPrompt ? [{ role: "system", content: baseSystemPrompt }, ...chatMessages] : chatMessages;
+      const modelConfig = models.find((m) => m.id === targetModel);
+      const provider = modelConfig?.provider || "ollama";
+      let responseContent = "";
+      let responseSources;
+      if (onSendMessage) {
+        const result = await onSendMessage({
+          messages: messagesForApi,
+          model: targetModel,
+          provider,
+          apiKey,
+          systemPrompt: baseSystemPrompt
+        });
+        if (typeof result === "string") {
+          responseContent = result;
+        } else if (typeof result === "object" && "content" in result) {
+          responseContent = result.content;
+          responseSources = result.sources;
+        } else {
+          const reader = result.getReader();
+          const decoder = new TextDecoder();
+          let buffer = "";
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split("\n");
+            buffer = lines.pop() || "";
+            for (const line of lines) {
+              if (line.startsWith("data: ")) {
+                const data = line.slice(6);
+                if (data === "[DONE]") continue;
+                try {
+                  const parsed = JSON.parse(data);
+                  if (parsed.content) responseContent += parsed.content;
+                } catch {
+                }
+              }
+            }
+          }
+        }
+      } else {
+        const response = await fetch(apiEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            messages: messagesForApi,
+            model: targetModel,
+            provider,
+            apiKey: provider === "devdive" ? apiKey : void 0
+          }),
+          signal: abortControllerRef.current.signal
+        });
+        if (!response.ok) throw new Error("API error");
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error("No reader");
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              const data = line.slice(6);
+              if (data === "[DONE]") continue;
+              try {
+                const parsed = JSON.parse(data);
+                if (parsed.content) responseContent += parsed.content;
+              } catch {
+              }
+            }
+          }
+        }
+      }
+      const alternative = {
+        id: generateId("alt"),
+        model: targetModel,
+        content: responseContent,
+        timestamp: Date.now(),
+        sources: responseSources
+      };
+      const capturedSessionId = currentSessionId;
+      setSessions(
+        (prev) => prev.map((s) => {
+          if (s.id === capturedSessionId) {
+            return {
+              ...s,
+              messages: s.messages.map((m) => {
+                if (m.id === messageId) {
+                  const existingAlts = m.alternatives || [];
+                  return {
+                    ...m,
+                    alternatives: [...existingAlts, alternative]
+                  };
+                }
+                return m;
+              }),
+              updatedAt: Date.now()
+            };
+          }
+          return s;
+        })
+      );
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        return;
+      }
+      const err = error instanceof Error ? error : new Error("Unknown error");
+      onError?.(err);
+    } finally {
+      setIsLoading(false);
+      abortControllerRef.current = null;
+    }
+  }, [
+    currentSession,
+    currentSessionId,
+    isLoading,
+    keepRecentMessages,
+    buildSystemPrompt,
+    models,
+    apiEndpoint,
+    apiKey,
+    onSendMessage,
+    onError
+  ]);
   return {
     // State
     sessions,
@@ -524,7 +692,9 @@ ${contextSummary}` },
     cancelEdit,
     saveEdit,
     regenerate,
-    updatePersonalization
+    askOtherModel,
+    updatePersonalization,
+    models
   };
 };
 
@@ -1984,15 +2154,20 @@ var MessageBubble = ({
   onEdit,
   onRegenerate,
   onQuote,
+  onAskOtherModel,
+  models,
   alternatives,
   activeAlternativeIndex = 0,
   onAlternativeChange
 }) => {
   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 handleMouseUp = () => {
     if (!onQuote) return;
     const selection = window.getSelection();
@@ -2117,6 +2292,43 @@ var MessageBubble = ({
               ]
             }
           ),
+          displaySources && displaySources.length > 0 && /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "8px",
+                marginTop: "12px",
+                paddingTop: "12px",
+                borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: 500,
+                      color: "var(--chatllm-text-muted, #9ca3af)",
+                      marginRight: "4px"
+                    },
+                    children: "\uCD9C\uCC98:"
+                  }
+                ),
+                displaySources.map((source, index) => /* @__PURE__ */ jsx7(
+                  LinkChip,
+                  {
+                    text: source.title,
+                    url: source.url,
+                    index: index + 1,
+                    showFavicon: true
+                  },
+                  source.id
+                ))
+              ]
+            }
+          ),
           alternatives && alternatives.length > 0 && /* @__PURE__ */ jsxs6(
             "div",
             {
@@ -2181,7 +2393,110 @@ 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 && 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: [
+                  /* @__PURE__ */ jsxs6(
+                    "button",
+                    {
+                      onClick: () => setShowModelMenu(!showModelMenu),
+                      style: actionButtonStyle,
+                      title: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38",
+                      children: [
+                        /* @__PURE__ */ jsx7(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }),
+                        /* @__PURE__ */ jsx7(
+                          IconSvg,
+                          {
+                            name: "arrow-down-s-line",
+                            size: 12,
+                            color: "var(--chatllm-text-muted, #9ca3af)",
+                            style: { marginLeft: "2px" }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  showModelMenu && /* @__PURE__ */ jsxs6(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: "100%",
+                        left: 0,
+                        marginBottom: "4px",
+                        backgroundColor: "var(--chatllm-bg, #ffffff)",
+                        border: "1px solid var(--chatllm-border, #e5e7eb)",
+                        borderRadius: "8px",
+                        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+                        minWidth: "160px",
+                        zIndex: 100,
+                        overflow: "hidden"
+                      },
+                      onMouseLeave: () => setShowModelMenu(false),
+                      children: [
+                        /* @__PURE__ */ jsx7(
+                          "div",
+                          {
+                            style: {
+                              padding: "8px 12px",
+                              fontSize: "11px",
+                              fontWeight: 600,
+                              color: "var(--chatllm-text-muted, #9ca3af)",
+                              textTransform: "uppercase",
+                              borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)"
+                            },
+                            children: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38"
+                          }
+                        ),
+                        otherModels.map((model) => /* @__PURE__ */ jsxs6(
+                          "button",
+                          {
+                            onClick: () => {
+                              onAskOtherModel(model.id);
+                              setShowModelMenu(false);
+                            },
+                            style: {
+                              width: "100%",
+                              padding: "10px 12px",
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "8px",
+                              backgroundColor: "transparent",
+                              border: "none",
+                              cursor: "pointer",
+                              fontSize: "13px",
+                              color: "var(--chatllm-text, #1f2937)",
+                              textAlign: "left"
+                            },
+                            onMouseEnter: (e) => {
+                              e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f3f4f6)";
+                            },
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.backgroundColor = "transparent";
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx7(IconSvg, { name: "robot-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
+                              /* @__PURE__ */ jsx7("span", { style: { flex: 1 }, children: model.name }),
+                              /* @__PURE__ */ jsx7(
+                                "span",
+                                {
+                                  style: {
+                                    fontSize: "10px",
+                                    padding: "2px 6px",
+                                    backgroundColor: "var(--chatllm-bg-tertiary, #f3f4f6)",
+                                    borderRadius: "4px",
+                                    color: "var(--chatllm-text-muted, #9ca3af)"
+                                  },
+                                  children: model.provider
+                                }
+                              )
+                            ]
+                          },
+                          model.id
+                        ))
+                      ]
+                    }
+                  )
+                ] })
               ]
             }
           )
@@ -2228,6 +2543,8 @@ var MessageList = ({
   onEdit,
   onRegenerate,
   onQuote,
+  onAskOtherModel,
+  models,
   copiedId,
   editingId
 }) => {
@@ -2292,6 +2609,8 @@ var MessageList = ({
             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
@@ -3595,7 +3914,9 @@ var ChatUI = ({
     cancelEdit,
     saveEdit,
     regenerate,
-    updatePersonalization
+    askOtherModel,
+    updatePersonalization,
+    models: hookModels
   } = useChatUI(hookOptions);
   const greeting = currentPersonalization.userProfile.nickname ? `\uC548\uB155\uD558\uC138\uC694, ${currentPersonalization.userProfile.nickname}\uB2D8` : "\uC548\uB155\uD558\uC138\uC694";
   const handleTemplateClick = (template) => {
@@ -3713,6 +4034,8 @@ var ChatUI = ({
                   onEdit: startEdit,
                   onRegenerate: regenerate,
                   onQuote: setQuotedText,
+                  onAskOtherModel: askOtherModel,
+                  models: hookModels,
                   copiedId: copiedMessageId,
                   editingId: editingMessageId
                 }