@gendive/chatllm 0.17.0 → 0.17.2

package/dist/react/index.d.mts

@@ -396,6 +396,11 @@ interface ChatToolDefinition {
      * @Todo vibecode - MIME 와일드카드 ('image/*'), 확장자 ('.pdf') 지원
      */
     acceptedTypes?: string[];
+    /**
+     * @description 파일 첨부 시 File 객체를 base64 문자열로 자동 변환
+     * @Todo vibecode - true 시 execute()에 { name, mimeType, base64, size } 형태로 전달
+     */
+    autoConvertBase64?: boolean;
 }
 interface ChatMessage {
     id: string;
@@ -541,6 +546,11 @@ interface SkillConfig<TParams = Record<string, unknown>> {
      * @example ['image/*', 'application/pdf', '.docx']
      */
     acceptedTypes?: string[];
+    /**
+     * @description 파일 첨부 시 File 객체를 base64 문자열로 자동 변환
+     * @Todo vibecode - true 시 execute()에 { name, mimeType, base64, size } 형태로 전달
+     */
+    autoConvertBase64?: boolean;
 }
 /**
  * @description 스킬 실행 상태 (메시지에 첨부)
@@ -576,6 +586,14 @@ interface ModelConfig {
     name: string;
     provider: ProviderType;
     description?: string;
+    /** @Todo vibecode - UI 표시용 아이콘 (URL 또는 아이콘 이름) */
+    icon?: string;
+    /** @Todo vibecode - 최대 출력 토큰 수 */
+    maxTokens?: number;
+    /** @Todo vibecode - 컨텍스트 윈도우 크기 (토큰) */
+    contextWindow?: number;
+    /** @Todo vibecode - 호스트 커스텀 필드 허용 */
+    [key: string]: unknown;
 }
 interface PromptTemplate {
     id: string;

package/dist/react/index.d.ts

@@ -396,6 +396,11 @@ interface ChatToolDefinition {
      * @Todo vibecode - MIME 와일드카드 ('image/*'), 확장자 ('.pdf') 지원
      */
     acceptedTypes?: string[];
+    /**
+     * @description 파일 첨부 시 File 객체를 base64 문자열로 자동 변환
+     * @Todo vibecode - true 시 execute()에 { name, mimeType, base64, size } 형태로 전달
+     */
+    autoConvertBase64?: boolean;
 }
 interface ChatMessage {
     id: string;
@@ -541,6 +546,11 @@ interface SkillConfig<TParams = Record<string, unknown>> {
      * @example ['image/*', 'application/pdf', '.docx']
      */
     acceptedTypes?: string[];
+    /**
+     * @description 파일 첨부 시 File 객체를 base64 문자열로 자동 변환
+     * @Todo vibecode - true 시 execute()에 { name, mimeType, base64, size } 형태로 전달
+     */
+    autoConvertBase64?: boolean;
 }
 /**
  * @description 스킬 실행 상태 (메시지에 첨부)
@@ -576,6 +586,14 @@ interface ModelConfig {
     name: string;
     provider: ProviderType;
     description?: string;
+    /** @Todo vibecode - UI 표시용 아이콘 (URL 또는 아이콘 이름) */
+    icon?: string;
+    /** @Todo vibecode - 최대 출력 토큰 수 */
+    maxTokens?: number;
+    /** @Todo vibecode - 컨텍스트 윈도우 크기 (토큰) */
+    contextWindow?: number;
+    /** @Todo vibecode - 호스트 커스텀 필드 허용 */
+    [key: string]: unknown;
 }
 interface PromptTemplate {
     id: string;

package/dist/react/index.js

@@ -1199,7 +1199,7 @@ var useProject = (options) => {
   const currentProject = projects.find((p) => p.id === currentProjectId) || null;
   (0, import_react4.useEffect)(() => {
     if (!enabled || useExternalStorage || !initializedRef.current) return;
-    if (projects.length > 0) {
+    if (projects.length > 0 && typeof window !== "undefined") {
       localStorage.setItem(storageKey, JSON.stringify(projects));
     }
   }, [enabled, projects, storageKey, useExternalStorage]);
@@ -1233,7 +1233,7 @@ var useProject = (options) => {
         }
       } else {
         try {
-          const saved = localStorage.getItem(storageKey);
+          const saved = typeof window !== "undefined" ? localStorage.getItem(storageKey) : null;
           if (saved) {
             const parsed = JSON.parse(saved);
             if (!parsed.find((p) => p.id === DEFAULT_PROJECT_ID)) {
@@ -1540,6 +1540,7 @@ var convertToolsToSkills = (tools, onToolCall) => {
       label: tool.label || tool.name,
       icon: tool.icon,
       acceptedTypes: tool.acceptedTypes,
+      autoConvertBase64: tool.autoConvertBase64,
       parameters: {
         type: "object",
         properties: Object.fromEntries(
@@ -1613,6 +1614,20 @@ var DEFAULT_KEEP_RECENT = 6;
 var DEFAULT_RECOMPRESSION_THRESHOLD = 10;
 var DEFAULT_TOKEN_LIMIT = 8e3;
 var generateId3 = (prefix) => `${prefix}_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+var fileToBase64 = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(reader.result.split(",")[1] || "");
+  reader.onerror = reject;
+  reader.readAsDataURL(file);
+});
+var convertAttachmentsToBase64 = async (attachments) => Promise.all(
+  attachments.map(async (att) => ({
+    name: att.name,
+    mimeType: att.mimeType,
+    base64: await fileToBase64(att.file),
+    size: att.size
+  }))
+);
 var generateTitle = (messages) => {
   const firstUserMessage = messages.find((m) => m.role === "user");
   if (!firstUserMessage) return "\uC0C8 \uB300\uD654";
@@ -1835,11 +1850,13 @@ var useChatUI = (options) => {
       }).finally(() => {
         setIsSessionsLoading(false);
       });
-      const savedPersonalization2 = localStorage.getItem(`${storageKey}_personalization`);
-      if (savedPersonalization2) {
-        try {
-          setPersonalization(JSON.parse(savedPersonalization2));
-        } catch {
+      if (typeof window !== "undefined") {
+        const savedPersonalization2 = localStorage.getItem(`${storageKey}_personalization`);
+        if (savedPersonalization2) {
+          try {
+            setPersonalization(JSON.parse(savedPersonalization2));
+          } catch {
+          }
         }
       }
       return;
@@ -1847,6 +1864,7 @@ var useChatUI = (options) => {
     if (enableProjects) {
       migrateSessionsToProjects(storageKey);
     }
+    if (typeof window === "undefined") return;
     const saved = localStorage.getItem(storageKey);
     if (saved) {
       try {
@@ -2335,7 +2353,8 @@ ${newConversation}
   }, []);
   const sendMessage = (0, import_react5.useCallback)(async (content, options2) => {
     const messageContent = content || input;
-    if (!messageContent.trim() || isLoading) return;
+    if (!messageContent.trim() && attachments.length === 0 || isLoading) return;
+    setIsLoading(true);
     let sessionId = currentSessionId;
     if (!sessionId) {
       if (useExternalStorage && onCreateSessionRef.current) {
@@ -2426,7 +2445,8 @@ ${finalContent}`;
         });
         if (matchedFiles.length === 0) continue;
         try {
-          const result = await skillConfig.execute({ files: matchedFiles, userMessage: finalContent });
+          const filesToPass = skillConfig.autoConvertBase64 ? await convertAttachmentsToBase64(matchedFiles) : matchedFiles;
+          const result = await skillConfig.execute({ files: filesToPass, userMessage: finalContent });
           attachmentResults.push({
             type: "tool_result",
             toolName: skillName,
@@ -2444,6 +2464,20 @@ ${finalContent}`;
         }
       }
     }
+    let shouldContinueAfterAttachment = continueAfterToolResult;
+    if (attachmentResults.length > 0) {
+      for (const part of attachmentResults) {
+        if (part.type === "tool_result" && onSkillCompleteRef.current) {
+          const decision = onSkillCompleteRef.current(part.toolName, {
+            content: part.result.content,
+            metadata: part.result.metadata,
+            sources: part.result.sources
+          });
+          shouldContinueAfterAttachment = decision === "continue";
+          if (!shouldContinueAfterAttachment) break;
+        }
+      }
+    }
     const assistantMessageId = generateId3("msg");
     const assistantMessage = {
       id: assistantMessageId,
@@ -2491,7 +2525,10 @@ ${finalContent}`;
       }).catch(() => {
       });
     }
-    setIsLoading(true);
+    if (attachmentResults.length > 0 && !shouldContinueAfterAttachment) {
+      setIsLoading(false);
+      return;
+    }
     abortControllerRef.current = new AbortController();
     try {
       let messagesToSend = [...existingMessages, userMessage];
@@ -2550,6 +2587,20 @@ ${currentContextSummary}` },
       } else {
         chatMessages = messagesToSend.map((m) => ({ role: m.role, content: m.content }));
       }
+      if (attachmentResults.length > 0 && shouldContinueAfterAttachment) {
+        const attachmentContext = attachmentResults.filter((part) => part.type === "tool_result").map((part) => `[${part.label || part.toolName} \uACB0\uACFC]
+${part.result.content}`).join("\n\n");
+        if (attachmentContext) {
+          chatMessages.push({
+            role: "user",
+            content: `\uD30C\uC77C \uBD84\uC11D \uACB0\uACFC:
+
+${attachmentContext}
+
+\uC704 \uACB0\uACFC\uB97C \uCC38\uACE0\uD558\uC5EC \uB2F5\uBCC0\uD574\uC8FC\uC138\uC694.`
+          });
+        }
+      }
       console.log("[ChatUI] Messages to send:", chatMessages.length, chatMessages.map((m) => ({ role: m.role, content: m.content.slice(0, 50) })));
       const baseSystemPrompt = buildSystemPrompt();
       const combinedSystemPrompt = [baseSystemPrompt, actionPrompt].filter(Boolean).join("\n\n");
@@ -2557,8 +2608,8 @@ ${currentContextSummary}` },
       const modelConfig = models.find((m) => m.id === selectedModel);
       const provider = modelConfig?.provider || "ollama";
       let response;
-      if (onSendMessage) {
-        const result = await onSendMessage({
+      if (onSendMessageRef.current) {
+        const result = await onSendMessageRef.current({
           messages: messagesForApi,
           model: selectedModel,
           provider,
@@ -2983,14 +3034,12 @@ ${result.content}
     keepRecentMessages,
     buildSystemPrompt,
     compressContext,
-    onSendMessage,
-    onError,
-    generateTitleCallback,
-    onTitleChange,
     useExternalStorage,
-    onSaveMessages,
     handleSkillCall,
-    resolvedSkills
+    resolvedSkills,
+    /** @Todo vibecode - attachments, continueAfterToolResult를 deps에 추가하여 stale closure 방지 */
+    attachments,
+    continueAfterToolResult
   ]);
   const handlePollSubmit = (0, import_react5.useCallback)(
     (messageId, responses) => {
@@ -3258,8 +3307,8 @@ ${currentSession.contextSummary}` },
       const provider = modelConfig?.provider || "ollama";
       let responseContent = "";
       let responseSources;
-      if (onSendMessage) {
-        const result = await onSendMessage({
+      if (onSendMessageRef.current) {
+        const result = await onSendMessageRef.current({
           messages: messagesForApi,
           model: targetModel,
           provider,
@@ -3537,7 +3586,25 @@ ${currentSession.contextSummary}` },
           systemPrompt: `\uC0AC\uC6A9\uC790\uAC00 "${toolConfig.label || skillName}" \uB3C4\uAD6C\uB97C \uC0AC\uC6A9\uD558\uB824\uACE0 \uD569\uB2C8\uB2E4. \uC0AC\uC6A9\uC790\uC758 \uBA54\uC2DC\uC9C0\uB97C \uBC14\uD0D5\uC73C\uB85C \uBC18\uB4DC\uC2DC <skill_use name="${skillName}"> \uD0DC\uADF8\uB97C \uC0AC\uC6A9\uD558\uC5EC \uC774 \uB3C4\uAD6C\uB97C \uD638\uCD9C\uD558\uC138\uC694. \uB3C4\uAD6C\uB97C \uC0AC\uC6A9\uD558\uC9C0 \uC54A\uACE0 \uD14D\uC2A4\uD2B8\uB85C\uB9CC \uB2F5\uBCC0\uD558\uC9C0 \uB9C8\uC138\uC694.`
         });
       } else {
-        executeManualSkill(skillName, { query: input });
+        const currentQuery = input;
+        executeManualSkill(skillName, { query: currentQuery }).then((result) => {
+          if (!result || !result.content) return;
+          let shouldContinue = continueAfterToolResult;
+          if (onSkillCompleteRef.current) {
+            const decision = onSkillCompleteRef.current(skillName, result);
+            shouldContinue = decision === "continue";
+          }
+          if (!shouldContinue) return;
+          skipNextSkillParsingRef.current = true;
+          const resultPrompt = `\uC2A4\uD0AC "${skillName}" \uC2E4\uD589 \uACB0\uACFC:
+
+${result.content}
+
+\uC704 \uACB0\uACFC\uB97C \uBC14\uD0D5\uC73C\uB85C \uC0AC\uC6A9\uC790\uC758 \uC6D0\uB798 \uC9C8\uBB38\uC5D0 \uB2F5\uBCC0\uD574\uC8FC\uC138\uC694. skill_use \uD0DC\uADF8\uB294 \uC0AC\uC6A9\uD558\uC9C0 \uB9C8\uC138\uC694.`;
+          setTimeout(() => {
+            sendMessage(resultPrompt, { hiddenUserMessage: true });
+          }, 100);
+        });
       }
     },
     // Project
@@ -3968,6 +4035,7 @@ var ChatSidebar = ({
       className: `chatllm-sidebar chatllm-sidebar-transition ${theme ? `chatllm-root ${themeClass}` : ""}`,
       style: {
         width: isOpen ? sidebarWidth : "0",
+        height: "100%",
         flexShrink: 0,
         backgroundColor: "var(--chatllm-sidebar-bg)",
         borderRight: isOpen ? "1px solid var(--chatllm-border)" : "none",
@@ -10371,6 +10439,7 @@ var ChatUIView = ({
             currentProjectId,
             onSelectProject: projects.length > 0 ? selectProject : void 0,
             onNewProject: projects.length > 0 ? () => {
+              if (typeof window === "undefined") return;
               const title = window.prompt("\uD504\uB85C\uC81D\uD2B8 \uC774\uB984\uC744 \uC785\uB825\uD558\uC138\uC694");
               if (title?.trim()) {
                 createProject({ title: title.trim() });