@gendive/chatllm 0.6.3 → 0.6.4

package/dist/react/index.mjs

@@ -1772,7 +1772,7 @@ var LinkChip = ({
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var IMAGE_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
 var LINK_REGEX = /(?<!!)\[([^\]]+)\]\(([^)]+)\)/g;
-var SOURCE_LINKS_REGEX = /(\*{0,2}출처:?\*{0,2}\s*)?((?:\[`?[^\]]+`?\]\([^)]+\)\s*)+)/gi;
+var SOURCE_LINKS_REGEX = /(\*{0,2}출처:?\*{0,2}\s*)?((?:(?<!!)\[`?[^\]]+`?\]\([^)]+\)\s*)+)/gi;
 var CODE_BLOCK_REGEX = /```(\w*)\n?([\s\S]*?)```/g;
 var INLINE_CODE_REGEX = /`([^`]+)`/g;
 var BOLD_REGEX = /\*\*([^*]+)\*\*/g;
@@ -2017,6 +2017,96 @@ var CodeBlock = ({ language, code }) => {
     }
   );
 };
+var ChoiceButtons = ({ choices, onChoiceClick }) => {
+  const [hoveredIndex, setHoveredIndex] = React4.useState(null);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "chatllm-choices",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        margin: "16px 0",
+        padding: "12px",
+        backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+        borderRadius: "12px",
+        border: "1px solid var(--chatllm-border-light, #e5e7eb)"
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              fontSize: "12px",
+              fontWeight: 600,
+              color: "var(--chatllm-text-muted, #6b7280)",
+              marginBottom: "4px",
+              textTransform: "uppercase",
+              letterSpacing: "0.5px"
+            },
+            children: "\uC120\uD0DD\uD558\uC138\uC694"
+          }
+        ),
+        choices.map((choice, index) => /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            onClick: () => onChoiceClick?.(choice),
+            onMouseEnter: () => setHoveredIndex(index),
+            onMouseLeave: () => setHoveredIndex(null),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              padding: "12px 16px",
+              backgroundColor: hoveredIndex === index ? "var(--chatllm-primary-light, #dbeafe)" : "var(--chatllm-bg, #ffffff)",
+              border: "1px solid var(--chatllm-border, #e5e7eb)",
+              borderRadius: "8px",
+              cursor: "pointer",
+              textAlign: "left",
+              transition: "all 0.2s ease",
+              transform: hoveredIndex === index ? "translateX(4px)" : "translateX(0)"
+            },
+            children: [
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "28px",
+                    height: "28px",
+                    borderRadius: "50%",
+                    backgroundColor: hoveredIndex === index ? "var(--chatllm-primary, #3b82f6)" : "var(--chatllm-bg-tertiary, #f3f4f6)",
+                    color: hoveredIndex === index ? "#ffffff" : "var(--chatllm-text, #374151)",
+                    fontSize: "14px",
+                    fontWeight: 600,
+                    flexShrink: 0,
+                    transition: "all 0.2s ease"
+                  },
+                  children: choice.number
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  style: {
+                    fontSize: "14px",
+                    color: "var(--chatllm-text, #374151)",
+                    lineHeight: "1.5"
+                  },
+                  children: choice.text
+                }
+              )
+            ]
+          },
+          choice.number
+        ))
+      ]
+    }
+  );
+};
 var SourceLinksSection = ({ links, label }) => {
   return /* @__PURE__ */ jsxs5(
     "div",
@@ -2050,7 +2140,7 @@ var SourceLinksSection = ({ links, label }) => {
     }
   );
 };
-var MarkdownRenderer = ({ content, className }) => {
+var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
   const rendered = useMemo(() => {
     const elements = [];
     let processedContent = content;
@@ -2072,6 +2162,7 @@ var MarkdownRenderer = ({ content, className }) => {
     let currentList = null;
     let blockquoteLines = [];
     let tableLines = [];
+    let choiceItems = [];
     const flushTable = () => {
       if (tableLines.length >= 2) {
         const headerLine = tableLines[0];
@@ -2100,6 +2191,24 @@ var MarkdownRenderer = ({ content, className }) => {
       }
       tableLines = [];
     };
+    const flushChoices = () => {
+      if (choiceItems.length >= 2 && onChoiceClick) {
+        elements.push(
+          /* @__PURE__ */ jsx6(
+            ChoiceButtons,
+            {
+              choices: choiceItems,
+              onChoiceClick
+            },
+            `choices-${elements.length}`
+          )
+        );
+        choiceItems = [];
+        return true;
+      }
+      choiceItems = [];
+      return false;
+    };
     const flushList = () => {
       if (currentList) {
         if (currentList.type === "ul") {
@@ -2107,9 +2216,11 @@ var MarkdownRenderer = ({ content, className }) => {
             /* @__PURE__ */ jsx6("ul", { style: { margin: "8px 0", paddingLeft: "24px" }, children: currentList.items }, `ul-${elements.length}`)
           );
         } else {
-          elements.push(
-            /* @__PURE__ */ jsx6("ol", { style: { margin: "8px 0", paddingLeft: "24px" }, children: currentList.items }, `ol-${elements.length}`)
-          );
+          if (!flushChoices()) {
+            elements.push(
+              /* @__PURE__ */ jsx6("ol", { style: { margin: "8px 0", paddingLeft: "24px" }, children: currentList.items }, `ol-${elements.length}`)
+            );
+          }
         }
         currentList = null;
       }
@@ -2238,15 +2349,24 @@ var MarkdownRenderer = ({ content, className }) => {
         );
         return;
       }
-      const olMatch = line.match(/^(\d+)\.\s+(.+)$/);
+      const olMatch = line.match(/^(\d+)[.)]\s+(.+)$/);
       if (olMatch) {
         flushBlockquote();
         if (!currentList || currentList.type !== "ol") {
           flushList();
           currentList = { type: "ol", items: [] };
         }
+        const itemNumber = parseInt(olMatch[1]);
+        const itemText = olMatch[2];
+        if (itemText.length <= 100) {
+          choiceItems.push({
+            number: itemNumber,
+            text: itemText,
+            fullText: line
+          });
+        }
         currentList.items.push(
-          /* @__PURE__ */ jsx6("li", { style: { margin: "4px 0" }, children: parseInlineElements(olMatch[2], `li-${lineIndex}`) }, `li-${lineIndex}`)
+          /* @__PURE__ */ jsx6("li", { style: { margin: "4px 0" }, children: parseInlineElements(itemText, `li-${lineIndex}`) }, `li-${lineIndex}`)
         );
         return;
       }
@@ -2263,7 +2383,7 @@ var MarkdownRenderer = ({ content, className }) => {
     flushBlockquote();
     flushTable();
     return elements;
-  }, [content]);
+  }, [content, onChoiceClick]);
   return /* @__PURE__ */ jsx6(
     "div",
     {
@@ -2294,7 +2414,8 @@ var MessageBubble = ({
   alternatives,
   activeAlternativeIndex = 0,
   onAlternativeChange,
-  nextAssistantMessage
+  nextAssistantMessage,
+  onChoiceClick
 }) => {
   const [showActions, setShowActions] = useState5(false);
   const [showModelMenu, setShowModelMenu] = useState5(false);
@@ -2398,7 +2519,7 @@ var MessageBubble = ({
               children: [
                 isAssistant ? (
                   // AI 메시지는 마크다운 렌더링
-                  /* @__PURE__ */ jsx7(MarkdownRenderer, { content: displayContent })
+                  /* @__PURE__ */ jsx7(MarkdownRenderer, { content: displayContent, onChoiceClick })
                 ) : (
                   // 사용자 메시지는 일반 텍스트
                   /* @__PURE__ */ jsx7(
@@ -2687,7 +2808,8 @@ var MessageList = ({
   activeAlternatives = {},
   models,
   copiedId,
-  editingId
+  editingId,
+  onChoiceClick
 }) => {
   const messagesEndRef = useRef3(null);
   const containerRef = useRef3(null);
@@ -2759,7 +2881,8 @@ var MessageList = ({
               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
+              alternatives: message.role === "assistant" ? message.alternatives : assistantForAlts?.alternatives,
+              onChoiceClick: message.role === "assistant" ? onChoiceClick : void 0
             },
             message.id
           );
@@ -4112,6 +4235,9 @@ var ChatUI = ({
   const handleSubmit = () => {
     sendMessage();
   };
+  const handleChoiceClick = (choice) => {
+    setInput(choice.text);
+  };
   const [memoryPanelOpen, setMemoryPanelOpen] = useState9(false);
   const memoryItems = React9.useMemo(() => {
     const items = [];
@@ -4223,7 +4349,8 @@ var ChatUI = ({
                   activeAlternatives,
                   models: hookModels,
                   copiedId: copiedMessageId,
-                  editingId: editingMessageId
+                  editingId: editingMessageId,
+                  onChoiceClick: handleChoiceClick
                 }
               ),
               /* @__PURE__ */ jsx12(