@gendive/chatllm 0.17.29 → 0.17.31

package/dist/react/index.d.mts

@@ -1003,6 +1003,11 @@ interface MessageListProps {
      * @Todo vibecode - pending 항목 스킵
      */
     onChecklistSkip?: (messageId: string, stepIndex: number) => void;
+    /**
+     * @description 현재 실행 중인 스킬 정보 (도구 실행 로딩 표시용)
+     * @Todo vibecode - 메시지 리스트 하단에 도구 실행 상태 인디케이터
+     */
+    activeSkillExecution?: SkillExecution | null;
 }
 interface MessageBubbleProps {
     message: ChatMessage;

package/dist/react/index.d.ts

@@ -1003,6 +1003,11 @@ interface MessageListProps {
      * @Todo vibecode - pending 항목 스킵
      */
     onChecklistSkip?: (messageId: string, stepIndex: number) => void;
+    /**
+     * @description 현재 실행 중인 스킬 정보 (도구 실행 로딩 표시용)
+     * @Todo vibecode - 메시지 리스트 하단에 도구 실행 상태 인디케이터
+     */
+    activeSkillExecution?: SkillExecution | null;
 }
 interface MessageBubbleProps {
     message: ChatMessage;

package/dist/react/index.js

@@ -2125,32 +2125,52 @@ ${projectMemoryContext}`);
       parts.push("");
       parts.push(`## \uCCB4\uD06C\uB9AC\uC2A4\uD2B8 \uC790\uB3D9 \uC2E4\uD589 \uAE30\uB2A5
 
-\uBCF5\uD569 \uC791\uC5C5(\uC870\uC0AC, \uBE44\uAD50 \uBD84\uC11D, \uB2E4\uB2E8\uACC4 \uC791\uC5C5)\uC744 \uC694\uCCAD\uBC1B\uC73C\uBA74 <checklist> \uD0DC\uADF8\uB85C \uC2E4\uD589 \uACC4\uD68D\uC744 \uC791\uC131\uD558\uC138\uC694.
-\uC2DC\uC2A4\uD15C\uC774 \uAC01 \uB2E8\uACC4\uB97C \uC790\uB3D9\uC73C\uB85C \uD558\uB098\uC529 \uC2E4\uD589\uD569\uB2C8\uB2E4.
+**\uC911\uC694: \uC544\uB798 \uC870\uAC74\uC5D0 \uD574\uB2F9\uD558\uBA74 \uBC18\uB4DC\uC2DC <checklist> \uD0DC\uADF8\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.**
+
+\uB2E4\uC74C \uC694\uCCAD\uC5D0\uB294 \uCCB4\uD06C\uB9AC\uC2A4\uD2B8\uB97C \uC0AC\uC6A9\uD558\uC138\uC694:
+- \uC5EC\uB7EC \uB300\uC0C1\uC744 \uAC80\uC0C9/\uC870\uC0AC\uD558\uB294 \uC694\uCCAD (\uC608: "A\uC640 B \uAC80\uC0C9\uD574\uC918", "XX \uAD00\uB828 \uC11C\uBE44\uC2A4 \uCC3E\uC544\uC918")
+- \uBE44\uAD50 \uBD84\uC11D \uC694\uCCAD (\uC608: "A\uC0AC\uC640 B\uC0AC \uBE44\uAD50\uD574\uC918")
+- \uBCF4\uACE0\uC11C/\uB9AC\uD3EC\uD2B8 \uC791\uC131 \uC694\uCCAD
+- 3\uB2E8\uACC4 \uC774\uC0C1\uC758 \uBCF5\uD569 \uC791\uC5C5
+
+\uC2DC\uC2A4\uD15C\uC774 \uAC01 \uB2E8\uACC4\uB97C \uC790\uB3D9\uC73C\uB85C \uD558\uB098\uC529 \uC2E4\uD589\uD569\uB2C8\uB2E4. \uB2F9\uC2E0\uC740 \uACC4\uD68D\uB9CC \uC138\uC6B0\uBA74 \uB429\uB2C8\uB2E4.
 
 **\uD615\uC2DD:**
+\uC9E7\uC740 \uC548\uB0B4 \uBA54\uC2DC\uC9C0
+
 <checklist>
 <step>1\uB2E8\uACC4 \uC81C\uBAA9</step>
 <step>2\uB2E8\uACC4 \uC81C\uBAA9</step>
 <step>3\uB2E8\uACC4 \uC81C\uBAA9</step>
 </checklist>
 
-**\uC608\uC2DC - "A\uC0AC\uC640 B\uC0AC \uBE44\uAD50 \uBD84\uC11D\uD574\uC918":**
-\uB124, \uBE44\uAD50 \uBD84\uC11D\uC744 \uC9C4\uD589\uD558\uACA0\uC2B5\uB2C8\uB2E4.
+**\uC608\uC2DC 1 - "\uB370\uBE0C\uB2E4\uC774\uBE0C\uC640 \uC820\uB2E4\uC774\uBE0C \uAC80\uC0C9\uD558\uACE0 \uBCF4\uACE0\uC11C \uC791\uC131\uD574\uC918":**
+\uB124, \uC870\uC0AC\uB97C \uC9C4\uD589\uD558\uACA0\uC2B5\uB2C8\uB2E4.
+
+<checklist>
+<step>\uB370\uBE0C\uB2E4\uC774\uBE0C \uC11C\uBE44\uC2A4 \uC815\uBCF4 \uC870\uC0AC</step>
+<step>\uC820\uB2E4\uC774\uBE0C \uC11C\uBE44\uC2A4 \uC815\uBCF4 \uC870\uC0AC</step>
+<step>\uC720\uC0AC \uC11C\uBE44\uC2A4 \uC870\uC0AC</step>
+<step>\uBE44\uAD50 \uBD84\uC11D\uD45C \uC791\uC131</step>
+<step>\uC885\uD569 \uBCF4\uACE0\uC11C \uC791\uC131</step>
+</checklist>
+
+**\uC608\uC2DC 2 - "\uC6B0\uB9AC \uC11C\uBE44\uC2A4 \uB9C8\uCF00\uD305 \uC804\uB7B5 \uC138\uC6CC\uC918":**
+\uB9C8\uCF00\uD305 \uC804\uB7B5\uC744 \uB2E8\uACC4\uBCC4\uB85C \uC218\uB9BD\uD558\uACA0\uC2B5\uB2C8\uB2E4.
 
 <checklist>
-<step>A\uC0AC \uC815\uBCF4 \uC870\uC0AC</step>
-<step>B\uC0AC \uC815\uBCF4 \uC870\uC0AC</step>
-<step>\uB450 \uD68C\uC0AC \uBE44\uAD50 \uBD84\uC11D\uD45C \uC791\uC131</step>
-<step>\uC885\uD569 \uACB0\uB860 \uBC0F \uCD94\uCC9C</step>
+<step>\uD604\uC7AC \uC11C\uBE44\uC2A4 \uBD84\uC11D</step>
+<step>\uD0C0\uAC9F \uACE0\uAC1D \uC815\uC758</step>
+<step>\uACBD\uC7C1\uC0AC \uBCA4\uCE58\uB9C8\uD0B9</step>
+<step>\uB9C8\uCF00\uD305 \uC804\uB7B5 \uC218\uB9BD</step>
 </checklist>
 
 **\uADDC\uCE59:**
-- 2~8\uB2E8\uACC4\uAC00 \uC801\uC808 (\uB108\uBB34 \uC801\uAC70\uB098 \uB9CE\uC73C\uBA74 \uC548 \uB428)
+- 2~8\uB2E8\uACC4\uAC00 \uC801\uC808
 - \uAC01 \uB2E8\uACC4\uB294 \uAD6C\uCCB4\uC801\uC774\uACE0 \uC2E4\uD589 \uAC00\uB2A5\uD55C \uC791\uC5C5
 - \uB2E8\uC21C \uC9C8\uBB38\uC774\uB098 \uD55C \uBC88\uC5D0 \uB2F5\uD560 \uC218 \uC788\uB294 \uC694\uCCAD\uC5D0\uB294 \uC0AC\uC6A9 \uAE08\uC9C0
-- <checklist> \uD0DC\uADF8 \uC55E\uC5D0 \uC9E7\uC740 \uC548\uB0B4 \uBA54\uC2DC\uC9C0\uB97C \uD3EC\uD568
-- \uAC80\uC0C9/\uC870\uC0AC, \uBE44\uAD50 \uBD84\uC11D, \uBCF4\uACE0\uC11C \uC791\uC131, \uB2E4\uB2E8\uACC4 \uC791\uC5C5\uC5D0 \uC801\uADF9 \uC0AC\uC6A9`);
+- <checklist> \uD0DC\uADF8 \uC55E\uC5D0 \uBC18\uB4DC\uC2DC \uC9E7\uC740 \uC548\uB0B4 \uBA54\uC2DC\uC9C0\uB97C \uD3EC\uD568\uD558\uC138\uC694
+- \uCCB4\uD06C\uB9AC\uC2A4\uD2B8 \uD0DC\uADF8 \uB4A4\uC5D0 \uCD94\uAC00 \uD14D\uC2A4\uD2B8\uB97C \uC791\uC131\uD558\uC9C0 \uB9C8\uC138\uC694`);
     }
     return parts.length > 0 ? parts.join("\n") : "";
   }, [personalization, globalMemory, useGlobalMemoryEnabled, enablePoll, enableChecklist, buildSkillsPrompt, enableProjects, projectHook.currentProject, projectMemory]);
