@gendive/chatllm 0.6.2 → 0.6.4

package/README.md

@@ -931,12 +931,11 @@ const response = await fetch('http://localhost:11434/api/chat', {
 
 ```typescript
 // DevDive Gateway API
-const response = await fetch(
   `https://prd-gtw.devdive.ai/model/text-generation/v1/${model}`,
   {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
+    const response = await fetch(
+      headers: {
+        'Content-Type': 'application/json',
       'X-API-KEY': apiKey,
     },
     body: JSON.stringify({
@@ -948,5 +947,5 @@ const response = await fetch(
   }
 )
 ```
-
+      method: 'POST',
 ---

package/dist/react/index.d.mts

@@ -48,6 +48,26 @@ interface PersonalizationConfig {
     language: string;
 }
 
+/**
+ * @description 마크다운 렌더러 컴포넌트
+ * 외부 의존성 없이 기본 마크다운 파싱 지원
+ */
+
+interface ChoiceOption {
+    number: number;
+    text: string;
+    fullText: string;
+}
+interface MarkdownRendererProps {
+    /** 마크다운 텍스트 */
+    content: string;
+    /** 커스텀 클래스 */
+    className?: string;
+    /** 선택지 클릭 핸들러 */
+    onChoiceClick?: (choice: ChoiceOption) => void;
+}
+declare const MarkdownRenderer: React$1.FC<MarkdownRendererProps>;
+
 /**
  * @description React UI 컴포넌트 타입 정의
  */
@@ -211,6 +231,8 @@ interface MessageListProps {
     models?: ModelConfig[];
     copiedId: string | null;
     editingId: string | null;
+    /** 선택지 클릭 핸들러 */
+    onChoiceClick?: (choice: ChoiceOption) => void;
 }
 interface MessageBubbleProps {
     message: ChatMessage;
@@ -227,6 +249,7 @@ interface MessageBubbleProps {
     activeAlternativeIndex?: number;
     models?: ModelConfig[];
     alternatives?: AlternativeResponse[];
+    onChoiceClick?: (choice: ChoiceOption) => void;
 }
 interface InputProps {
     value: string;
@@ -454,19 +477,6 @@ interface MemoryPanelProps {
 }
 declare const MemoryPanel: React$1.FC<MemoryPanelProps>;
 
-/**
- * @description 마크다운 렌더러 컴포넌트
- * 외부 의존성 없이 기본 마크다운 파싱 지원
- */
-
-interface MarkdownRendererProps {
-    /** 마크다운 텍스트 */
-    content: string;
-    /** 커스텀 클래스 */
-    className?: string;
-}
-declare const MarkdownRenderer: React$1.FC<MarkdownRendererProps>;
-
 /**
  * @description 링크 칩 컴포넌트
  * 출처 링크를 칩 형태로 표시

package/dist/react/index.d.ts

@@ -48,6 +48,26 @@ interface PersonalizationConfig {
     language: string;
 }
 
+/**
+ * @description 마크다운 렌더러 컴포넌트
+ * 외부 의존성 없이 기본 마크다운 파싱 지원
+ */
+
+interface ChoiceOption {
+    number: number;
+    text: string;
+    fullText: string;
+}
+interface MarkdownRendererProps {
+    /** 마크다운 텍스트 */
+    content: string;
+    /** 커스텀 클래스 */
+    className?: string;
+    /** 선택지 클릭 핸들러 */
+    onChoiceClick?: (choice: ChoiceOption) => void;
+}
+declare const MarkdownRenderer: React$1.FC<MarkdownRendererProps>;
+
 /**
  * @description React UI 컴포넌트 타입 정의
  */
@@ -211,6 +231,8 @@ interface MessageListProps {
     models?: ModelConfig[];
     copiedId: string | null;
     editingId: string | null;
+    /** 선택지 클릭 핸들러 */
+    onChoiceClick?: (choice: ChoiceOption) => void;
 }
 interface MessageBubbleProps {
     message: ChatMessage;
@@ -227,6 +249,7 @@ interface MessageBubbleProps {
     activeAlternativeIndex?: number;
     models?: ModelConfig[];
     alternatives?: AlternativeResponse[];
+    onChoiceClick?: (choice: ChoiceOption) => void;
 }
 interface InputProps {
     value: string;
@@ -454,19 +477,6 @@ interface MemoryPanelProps {
 }
 declare const MemoryPanel: React$1.FC<MemoryPanelProps>;
 
-/**
- * @description 마크다운 렌더러 컴포넌트
- * 외부 의존성 없이 기본 마크다운 파싱 지원
- */
-
-interface MarkdownRendererProps {
-    /** 마크다운 텍스트 */
-    content: string;
-    /** 커스텀 클래스 */
-    className?: string;
-}
-declare const MarkdownRenderer: React$1.FC<MarkdownRendererProps>;
-
 /**
  * @description 링크 칩 컴포넌트
  * 출처 링크를 칩 형태로 표시

package/dist/react/index.js

@@ -1819,8 +1819,9 @@ var LinkChip = ({
 
 // src/react/components/MarkdownRenderer.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var LINK_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
-var SOURCE_LINKS_REGEX = /(\*{0,2}출처:?\*{0,2}\s*)?((?:\[`?[^\]]+`?\]\([^)]+\)\s*)+)/gi;
+var IMAGE_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+var LINK_REGEX = /(?<!!)\[([^\]]+)\]\(([^)]+)\)/g;
+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;
@@ -1847,8 +1848,9 @@ var parseInlineElements = (text, key) => {
   currentText = currentText.replace(INLINE_CODE_REGEX, "\xA7CODE\xA7$1\xA7/CODE\xA7");
   currentText = currentText.replace(BOLD_REGEX, "\xA7BOLD\xA7$1\xA7/BOLD\xA7");
   currentText = currentText.replace(ITALIC_REGEX, "\xA7ITALIC\xA7$1\xA7/ITALIC\xA7");
+  currentText = currentText.replace(IMAGE_REGEX, "\xA7IMAGE\xA7$1\xA7URL\xA7$2\xA7/IMAGE\xA7");
   currentText = currentText.replace(LINK_REGEX, "\xA7LINK\xA7$1\xA7URL\xA7$2\xA7/LINK\xA7");
-  const parts = currentText.split(/(§CODE§.*?§\/CODE§|§BOLD§.*?§\/BOLD§|§ITALIC§.*?§\/ITALIC§|§LINK§.*?§\/LINK§)/);
+  const parts = currentText.split(/(§CODE§.*?§\/CODE§|§BOLD§.*?§\/BOLD§|§ITALIC§.*?§\/ITALIC§|§IMAGE§.*?§\/IMAGE§|§LINK§.*?§\/LINK§)/);
   parts.forEach((part, index) => {
     if (part.startsWith("\xA7CODE\xA7")) {
       const content = part.replace("\xA7CODE\xA7", "").replace("\xA7/CODE\xA7", "");
@@ -1875,6 +1877,28 @@ var parseInlineElements = (text, key) => {
     } else if (part.startsWith("\xA7ITALIC\xA7")) {
       const content = part.replace("\xA7ITALIC\xA7", "").replace("\xA7/ITALIC\xA7", "");
       elements.push(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("em", { children: content }, `${key}-italic-${index}`));
+    } else if (part.startsWith("\xA7IMAGE\xA7")) {
+      const match = part.match(/§IMAGE§(.*)§URL§(.+?)§\/IMAGE§/);
+      if (match) {
+        elements.push(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "img",
+            {
+              src: match[2],
+              alt: match[1] || "",
+              className: "chatllm-image",
+              style: {
+                maxWidth: "100%",
+                borderRadius: "8px",
+                margin: "8px 0",
+                display: "block"
+              },
+              loading: "lazy"
+            },
+            `${key}-image-${index}`
+          )
+        );
+      }
     } else if (part.startsWith("\xA7LINK\xA7")) {
       const match = part.match(/§LINK§(.+?)§URL§(.+?)§\/LINK§/);
       if (match) {
@@ -2042,6 +2066,96 @@ var CodeBlock = ({ language, code }) => {
     }
   );
 };
+var ChoiceButtons = ({ choices, onChoiceClick }) => {
+  const [hoveredIndex, setHoveredIndex] = import_react5.default.useState(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "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__ */ (0, import_jsx_runtime6.jsx)(
+          "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__ */ (0, import_jsx_runtime6.jsxs)(
+          "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__ */ (0, import_jsx_runtime6.jsx)(
+                "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__ */ (0, import_jsx_runtime6.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: "14px",
+                    color: "var(--chatllm-text, #374151)",
+                    lineHeight: "1.5"
+                  },
+                  children: choice.text
+                }
+              )
+            ]
+          },
+          choice.number
+        ))
+      ]
+    }
+  );
+};
 var SourceLinksSection = ({ links, label }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
@@ -2075,7 +2189,7 @@ var SourceLinksSection = ({ links, label }) => {
     }
   );
 };
-var MarkdownRenderer = ({ content, className }) => {
+var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
   const rendered = (0, import_react5.useMemo)(() => {
     const elements = [];
     let processedContent = content;
@@ -2097,6 +2211,7 @@ var MarkdownRenderer = ({ content, className }) => {
     let currentList = null;
     let blockquoteLines = [];
     let tableLines = [];
+    let choiceItems = [];
     const flushTable = () => {
       if (tableLines.length >= 2) {
         const headerLine = tableLines[0];
@@ -2125,6 +2240,24 @@ var MarkdownRenderer = ({ content, className }) => {
       }
       tableLines = [];
     };
+    const flushChoices = () => {
+      if (choiceItems.length >= 2 && onChoiceClick) {
+        elements.push(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ChoiceButtons,
+            {
+              choices: choiceItems,
+              onChoiceClick
+            },
+            `choices-${elements.length}`
+          )
+        );
+        choiceItems = [];
+        return true;
+      }
+      choiceItems = [];
+      return false;
+    };
     const flushList = () => {
       if (currentList) {
         if (currentList.type === "ul") {
@@ -2132,9 +2265,11 @@ var MarkdownRenderer = ({ content, className }) => {
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { style: { margin: "8px 0", paddingLeft: "24px" }, children: currentList.items }, `ul-${elements.length}`)
           );
         } else {
-          elements.push(
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { style: { margin: "8px 0", paddingLeft: "24px" }, children: currentList.items }, `ol-${elements.length}`)
-          );
+          if (!flushChoices()) {
+            elements.push(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { style: { margin: "8px 0", paddingLeft: "24px" }, children: currentList.items }, `ol-${elements.length}`)
+            );
+          }
         }
         currentList = null;
       }
@@ -2263,15 +2398,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__ */ (0, import_jsx_runtime6.jsx)("li", { style: { margin: "4px 0" }, children: parseInlineElements(olMatch[2], `li-${lineIndex}`) }, `li-${lineIndex}`)
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { style: { margin: "4px 0" }, children: parseInlineElements(itemText, `li-${lineIndex}`) }, `li-${lineIndex}`)
         );
         return;
       }
@@ -2288,7 +2432,7 @@ var MarkdownRenderer = ({ content, className }) => {
     flushBlockquote();
     flushTable();
     return elements;
-  }, [content]);
+  }, [content, onChoiceClick]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
@@ -2319,7 +2463,8 @@ var MessageBubble = ({
   alternatives,
   activeAlternativeIndex = 0,
   onAlternativeChange,
-  nextAssistantMessage
+  nextAssistantMessage,
+  onChoiceClick
 }) => {
   const [showActions, setShowActions] = (0, import_react6.useState)(false);
   const [showModelMenu, setShowModelMenu] = (0, import_react6.useState)(false);
@@ -2423,7 +2568,7 @@ var MessageBubble = ({
               children: [
                 isAssistant ? (
                   // AI 메시지는 마크다운 렌더링
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MarkdownRenderer, { content: displayContent })
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MarkdownRenderer, { content: displayContent, onChoiceClick })
                 ) : (
                   // 사용자 메시지는 일반 텍스트
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2712,7 +2857,8 @@ var MessageList = ({
   activeAlternatives = {},
   models,
   copiedId,
-  editingId
+  editingId,
+  onChoiceClick
 }) => {
   const messagesEndRef = (0, import_react7.useRef)(null);
   const containerRef = (0, import_react7.useRef)(null);
@@ -2784,7 +2930,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
           );
@@ -4036,6 +4183,18 @@ var injectStyles = () => {
     .chatllm-table tr:hover {
       background-color: var(--chatllm-bg-hover, #f3f4f6);
     }
+
+    .chatllm-image {
+      max-width: 100%;
+      border-radius: 8px;
+      margin: 8px 0;
+      display: block;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .chatllm-image:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
   `;
   document.head.appendChild(style);
 };
@@ -4125,6 +4284,9 @@ var ChatUI = ({
   const handleSubmit = () => {
     sendMessage();
   };
+  const handleChoiceClick = (choice) => {
+    setInput(choice.text);
+  };
   const [memoryPanelOpen, setMemoryPanelOpen] = (0, import_react10.useState)(false);
   const memoryItems = import_react10.default.useMemo(() => {
     const items = [];
@@ -4236,7 +4398,8 @@ var ChatUI = ({
                   activeAlternatives,
                   models: hookModels,
                   copiedId: copiedMessageId,
-                  editingId: editingMessageId
+                  editingId: editingMessageId,
+                  onChoiceClick: handleChoiceClick
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(