@gendive/chatllm 0.9.0 → 0.10.1

package/dist/react/index.d.mts

@@ -65,6 +65,16 @@ interface MarkdownRendererProps {
     className?: string;
     /** 선택지 클릭 핸들러 */
     onChoiceClick?: (choice: ChoiceOption) => void;
+    /**
+     * @description Thinking 블록 표시 여부
+     * @Todo vibecode - AI 추론 과정 표시 (기본: true)
+     */
+    showThinking?: boolean;
+    /**
+     * @description Thinking 블록 기본 펼침 상태
+     * @Todo vibecode - true면 펼쳐진 상태로 표시 (기본: false)
+     */
+    thinkingDefaultOpen?: boolean;
 }
 declare const MarkdownRenderer: React$1.FC<MarkdownRendererProps>;
 
@@ -289,11 +299,18 @@ interface ChatUIProps {
     /**
      * @description 세션 상세 로드 콜백 (메시지 포함)
      * @Todo vibecode - 세션 선택 시 호출 (lazy loading)
+     * API 응답 형식: { role: 'USER'|'ASSISTANT', message: string }
      */
     onLoadSession?: (sessionId: string) => Promise<{
         id: string;
         title: string;
-        messages: ChatMessage[];
+        messages: Array<{
+            id?: string;
+            role: 'USER' | 'ASSISTANT' | 'user' | 'assistant';
+            message?: string;
+            content?: string;
+            created_at?: string;
+        }>;
         memory_data?: object;
     }>;
     /**
@@ -314,6 +331,16 @@ interface ChatUIProps {
         role: 'USER' | 'ASSISTANT';
         message: string;
     }[]) => Promise<void>;
+    /**
+     * @description Thinking 블록 표시 여부
+     * @Todo vibecode - AI 추론 과정 표시 (기본: true)
+     */
+    showThinking?: boolean;
+    /**
+     * @description Thinking 블록 기본 펼침 상태
+     * @Todo vibecode - true면 펼쳐진 상태로 표시 (기본: false)
+     */
+    thinkingDefaultOpen?: boolean;
 }
 interface SendMessageParams {
     messages: {
@@ -376,6 +403,16 @@ interface MessageListProps {
     editingId: string | null;
     /** 선택지 클릭 핸들러 */
     onChoiceClick?: (choice: ChoiceOption) => void;
+    /**
+     * @description Thinking 블록 표시 여부
+     * @Todo vibecode - AI 추론 과정 표시 (기본: true)
+     */
+    showThinking?: boolean;
+    /**
+     * @description Thinking 블록 기본 펼침 상태
+     * @Todo vibecode - true면 펼쳐진 상태로 표시 (기본: false)
+     */
+    thinkingDefaultOpen?: boolean;
 }
 interface MessageBubbleProps {
     message: ChatMessage;
@@ -393,6 +430,16 @@ interface MessageBubbleProps {
     models?: ModelConfig[];
     alternatives?: AlternativeResponse[];
     onChoiceClick?: (choice: ChoiceOption) => void;
+    /**
+     * @description Thinking 블록 표시 여부
+     * @Todo vibecode - AI 추론 과정 표시 (기본: true)
+     */
+    showThinking?: boolean;
+    /**
+     * @description Thinking 블록 기본 펼침 상태
+     * @Todo vibecode - true면 펼쳐진 상태로 표시 (기본: false)
+     */
+    thinkingDefaultOpen?: boolean;
 }
 interface InputProps {
     value: string;
@@ -572,11 +619,18 @@ interface UseChatUIOptions {
     /**
      * @description 세션 상세 로드 콜백 (메시지 포함)
      * @Todo vibecode - 세션 선택 시 호출 (lazy loading)
+     * API 응답 형식: { role: 'USER'|'ASSISTANT', message: string }
      */
     onLoadSession?: (sessionId: string) => Promise<{
         id: string;
         title: string;
-        messages: ChatMessage[];
+        messages: Array<{
+            id?: string;
+            role: 'USER' | 'ASSISTANT' | 'user' | 'assistant';
+            message?: string;
+            content?: string;
+            created_at?: string;
+        }>;
         memory_data?: object;
     }>;
     /**

package/dist/react/index.d.ts

@@ -65,6 +65,16 @@ interface MarkdownRendererProps {
     className?: string;
     /** 선택지 클릭 핸들러 */
     onChoiceClick?: (choice: ChoiceOption) => void;
+    /**
+     * @description Thinking 블록 표시 여부
+     * @Todo vibecode - AI 추론 과정 표시 (기본: true)
+     */
+    showThinking?: boolean;
+    /**
+     * @description Thinking 블록 기본 펼침 상태
+     * @Todo vibecode - true면 펼쳐진 상태로 표시 (기본: false)
+     */
+    thinkingDefaultOpen?: boolean;
 }
 declare const MarkdownRenderer: React$1.FC<MarkdownRendererProps>;
 
@@ -289,11 +299,18 @@ interface ChatUIProps {
     /**
      * @description 세션 상세 로드 콜백 (메시지 포함)
      * @Todo vibecode - 세션 선택 시 호출 (lazy loading)
+     * API 응답 형식: { role: 'USER'|'ASSISTANT', message: string }
      */
     onLoadSession?: (sessionId: string) => Promise<{
         id: string;
         title: string;
-        messages: ChatMessage[];
+        messages: Array<{
+            id?: string;
+            role: 'USER' | 'ASSISTANT' | 'user' | 'assistant';
+            message?: string;
+            content?: string;
+            created_at?: string;
+        }>;
         memory_data?: object;
     }>;
     /**
@@ -314,6 +331,16 @@ interface ChatUIProps {
         role: 'USER' | 'ASSISTANT';
         message: string;
     }[]) => Promise<void>;
+    /**
+     * @description Thinking 블록 표시 여부
+     * @Todo vibecode - AI 추론 과정 표시 (기본: true)
+     */
+    showThinking?: boolean;
+    /**
+     * @description Thinking 블록 기본 펼침 상태
+     * @Todo vibecode - true면 펼쳐진 상태로 표시 (기본: false)
+     */
+    thinkingDefaultOpen?: boolean;
 }
 interface SendMessageParams {
     messages: {
@@ -376,6 +403,16 @@ interface MessageListProps {
     editingId: string | null;
     /** 선택지 클릭 핸들러 */
     onChoiceClick?: (choice: ChoiceOption) => void;
+    /**
+     * @description Thinking 블록 표시 여부
+     * @Todo vibecode - AI 추론 과정 표시 (기본: true)
+     */
+    showThinking?: boolean;
+    /**
+     * @description Thinking 블록 기본 펼침 상태
+     * @Todo vibecode - true면 펼쳐진 상태로 표시 (기본: false)
+     */
+    thinkingDefaultOpen?: boolean;
 }
 interface MessageBubbleProps {
     message: ChatMessage;
@@ -393,6 +430,16 @@ interface MessageBubbleProps {
     models?: ModelConfig[];
     alternatives?: AlternativeResponse[];
     onChoiceClick?: (choice: ChoiceOption) => void;
+    /**
+     * @description Thinking 블록 표시 여부
+     * @Todo vibecode - AI 추론 과정 표시 (기본: true)
+     */
+    showThinking?: boolean;
+    /**
+     * @description Thinking 블록 기본 펼침 상태
+     * @Todo vibecode - true면 펼쳐진 상태로 표시 (기본: false)
+     */
+    thinkingDefaultOpen?: boolean;
 }
 interface InputProps {
     value: string;
@@ -572,11 +619,18 @@ interface UseChatUIOptions {
     /**
      * @description 세션 상세 로드 콜백 (메시지 포함)
      * @Todo vibecode - 세션 선택 시 호출 (lazy loading)
+     * API 응답 형식: { role: 'USER'|'ASSISTANT', message: string }
      */
     onLoadSession?: (sessionId: string) => Promise<{
         id: string;
         title: string;
-        messages: ChatMessage[];
+        messages: Array<{
+            id?: string;
+            role: 'USER' | 'ASSISTANT' | 'user' | 'assistant';
+            message?: string;
+            content?: string;
+            created_at?: string;
+        }>;
         memory_data?: object;
     }>;
     /**

package/dist/react/index.js

@@ -871,8 +871,9 @@ ${newConversation}
         const loadedMessages = sessionDetail.messages.map((m, idx) => ({
           id: m.id || generateId("msg"),
           role: typeof m.role === "string" ? m.role.toLowerCase() : m.role,
-          content: m.content,
-          timestamp: m.timestamp || Date.now() - (sessionDetail.messages.length - idx) * 1e3,
+          // API는 message 필드, 내부는 content 필드 사용
+          content: m.content || m.message || "",
+          timestamp: m.created_at ? new Date(m.created_at).getTime() : Date.now() - (sessionDetail.messages.length - idx) * 1e3,
           model: m.model,
           alternatives: m.alternatives,
           sources: m.sources
@@ -2697,6 +2698,9 @@ var SOURCE_LINKS_REGEX = /(\*{0,2}출처:?\*{0,2}\s*)?((?:(?<!!)\[`?[^\]]+`?\]\(
 var INLINE_CHOICE_PATTERN = /\[(\d+)\]\s*([^\[\n]+?)(?=\s*\[\d+\]|$)/g;
 var INLINE_CHOICE_LINE_PATTERN = /^(.+?)?\s*(\[\d+\][^\[]+(?:\[\d+\][^\[]+)+)$/;
 var CODE_BLOCK_REGEX = /```(\w*)\n?([\s\S]*?)```/g;
+var THINKING_TAG_REGEX = /<thinking>([\s\S]*?)<\/thinking>/gi;
+var THINKING_CODEBLOCK_REGEX = /```thinking\n?([\s\S]*?)```/gi;
+var THINKING_TEXT_REGEX = /^Thinking:\s*\n([\s\S]*?)(?=\n\n|$)/gim;
 var INLINE_CODE_REGEX = /`([^`]+)`/g;
 var BOLD_REGEX = /\*\*([^*]+)\*\*/g;
 var ITALIC_REGEX = /(?<!\*)\*([^*]+)\*(?!\*)/g;
@@ -2874,6 +2878,80 @@ var MarkdownTable = ({ data }) => {
     }
   );
 };
+var ThinkingBlock = ({ content, defaultOpen = false }) => {
+  const [isOpen, setIsOpen] = import_react8.default.useState(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "details",
+    {
+      open: isOpen,
+      className: "chatllm-thinking",
+      style: {
+        margin: "12px 0",
+        borderRadius: "8px",
+        border: "1px solid var(--chatllm-border, #e5e7eb)",
+        background: "var(--chatllm-bg-secondary, #f9fafb)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "summary",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              setIsOpen(!isOpen);
+            },
+            style: {
+              padding: "10px 14px",
+              cursor: "pointer",
+              fontSize: "13px",
+              color: "var(--chatllm-text-secondary, #6b7280)",
+              userSelect: "none",
+              listStyle: "none",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "14px" }, children: "\u{1F4AD}" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+                "Thinking",
+                isOpen ? "" : "..."
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "span",
+                {
+                  style: {
+                    marginLeft: "auto",
+                    fontSize: "10px",
+                    transition: "transform 0.2s",
+                    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+                  },
+                  children: "\u25BC"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            className: "chatllm-thinking-content",
+            style: {
+              padding: "12px 14px",
+              borderTop: "1px solid var(--chatllm-border, #e5e7eb)",
+              fontSize: "13px",
+              color: "var(--chatllm-text-secondary, #6b7280)",
+              whiteSpace: "pre-wrap",
+              lineHeight: "1.6",
+              background: "var(--chatllm-bg, #ffffff)"
+            },
+            children: content.trim()
+          }
+        )
+      ]
+    }
+  );
+};
 var CodeBlock = ({ language, code }) => {
   const [copied, setCopied] = import_react8.default.useState(false);
   const handleCopy = async () => {
@@ -3298,10 +3376,35 @@ var SourceLinksSection = ({ links, label }) => {
     }
   );
 };
-var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
+var MarkdownRenderer = ({
+  content,
+  className,
+  onChoiceClick,
+  showThinking = true,
+  thinkingDefaultOpen = false
+}) => {
   const rendered = (0, import_react8.useMemo)(() => {
     const elements = [];
     let processedContent = content;
+    const thinkingBlocks = [];
+    if (showThinking) {
+      processedContent = processedContent.replace(THINKING_TAG_REGEX, (_, thinkContent) => {
+        thinkingBlocks.push(thinkContent);
+        return `\xA7THINKING\xA7${thinkingBlocks.length - 1}\xA7/THINKING\xA7`;
+      });
+      processedContent = processedContent.replace(THINKING_CODEBLOCK_REGEX, (_, thinkContent) => {
+        thinkingBlocks.push(thinkContent);
+        return `\xA7THINKING\xA7${thinkingBlocks.length - 1}\xA7/THINKING\xA7`;
+      });
+      processedContent = processedContent.replace(THINKING_TEXT_REGEX, (_, thinkContent) => {
+        thinkingBlocks.push(thinkContent);
+        return `\xA7THINKING\xA7${thinkingBlocks.length - 1}\xA7/THINKING\xA7`;
+      });
+    } else {
+      processedContent = processedContent.replace(THINKING_TAG_REGEX, "");
+      processedContent = processedContent.replace(THINKING_CODEBLOCK_REGEX, "");
+      processedContent = processedContent.replace(THINKING_TEXT_REGEX, "");
+    }
     const codeBlocks = [];
     processedContent = processedContent.replace(CODE_BLOCK_REGEX, (_, lang, code) => {
       codeBlocks.push({ language: lang || "", code });
@@ -3409,6 +3512,23 @@ var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
       }
     };
     lines.forEach((line, lineIndex) => {
+      const thinkingMatch = line.match(/§THINKING§(\d+)§\/THINKING§/);
+      if (thinkingMatch) {
+        flushList();
+        flushBlockquote();
+        const index = parseInt(thinkingMatch[1]);
+        elements.push(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ThinkingBlock,
+            {
+              content: thinkingBlocks[index],
+              defaultOpen: thinkingDefaultOpen
+            },
+            `thinking-${lineIndex}`
+          )
+        );
+        return;
+      }
       const codeBlockMatch = line.match(/§CODEBLOCK§(\d+)§\/CODEBLOCK§/);
       if (codeBlockMatch) {
         flushList();
@@ -3597,7 +3717,9 @@ var MessageBubble = ({
   activeAlternativeIndex = 0,
   onAlternativeChange,
   nextAssistantMessage,
-  onChoiceClick
+  onChoiceClick,
+  showThinking = true,
+  thinkingDefaultOpen = false
 }) => {
   const [showActions, setShowActions] = (0, import_react9.useState)(false);
   const [showModelMenu, setShowModelMenu] = (0, import_react9.useState)(false);
@@ -3701,7 +3823,15 @@ var MessageBubble = ({
               children: [
                 isAssistant ? (
                   // AI 메시지는 마크다운 렌더링
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MarkdownRenderer, { content: displayContent, onChoiceClick })
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    MarkdownRenderer,
+                    {
+                      content: displayContent,
+                      onChoiceClick,
+                      showThinking,
+                      thinkingDefaultOpen
+                    }
+                  )
                 ) : (
                   // 사용자 메시지는 일반 텍스트
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -3991,7 +4121,9 @@ var MessageList = ({
   models,
   copiedId,
   editingId,
-  onChoiceClick
+  onChoiceClick,
+  showThinking = true,
+  thinkingDefaultOpen = false
 }) => {
   const messagesEndRef = (0, import_react10.useRef)(null);
   const containerRef = (0, import_react10.useRef)(null);
@@ -4064,7 +4196,9 @@ var MessageList = ({
               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,
-              onChoiceClick: message.role === "assistant" ? onChoiceClick : void 0
+              onChoiceClick: message.role === "assistant" ? onChoiceClick : void 0,
+              showThinking,
+              thinkingDefaultOpen
             },
             message.id
           );
@@ -5360,7 +5494,10 @@ var ChatUI = ({
   onLoadSession,
   onDeleteSession,
   onUpdateSessionTitle,
-  onSaveMessages
+  onSaveMessages,
+  // Thinking Block Props
+  showThinking = true,
+  thinkingDefaultOpen = false
 }) => {
   import_react13.default.useEffect(() => {
     injectStyles();
@@ -5556,7 +5693,9 @@ var ChatUI = ({
                   models: hookModels,
                   copiedId: copiedMessageId,
                   editingId: editingMessageId,
-                  onChoiceClick: handleChoiceClick
+                  onChoiceClick: handleChoiceClick,
+                  showThinking,
+                  thinkingDefaultOpen
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(