@gendive/chatllm 0.3.1 → 0.5.0

package/dist/react/index.d.mts

@@ -57,6 +57,14 @@ interface AlternativeResponse {
     model: string;
     content: string;
     timestamp: number;
+    sources?: SourceItem[];
+}
+interface SourceItem {
+    id: string;
+    title: string;
+    url: string;
+    snippet?: string;
+    favicon?: string;
 }
 interface ChatMessage {
     id: string;
@@ -65,6 +73,7 @@ interface ChatMessage {
     model?: string;
     timestamp: number;
     alternatives?: AlternativeResponse[];
+    sources?: SourceItem[];
 }
 interface ChatSession {
     id: string;
@@ -139,7 +148,7 @@ interface ChatUIProps {
     /** CSS 클래스 */
     className?: string;
     /** 메시지 전송 핸들러 (커스텀 API 사용 시) */
-    onSendMessage?: (params: SendMessageParams) => Promise<ReadableStream<Uint8Array> | string>;
+    onSendMessage?: (params: SendMessageParams) => Promise<SendMessageResponse>;
     /** 세션 변경 핸들러 */
     onSessionChange?: (session: ChatSession | null) => void;
     /** 에러 핸들러 */
@@ -155,6 +164,11 @@ interface SendMessageParams {
     apiKey?: string;
     systemPrompt?: string;
 }
+/** onSendMessage 반환 타입 */
+type SendMessageResponse = ReadableStream<Uint8Array> | string | {
+    content: string;
+    sources?: SourceItem[];
+};
 interface ChatUIComponents {
     /** 사이드바 컴포넌트 */
     Sidebar?: React.ComponentType<SidebarProps>;
@@ -191,6 +205,8 @@ interface MessageListProps {
     onEdit: (message: ChatMessage) => void;
     onRegenerate: (id: string) => void;
     onQuote: (text: string) => void;
+    onAskOtherModel?: (messageId: string, targetModel: string) => void;
+    models?: ModelConfig[];
     copiedId: string | null;
     editingId: string | null;
 }
@@ -203,6 +219,8 @@ interface MessageBubbleProps {
     onEdit: () => void;
     onRegenerate?: () => void;
     onQuote?: (text: string) => void;
+    onAskOtherModel?: (targetModel: string) => void;
+    models?: ModelConfig[];
     alternatives?: AlternativeResponse[];
     activeAlternativeIndex?: number;
     onAlternativeChange?: (index: number) => void;
@@ -281,7 +299,9 @@ interface UseChatUIReturn {
     cancelEdit: () => void;
     saveEdit: (content: string) => Promise<void>;
     regenerate: (messageId: string) => Promise<void>;
+    askOtherModel: (messageId: string, targetModel: string) => Promise<void>;
     updatePersonalization: (config: Partial<PersonalizationConfig>) => void;
+    models: ModelConfig[];
 }
 
 /**
@@ -316,7 +336,7 @@ interface UseChatUIOptions {
     /** 압축 후 유지할 메시지 수 */
     keepRecentMessages?: number;
     /** 커스텀 메시지 전송 핸들러 */
-    onSendMessage?: (params: SendMessageParams) => Promise<ReadableStream<Uint8Array> | string>;
+    onSendMessage?: (params: SendMessageParams) => Promise<SendMessageResponse>;
     /** 세션 변경 핸들러 */
     onSessionChange?: (session: ChatSession | null) => void;
     /** 에러 핸들러 */
@@ -487,4 +507,4 @@ interface SettingsModalProps {
 }
 declare const SettingsModal: React$1.FC<SettingsModalProps>;
 
-export { type ActionItem, type ActionMenuProps, type AlternativeResponse, ChatHeader, ChatInput, type ChatMessage, type ChatSession, ChatSidebar, ChatUI, type ChatUIComponents, type ChatUIProps, EmptyState, type EmptyStateProps, type HeaderProps, Icon, type IconName, type IconProps, IconSvg, type InputProps, LinkChip, type LinkChipProps, MarkdownRenderer, type MarkdownRendererProps, type MemoryItem, MemoryPanel, type MemoryPanelProps, MessageBubble, type MessageBubbleProps, MessageList, type MessageListProps, type ModelConfig, type ModelSelectorProps, type PersonalizationConfig, type PromptTemplate, type ProviderType, type ResponseStyle, type SendMessageParams, SettingsModal, type SettingsModalProps, type SettingsTab, type SidebarProps, type ThemeConfig, type ThemeMode, type UseChatUIOptions, type UseChatUIReturn, type UserProfile, useChatUI };
+export { type ActionItem, type ActionMenuProps, type AlternativeResponse, ChatHeader, ChatInput, type ChatMessage, type ChatSession, ChatSidebar, ChatUI, type ChatUIComponents, type ChatUIProps, EmptyState, type EmptyStateProps, type HeaderProps, Icon, type IconName, type IconProps, IconSvg, type InputProps, LinkChip, type LinkChipProps, MarkdownRenderer, type MarkdownRendererProps, type MemoryItem, MemoryPanel, type MemoryPanelProps, MessageBubble, type MessageBubbleProps, MessageList, type MessageListProps, type ModelConfig, type ModelSelectorProps, type PersonalizationConfig, type PromptTemplate, type ProviderType, type ResponseStyle, type SendMessageParams, type SendMessageResponse, SettingsModal, type SettingsModalProps, type SettingsTab, type SidebarProps, type SourceItem, type ThemeConfig, type ThemeMode, type UseChatUIOptions, type UseChatUIReturn, type UserProfile, useChatUI };

package/dist/react/index.d.ts

@@ -57,6 +57,14 @@ interface AlternativeResponse {
     model: string;
     content: string;
     timestamp: number;
+    sources?: SourceItem[];
+}
+interface SourceItem {
+    id: string;
+    title: string;
+    url: string;
+    snippet?: string;
+    favicon?: string;
 }
 interface ChatMessage {
     id: string;
@@ -65,6 +73,7 @@ interface ChatMessage {
     model?: string;
     timestamp: number;
     alternatives?: AlternativeResponse[];
+    sources?: SourceItem[];
 }
 interface ChatSession {
     id: string;
@@ -139,7 +148,7 @@ interface ChatUIProps {
     /** CSS 클래스 */
     className?: string;
     /** 메시지 전송 핸들러 (커스텀 API 사용 시) */
-    onSendMessage?: (params: SendMessageParams) => Promise<ReadableStream<Uint8Array> | string>;
+    onSendMessage?: (params: SendMessageParams) => Promise<SendMessageResponse>;
     /** 세션 변경 핸들러 */
     onSessionChange?: (session: ChatSession | null) => void;
     /** 에러 핸들러 */
@@ -155,6 +164,11 @@ interface SendMessageParams {
     apiKey?: string;
     systemPrompt?: string;
 }
+/** onSendMessage 반환 타입 */
+type SendMessageResponse = ReadableStream<Uint8Array> | string | {
+    content: string;
+    sources?: SourceItem[];
+};
 interface ChatUIComponents {
     /** 사이드바 컴포넌트 */
     Sidebar?: React.ComponentType<SidebarProps>;
@@ -191,6 +205,8 @@ interface MessageListProps {
     onEdit: (message: ChatMessage) => void;
     onRegenerate: (id: string) => void;
     onQuote: (text: string) => void;
+    onAskOtherModel?: (messageId: string, targetModel: string) => void;
+    models?: ModelConfig[];
     copiedId: string | null;
     editingId: string | null;
 }
@@ -203,6 +219,8 @@ interface MessageBubbleProps {
     onEdit: () => void;
     onRegenerate?: () => void;
     onQuote?: (text: string) => void;
+    onAskOtherModel?: (targetModel: string) => void;
+    models?: ModelConfig[];
     alternatives?: AlternativeResponse[];
     activeAlternativeIndex?: number;
     onAlternativeChange?: (index: number) => void;
@@ -281,7 +299,9 @@ interface UseChatUIReturn {
     cancelEdit: () => void;
     saveEdit: (content: string) => Promise<void>;
     regenerate: (messageId: string) => Promise<void>;
+    askOtherModel: (messageId: string, targetModel: string) => Promise<void>;
     updatePersonalization: (config: Partial<PersonalizationConfig>) => void;
+    models: ModelConfig[];
 }
 
 /**
@@ -316,7 +336,7 @@ interface UseChatUIOptions {
     /** 압축 후 유지할 메시지 수 */
     keepRecentMessages?: number;
     /** 커스텀 메시지 전송 핸들러 */
-    onSendMessage?: (params: SendMessageParams) => Promise<ReadableStream<Uint8Array> | string>;
+    onSendMessage?: (params: SendMessageParams) => Promise<SendMessageResponse>;
     /** 세션 변경 핸들러 */
     onSessionChange?: (session: ChatSession | null) => void;
     /** 에러 핸들러 */
@@ -487,4 +507,4 @@ interface SettingsModalProps {
 }
 declare const SettingsModal: React$1.FC<SettingsModalProps>;
 
-export { type ActionItem, type ActionMenuProps, type AlternativeResponse, ChatHeader, ChatInput, type ChatMessage, type ChatSession, ChatSidebar, ChatUI, type ChatUIComponents, type ChatUIProps, EmptyState, type EmptyStateProps, type HeaderProps, Icon, type IconName, type IconProps, IconSvg, type InputProps, LinkChip, type LinkChipProps, MarkdownRenderer, type MarkdownRendererProps, type MemoryItem, MemoryPanel, type MemoryPanelProps, MessageBubble, type MessageBubbleProps, MessageList, type MessageListProps, type ModelConfig, type ModelSelectorProps, type PersonalizationConfig, type PromptTemplate, type ProviderType, type ResponseStyle, type SendMessageParams, SettingsModal, type SettingsModalProps, type SettingsTab, type SidebarProps, type ThemeConfig, type ThemeMode, type UseChatUIOptions, type UseChatUIReturn, type UserProfile, useChatUI };
+export { type ActionItem, type ActionMenuProps, type AlternativeResponse, ChatHeader, ChatInput, type ChatMessage, type ChatSession, ChatSidebar, ChatUI, type ChatUIComponents, type ChatUIProps, EmptyState, type EmptyStateProps, type HeaderProps, Icon, type IconName, type IconProps, IconSvg, type InputProps, LinkChip, type LinkChipProps, MarkdownRenderer, type MarkdownRendererProps, type MemoryItem, MemoryPanel, type MemoryPanelProps, MessageBubble, type MessageBubbleProps, MessageList, type MessageListProps, type ModelConfig, type ModelSelectorProps, type PersonalizationConfig, type PromptTemplate, type ProviderType, type ResponseStyle, type SendMessageParams, type SendMessageResponse, SettingsModal, type SettingsModalProps, type SettingsTab, type SidebarProps, type SourceItem, type ThemeConfig, type ThemeMode, type UseChatUIOptions, type UseChatUIReturn, type UserProfile, useChatUI };

package/dist/react/index.js

@@ -408,6 +408,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, {
@@ -539,6 +555,158 @@ ${contextSummary}` },
     setInput(userMessage.content);
     await sendMessage(userMessage.content);
   }, [currentSession, currentSessionId, isLoading, sendMessage]);
+  const askOtherModel = (0, import_react.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,
@@ -573,7 +741,9 @@ ${contextSummary}` },
     cancelEdit,
     saveEdit,
     regenerate,
-    updatePersonalization
+    askOtherModel,
+    updatePersonalization,
+    models
   };
 };
 
@@ -2033,15 +2203,20 @@ var MessageBubble = ({
   onEdit,
   onRegenerate,
   onQuote,
+  onAskOtherModel,
+  models,
   alternatives,
   activeAlternativeIndex = 0,
   onAlternativeChange
 }) => {
   const [showActions, setShowActions] = (0, import_react6.useState)(false);
+  const [showModelMenu, setShowModelMenu] = (0, import_react6.useState)(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();
@@ -2166,6 +2341,43 @@ var MessageBubble = ({
               ]
             }
           ),
+          displaySources && displaySources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "8px",
+                marginTop: "12px",
+                paddingTop: "12px",
+                borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: 500,
+                      color: "var(--chatllm-text-muted, #9ca3af)",
+                      marginRight: "4px"
+                    },
+                    children: "\uCD9C\uCC98:"
+                  }
+                ),
+                displaySources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  LinkChip,
+                  {
+                    text: source.title,
+                    url: source.url,
+                    index: index + 1,
+                    showFavicon: true
+                  },
+                  source.id
+                ))
+              ]
+            }
+          ),
           alternatives && alternatives.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
@@ -2230,7 +2442,110 @@ var MessageBubble = ({
                   }
                 ) }),
                 isUser && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onEdit, style: actionButtonStyle, title: "\uC218\uC815", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "edit-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) }),