@@ -2935,6 +2955,7 @@ ${attachmentContext}
         }
         if (detectedSkill && !resolvedSkills[detectedSkill.name]) {
           console.warn(`[useChatUI] \uC2A4\uD0AC "${detectedSkill.name}" \uAC10\uC9C0\uB418\uC5C8\uC73C\uB098 \uBBF8\uB4F1\uB85D. \uB4F1\uB85D\uB41C \uC2A4\uD0AC:`, Object.keys(resolvedSkills));
+          accumulatedContent = skillCleanContent;
           setSessions(
             (prev) => prev.map((s) => {
               if (s.id !== capturedSessionId) return s;
@@ -2949,84 +2970,157 @@ ${attachmentContext}
           );
         }
         if (detectedSkill && resolvedSkills[detectedSkill.name]) {
-          setSessions(
-            (prev) => prev.map((s) => {
-              if (s.id !== capturedSessionId) return s;
-              return {
-                ...s,
-                messages: s.messages.map((m) => {
-                  if (m.id !== assistantMessageId) return m;
-                  return {
-                    ...m,
-                    content: skillCleanContent,
-                    skillExecution: {
-                      skillName: detectedSkill.name,
-                      params: detectedSkill.params,
-                      status: "executing"
-                    }
-                  };
-                })
-              };
-            })
-          );
-          let streamedReport = "";
-          const { result } = await handleSkillCall(assistantContent, {
-            onProgress: (progress) => {
-              setSessions(
-                (prev) => prev.map((s) => {
-                  if (s.id !== capturedSessionId) return s;
-                  return {
-                    ...s,
-                    messages: s.messages.map((m) => {
-                      if (m.id !== assistantMessageId) return m;
-                      return {
-                        ...m,
-                        skillExecution: { ...m.skillExecution, progress }
-                      };
-                    })
-                  };
-                })
-              );
-            },
-            onStream: (chunk) => {
-              streamedReport += chunk;
-              setSessions(
-                (prev) => prev.map((s) => {
-                  if (s.id !== capturedSessionId) return s;
-                  return {
-                    ...s,
-                    messages: s.messages.map((m) => {
-                      if (m.id !== assistantMessageId) return m;
-                      return { ...m, content: streamedReport };
-                    })
-                  };
-                })
-              );
-            },
-            signal: abortControllerRef.current?.signal
-          });
-          if (result) {
-            if (result.metadata?.__toolResult__) {
-              const resultType = result.metadata.resultType;
-              const toolName = result.metadata.toolName;
-              const toolLabel = result.metadata.toolLabel;
-              const toolIcon = result.metadata.toolIcon;
-              const parts = [];
-              if (skillCleanContent.trim()) {
-                parts.push({ type: "text", content: skillCleanContent });
+          if (activeChecklistRef.current) {
+            console.log("[useChatUI] \uCCB4\uD06C\uB9AC\uC2A4\uD2B8 \uB2E8\uACC4 \uB0B4 \uC2A4\uD0AC \uC2E4\uD589:", detectedSkill.name);
+            accumulatedContent = skillCleanContent;
+            setSessions(
+              (prev) => prev.map((s) => {
+                if (s.id !== capturedSessionId) return s;
+                return { ...s, messages: s.messages.map((m) => m.id !== assistantMessageId ? m : { ...m, content: skillCleanContent }) };
+              })
+            );
+            try {
+              const { result: skillResult } = await handleSkillCall(assistantContent, {
+                signal: abortControllerRef.current?.signal
+              });
+              if (skillResult?.content) {
+                accumulatedContent = skillResult.content;
               }
-              parts.push({
-                type: "tool_result",
-                toolName,
-                label: toolLabel,
-                icon: toolIcon,
-                result: {
-                  type: resultType,
-                  content: result.content,
-                  metadata: result.metadata,
-                  sources: result.sources
+            } catch (e) {
+              console.warn("[useChatUI] \uCCB4\uD06C\uB9AC\uC2A4\uD2B8 \uB0B4 \uC2A4\uD0AC \uC2E4\uD589 \uC2E4\uD328:", e);
+            }
+          } else {
+            setSessions(
+              (prev) => prev.map((s) => {
+                if (s.id !== capturedSessionId) return s;
+                return {
+                  ...s,
+                  messages: s.messages.map((m) => {
+                    if (m.id !== assistantMessageId) return m;
+                    return {
+                      ...m,
+                      content: skillCleanContent,
+                      skillExecution: {
+                        skillName: detectedSkill.name,
+                        params: detectedSkill.params,
+                        status: "executing"
+                      }
+                    };
+                  })
+                };
+              })
+            );
+            let streamedReport = "";
+            const { result } = await handleSkillCall(assistantContent, {
+              onProgress: (progress) => {
+                setSessions(
+                  (prev) => prev.map((s) => {
+                    if (s.id !== capturedSessionId) return s;
+                    return {
+                      ...s,
+                      messages: s.messages.map((m) => {
+                        if (m.id !== assistantMessageId) return m;
+                        return {
+                          ...m,
+                          skillExecution: { ...m.skillExecution, progress }
+                        };
+                      })
+                    };
+                  })
+                );
+              },
+              onStream: (chunk) => {
+                streamedReport += chunk;
+                setSessions(
+                  (prev) => prev.map((s) => {
+                    if (s.id !== capturedSessionId) return s;
+                    return {
+                      ...s,
+                      messages: s.messages.map((m) => {
+                        if (m.id !== assistantMessageId) return m;
+                        return { ...m, content: streamedReport };
+                      })
+                    };
+                  })
+                );
+              },
+              signal: abortControllerRef.current?.signal
+            });
+            if (result) {
+              if (result.metadata?.__toolResult__) {
+                const resultType = result.metadata.resultType;
+                const toolName = result.metadata.toolName;
+                const toolLabel = result.metadata.toolLabel;
+                const toolIcon = result.metadata.toolIcon;
+                const parts = [];
+                if (skillCleanContent.trim()) {
+                  parts.push({ type: "text", content: skillCleanContent });
                 }
-              });
+                parts.push({
+                  type: "tool_result",
+                  toolName,
+                  label: toolLabel,
+                  icon: toolIcon,
+                  result: {
+                    type: resultType,
+                    content: result.content,
+                    metadata: result.metadata,
+                    sources: result.sources
+                  }
+                });
+                setSessions(
+                  (prev) => prev.map((s) => {
+                    if (s.id !== capturedSessionId) return s;
+                    return {
+                      ...s,
+                      messages: s.messages.map((m) => {
+                        if (m.id !== assistantMessageId) return m;
+                        return {
+                          ...m,
+                          contentParts: parts,
+                          skillExecution: {
+                            ...m.skillExecution,
+                            status: "done",
+                            result
+                          }
+                        };
+                      })
+                    };
+                  })
+                );
+                if (resultType === "image" || resultType === "file") {
+                  saveMessagesOnEarlyReturn();
+                  setIsLoading(false);
+                  abortControllerRef.current = null;
+                  return;
+                }
+                let shouldContinue = continueAfterToolResult;
+                if (onSkillCompleteRef.current) {
+                  const decision = onSkillCompleteRef.current(toolName, result);
+                  shouldContinue = decision === "continue";
+                }
+                if (!shouldContinue) {
+                  saveMessagesOnEarlyReturn();
+                  setIsLoading(false);
+                  abortControllerRef.current = null;
+                  return;
+                }
+                skipNextSkillParsingRef.current = true;
+                saveMessagesOnEarlyReturn();
+                const feedbackPrompt = resultType === "error" ? `\uB3C4\uAD6C "${toolName}" \uC2E4\uD589 \uC911 \uC624\uB958 \uBC1C\uC0DD: ${result.content}
+
+\uC0AC\uC6A9\uC790\uC5D0\uAC8C \uC624\uB958\uB97C \uC548\uB0B4\uD574\uC8FC\uC138\uC694. skill_use \uD0DC\uADF8\uB294 \uC0AC\uC6A9\uD558\uC9C0 \uB9C8\uC138\uC694.` : `\uB3C4\uAD6C "${toolName}" \uACB0\uACFC:
+
+${result.content}
+
+\uC704 \uACB0\uACFC\uB97C \uBC14\uD0D5\uC73C\uB85C \uB2F5\uBCC0\uD574\uC8FC\uC138\uC694. skill_use \uD0DC\uADF8\uB294 \uC0AC\uC6A9\uD558\uC9C0 \uB9C8\uC138\uC694.`;
+                setTimeout(() => {
+                  sendMessage(feedbackPrompt, { hiddenUserMessage: true });
+                }, 100);
+                setIsLoading(false);
+                abortControllerRef.current = null;
+                return;
+              }
               setSessions(
                 (prev) => prev.map((s) => {
                   if (s.id !== capturedSessionId) return s;
@@ -3036,7 +3130,7 @@ ${attachmentContext}
                       if (m.id !== assistantMessageId) return m;
                       return {
                         ...m,
-                        contentParts: parts,
+                        sources: result.sources || m.sources,
                         skillExecution: {
                           ...m.skillExecution,
                           status: "done",
@@ -3047,18 +3141,18 @@ ${attachmentContext}
                   };
                 })
               );
-              if (resultType === "image" || resultType === "file") {
+              if (streamedReport) {
                 saveMessagesOnEarlyReturn();
                 setIsLoading(false);
                 abortControllerRef.current = null;
                 return;
               }
-              let shouldContinue = continueAfterToolResult;
+              let shouldContinueSkill = continueAfterToolResult;
               if (onSkillCompleteRef.current) {
-                const decision = onSkillCompleteRef.current(toolName, result);
-                shouldContinue = decision === "continue";
+                const decision = onSkillCompleteRef.current(detectedSkill.name, result);
+                shouldContinueSkill = decision === "continue";
               }
-              if (!shouldContinue) {
+              if (!shouldContinueSkill) {
                 saveMessagesOnEarlyReturn();
                 setIsLoading(false);
                 abortControllerRef.current = null;
@@ -3066,70 +3160,18 @@ ${attachmentContext}
               }
               skipNextSkillParsingRef.current = true;
               saveMessagesOnEarlyReturn();
-              const feedbackPrompt = resultType === "error" ? `\uB3C4\uAD6C "${toolName}" \uC2E4\uD589 \uC911 \uC624\uB958 \uBC1C\uC0DD: ${result.content}
-
-\uC0AC\uC6A9\uC790\uC5D0\uAC8C \uC624\uB958\uB97C \uC548\uB0B4\uD574\uC8FC\uC138\uC694. skill_use \uD0DC\uADF8\uB294 \uC0AC\uC6A9\uD558\uC9C0 \uB9C8\uC138\uC694.` : `\uB3C4\uAD6C "${toolName}" \uACB0\uACFC:
+              const resultPrompt = `\uC2A4\uD0AC "${detectedSkill.name}" \uC2E4\uD589 \uACB0\uACFC:
 
 ${result.content}
 
-\uC704 \uACB0\uACFC\uB97C \uBC14\uD0D5\uC73C\uB85C \uB2F5\uBCC0\uD574\uC8FC\uC138\uC694. skill_use \uD0DC\uADF8\uB294 \uC0AC\uC6A9\uD558\uC9C0 \uB9C8\uC138\uC694.`;
+\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(feedbackPrompt, { hiddenUserMessage: true });
+                sendMessage(resultPrompt, { hiddenUserMessage: true });
               }, 100);
               setIsLoading(false);
               abortControllerRef.current = null;
               return;
             }
-            setSessions(
-              (prev) => prev.map((s) => {
-                if (s.id !== capturedSessionId) return s;
-                return {
-                  ...s,
-                  messages: s.messages.map((m) => {
-                    if (m.id !== assistantMessageId) return m;
-                    return {
-                      ...m,
-                      sources: result.sources || m.sources,
-                      skillExecution: {
-                        ...m.skillExecution,
-                        status: "done",
-                        result
-                      }
-                    };
-                  })
-                };
-              })
-            );
-            if (streamedReport) {
-              saveMessagesOnEarlyReturn();
-              setIsLoading(false);
-              abortControllerRef.current = null;
-              return;
-            }
-            let shouldContinueSkill = continueAfterToolResult;
-            if (onSkillCompleteRef.current) {
-              const decision = onSkillCompleteRef.current(detectedSkill.name, result);
-              shouldContinueSkill = decision === "continue";
-            }
-            if (!shouldContinueSkill) {
-              saveMessagesOnEarlyReturn();
-              setIsLoading(false);
-              abortControllerRef.current = null;
-              return;
-            }
-            skipNextSkillParsingRef.current = true;
-            saveMessagesOnEarlyReturn();
-            const resultPrompt = `\uC2A4\uD0AC "${detectedSkill.name}" \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);
-            setIsLoading(false);
-            abortControllerRef.current = null;
-            return;
           }
         }
       }
@@ -9730,7 +9772,8 @@ var MessageList = ({
   onPollSubmit,
   onChecklistAbort,
   onChecklistRetry,
-  onChecklistSkip
+  onChecklistSkip,
+  activeSkillExecution
 }) => {
   const messagesEndRef = (0, import_react18.useRef)(null);
   const containerRef = (0, import_react18.useRef)(null);
@@ -9852,6 +9895,61 @@ var MessageList = ({
                   message.id
                 );
               }),
+              activeSkillExecution && activeSkillExecution.status === "executing" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                    padding: "12px 20px",
+                    margin: "8px auto",
+                    maxWidth: "680px",
+                    width: "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: "20px",
+                          height: "20px",
+                          borderRadius: "50%",
+                          border: "2px solid var(--chatllm-primary, #3584FA)",
+                          borderTopColor: "transparent",
+                          animation: "chatllm-spin 0.8s linear infinite",
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          fontWeight: 500,
+                          color: "var(--chatllm-text-muted, #94a3b8)"
+                        },
+                        children: activeSkillExecution.progress?.phaseLabel || `${activeSkillExecution.skillName} \uC2E4\uD589 \uC911...`
+                      }
+                    ),
+                    activeSkillExecution.progress?.percentage != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          color: "var(--chatllm-primary, #3584FA)",
+                          fontWeight: 600
+                        },
+                        children: [
+                          activeSkillExecution.progress.percentage,
+                          "%"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: messagesEndRef })
             ]
           }
@@ -12011,7 +12109,8 @@ var ChatUIView = ({
                     onPollSubmit: handlePollSubmit,
                     onChecklistAbort: handleChecklistAbort,
                     onChecklistRetry: handleChecklistRetry,
-                    onChecklistSkip: handleChecklistSkip
+                    onChecklistSkip: handleChecklistSkip,
+                    activeSkillExecution
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(