-                isAssistant && onRegenerate && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onRegenerate, style: actionButtonStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "refresh-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) })
+                isAssistant && onRegenerate && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onRegenerate, style: actionButtonStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "refresh-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) }),
+                isAssistant && onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    "button",
+                    {
+                      onClick: () => setShowModelMenu(!showModelMenu),
+                      style: actionButtonStyle,
+                      title: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          IconSvg,
+                          {
+                            name: "arrow-down-s-line",
+                            size: 12,
+                            color: "var(--chatllm-text-muted, #9ca3af)",
+                            style: { marginLeft: "2px" }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  showModelMenu && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    "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__ */ (0, import_jsx_runtime7.jsx)(
+                          "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__ */ (0, import_jsx_runtime7.jsxs)(
+                          "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__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "robot-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { flex: 1 }, children: model.name }),
+                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                                "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
+                        ))
+                      ]
+                    }
+                  )
+                ] })
               ]
             }
           )
@@ -2277,6 +2592,8 @@ var MessageList = ({
   onEdit,
   onRegenerate,
   onQuote,
+  onAskOtherModel,
+  models,
   copiedId,
   editingId
 }) => {
@@ -2341,6 +2658,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
@@ -3644,7 +3963,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) => {
@@ -3762,6 +4083,8 @@ var ChatUI = ({
                   onEdit: startEdit,
                   onRegenerate: regenerate,
                   onQuote: setQuotedText,
+                  onAskOtherModel: askOtherModel,
+                  models: hookModels,
                   copiedId: copiedMessageId,
                   editingId: editingMessageId
                 }