@gendive/chatllm 0.17.15 → 0.17.17

package/dist/react/index.js

@@ -2585,6 +2585,8 @@ ${finalContent}`;
     }
     abortControllerRef.current = new AbortController();
     try {
+      const shouldSkipSkillParsing = skipNextSkillParsingRef.current;
+      skipNextSkillParsingRef.current = false;
       let messagesToSend = [...existingMessages, userMessage];
       const recompressionThreshold = DEFAULT_RECOMPRESSION_THRESHOLD;
       const tokenLimit = DEFAULT_TOKEN_LIMIT;
@@ -2648,11 +2650,12 @@ ${part.result.content}`).join("\n\n");
         if (attachmentContext) {
           chatMessages.push({
             role: "user",
-            content: `\uD30C\uC77C \uBD84\uC11D \uACB0\uACFC:
+            /** @Todo vibecode - 원본 파일 재요청 방지 + skill_use 태그 사용 금지 명시 */
+            content: `\uC0AC\uC6A9\uC790\uAC00 \uCCA8\uBD80\uD55C \uD30C\uC77C\uC758 \uBD84\uC11D \uACB0\uACFC\uC785\uB2C8\uB2E4. \uC6D0\uBCF8 \uD30C\uC77C \uB0B4\uC6A9\uC774 \uC774\uBBF8 \uC544\uB798\uC5D0 \uD3EC\uD568\uB418\uC5B4 \uC788\uC73C\uBBC0\uB85C \uC6D0\uBCF8 \uD30C\uC77C\uC744 \uB2E4\uC2DC \uC694\uCCAD\uD558\uC9C0 \uB9C8\uC138\uC694.
 
 ${attachmentContext}
 
-\uC704 \uACB0\uACFC\uB97C \uCC38\uACE0\uD558\uC5EC \uB2F5\uBCC0\uD574\uC8FC\uC138\uC694.`
+\uC704 \uBD84\uC11D \uACB0\uACFC\uB9CC\uC73C\uB85C \uC0AC\uC6A9\uC790\uC758 \uC9C8\uBB38\uC5D0 \uB2F5\uBCC0\uD574\uC8FC\uC138\uC694. skill_use \uD0DC\uADF8\uB294 \uC0AC\uC6A9\uD558\uC9C0 \uB9C8\uC138\uC694.`
           });
         }
       }
@@ -2746,7 +2749,7 @@ ${attachmentContext}
             const thinking = parsed.message?.thinking || "";
             if (content2 || thinking) {
               if (content2) accumulatedContent += content2;
-              if (!skipNextSkillParsingRef.current && accumulatedContent.includes("</skill_use>")) {
+              if (!shouldSkipSkillParsing && accumulatedContent.includes("</skill_use>")) {
                 const endIdx = accumulatedContent.indexOf("</skill_use>");
                 accumulatedContent = accumulatedContent.substring(0, endIdx + "</skill_use>".length);
                 skillTagDetected = true;
@@ -2813,7 +2816,7 @@ ${attachmentContext}
         } catch {
         }
       }
-      if (!skipNextSkillParsingRef.current) {
+      if (!shouldSkipSkillParsing) {
         const assistantContent = accumulatedContent;
         const { skillCall: detectedSkill, cleanContent: skillCleanContent } = parseSkillCallFromContent(assistantContent);
         if (detectedSkill && resolvedSkills[detectedSkill.name]) {
@@ -2994,8 +2997,6 @@ ${result.content}
             return;
           }
         }
-      } else {
-        skipNextSkillParsingRef.current = false;
       }
       setSessions(
         (prev) => prev.map((s) => {
@@ -6512,7 +6513,12 @@ var MarkdownRenderer = ({
       processedContent = processedContent.replace(UNCLOSED_THINKING_TAG_REGEX, "");
     }
     processedContent = processedContent.replace(/<poll[^>]*>[\s\S]*?<\/poll>/gi, "");
+    const hasUnfinishedPoll = UNCLOSED_POLL_TAG_REGEX.test(processedContent);
+    UNCLOSED_POLL_TAG_REGEX.lastIndex = 0;
     processedContent = processedContent.replace(UNCLOSED_POLL_TAG_REGEX, "");
+    if (hasUnfinishedPoll) {
+      processedContent += "\n\xA7POLL_LOADING\xA7";
+    }
     processedContent = processedContent.replace(UNCLOSED_SKILL_TAG_REGEX, "");
     const codeBlocks = [];
     processedContent = processedContent.replace(CODE_BLOCK_REGEX, (match, lang, code) => {
@@ -6648,6 +6654,46 @@ var MarkdownRenderer = ({
         );
         return;
       }
+      if (line.trim() === "\xA7POLL_LOADING\xA7") {
+        flushList();
+        flushBlockquote();
+        elements.push(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                padding: "14px 16px",
+                backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+                borderRadius: "10px",
+                border: "1px solid var(--chatllm-border, #e5e7eb)",
+                marginTop: "12px",
+                animation: "chatllm-pulse 1.5s ease-in-out infinite"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: "18px",
+                      height: "18px",
+                      borderRadius: "50%",
+                      border: "2px solid var(--chatllm-primary, #4A90E2)",
+                      borderTopColor: "transparent",
+                      animation: "chatllm-spin 0.8s linear infinite"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #64748b)" }, children: "\uC120\uD0DD\uC9C0\uB97C \uC900\uBE44\uD558\uACE0 \uC788\uC5B4\uC694..." })
+              ]
+            },
+            `poll-loading-${lineIndex}`
+          )
+        );
+        return;
+      }
       const codeBlockMatch = line.match(/§CODEBLOCK§(\d+)§\/CODEBLOCK§/);
       if (codeBlockMatch) {
         flushList();
@@ -7215,6 +7261,26 @@ var PollCard = ({
   const currentHasSelection = getSelectionCount(currentQuestion.id) > 0;
   const isLastTab = activeTab === questions.length - 1;
   const totalSelected = questions.reduce((sum, q) => sum + getSelectionCount(q.id), 0);
+  const [visibleCount, setVisibleCount] = (0, import_react13.useState)(0);
+  const [cardVisible, setCardVisible] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
+    const fadeTimer = setTimeout(() => setCardVisible(true), 50);
+    const totalItems = currentQuestion.options.length + 1;
+    const timers = [fadeTimer];
+    for (let i = 1; i <= totalItems; i++) {
+      timers.push(setTimeout(() => setVisibleCount(i), 150 + i * 80));
+    }
+    return () => timers.forEach(clearTimeout);
+  }, [currentQuestion.options.length]);
+  (0, import_react13.useEffect)(() => {
+    setVisibleCount(0);
+    const totalItems = currentQuestion.options.length + 1;
+    const timers = [];
+    for (let i = 1; i <= totalItems; i++) {
+      timers.push(setTimeout(() => setVisibleCount(i), i * 80));
+    }
+    return () => timers.forEach(clearTimeout);
+  }, [activeTab, currentQuestion.options.length]);
   const handleNext = (0, import_react13.useCallback)(() => {
     if (!isLastTab) {
       setActiveTab((prev) => prev + 1);
@@ -7231,6 +7297,9 @@ var PollCard = ({
         borderRadius: "12px",
         border: "1px solid var(--chatllm-border, #e5e7eb)",
         overflow: "hidden",
+        opacity: cardVisible ? 1 : 0,
+        transform: cardVisible ? "translateY(0)" : "translateY(8px)",
+        transition: "opacity 0.3s ease, transform 0.3s ease",
         marginTop: "12px"
       },
       children: [
@@ -7312,8 +7381,9 @@ var PollCard = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "8px" }, children: [
-          currentQuestion.options.map((option) => {
+          currentQuestion.options.map((option, optIdx) => {
             const isSelected = selections[currentQuestion.id]?.has(option.id) || false;
+            const isVisible = optIdx < visibleCount;
             return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "button",
               {
@@ -7329,8 +7399,10 @@ var PollCard = ({
                   borderRadius: "8px",
                   cursor: "pointer",
                   textAlign: "left",
-                  transition: "all 0.15s ease",
-                  marginBottom: "6px"
+                  transition: "all 0.2s ease",
+                  marginBottom: "6px",
+                  opacity: isVisible ? 1 : 0,
+                  transform: isVisible ? "translateY(0)" : "translateY(6px)"
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -7383,68 +7455,73 @@ var PollCard = ({
               option.id
             );
           }),
-          currentQuestion.allowOther !== false && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-              "button",
-              {
-                onClick: () => handleOtherToggle(currentQuestion.id, currentQuestion.multiSelect ?? false),
-                style: {
-                  width: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "12px",
-                  padding: "12px 14px",
-                  backgroundColor: otherSelected[currentQuestion.id] ? "var(--chatllm-primary-light, rgba(74, 144, 226, 0.08))" : "transparent",
-                  border: otherSelected[currentQuestion.id] ? "1px solid var(--chatllm-primary, #4A90E2)" : "1px solid var(--chatllm-border, #e5e7eb)",
-                  borderRadius: "8px",
-                  cursor: "pointer",
-                  textAlign: "left",
-                  transition: "all 0.15s ease"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "div",
-                    {
-                      style: {
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: currentQuestion.multiSelect ? "4px" : "50%",
-                        border: `2px solid ${otherSelected[currentQuestion.id] ? "var(--chatllm-primary, #4A90E2)" : "var(--chatllm-border, #d1d5db)"}`,
-                        backgroundColor: otherSelected[currentQuestion.id] ? "var(--chatllm-primary, #4A90E2)" : "transparent",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        flexShrink: 0,
-                        transition: "all 0.15s ease"
-                      },
-                      children: otherSelected[currentQuestion.id] && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconSvg, { name: "check-line", size: 14, color: "#fff" })
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "14px", color: "var(--chatllm-text-muted, #64748b)" }, children: "\uAE30\uD0C0" })
-                ]
-              }
-            ),
-            otherSelected[currentQuestion.id] && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "8px 0 4px 32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              "input",
-              {
-                type: "text",
-                value: otherTexts[currentQuestion.id] || "",
-                onChange: (e) => setOtherTexts((prev) => ({ ...prev, [currentQuestion.id]: e.target.value })),
-                placeholder: "\uC9C1\uC811 \uC785\uB825...",
-                style: {
-                  width: "100%",
-                  padding: "10px 12px",
-                  backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
-                  border: "1px solid var(--chatllm-border, #e5e7eb)",
-                  borderRadius: "6px",
-                  color: "var(--chatllm-text, #1e293b)",
-                  fontSize: "13px",
-                  outline: "none"
-                },
-                autoFocus: true
-              }
-            ) })
-          ] })
+          currentQuestion.allowOther !== false && (() => {
+            const otherVisible = currentQuestion.options.length < visibleCount;
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "button",
+                {
+                  onClick: () => handleOtherToggle(currentQuestion.id, currentQuestion.multiSelect ?? false),
+                  style: {
+                    width: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "12px",
+                    padding: "12px 14px",
+                    backgroundColor: otherSelected[currentQuestion.id] ? "var(--chatllm-primary-light, rgba(74, 144, 226, 0.08))" : "transparent",
+                    border: otherSelected[currentQuestion.id] ? "1px solid var(--chatllm-primary, #4A90E2)" : "1px solid var(--chatllm-border, #e5e7eb)",
+                    borderRadius: "8px",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    transition: "all 0.2s ease",
+                    opacity: otherVisible ? 1 : 0,
+                    transform: otherVisible ? "translateY(0)" : "translateY(6px)"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: "20px",
+                          height: "20px",
+                          borderRadius: currentQuestion.multiSelect ? "4px" : "50%",
+                          border: `2px solid ${otherSelected[currentQuestion.id] ? "var(--chatllm-primary, #4A90E2)" : "var(--chatllm-border, #d1d5db)"}`,
+                          backgroundColor: otherSelected[currentQuestion.id] ? "var(--chatllm-primary, #4A90E2)" : "transparent",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0,
+                          transition: "all 0.15s ease"
+                        },
+                        children: otherSelected[currentQuestion.id] && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconSvg, { name: "check-line", size: 14, color: "#fff" })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "14px", color: "var(--chatllm-text-muted, #64748b)" }, children: "\uAE30\uD0C0" })
+                  ]
+                }
+              ),
+              otherSelected[currentQuestion.id] && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "8px 0 4px 32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "input",
+                {
+                  type: "text",
+                  value: otherTexts[currentQuestion.id] || "",
+                  onChange: (e) => setOtherTexts((prev) => ({ ...prev, [currentQuestion.id]: e.target.value })),
+                  placeholder: "\uC9C1\uC811 \uC785\uB825...",
+                  style: {
+                    width: "100%",
+                    padding: "10px 12px",
+                    backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+                    border: "1px solid var(--chatllm-border, #e5e7eb)",
+                    borderRadius: "6px",
+                    color: "var(--chatllm-text, #1e293b)",
+                    fontSize: "13px",
+                    outline: "none"
+                  },
+                  autoFocus: true
+                }
+              ) })
+            ] });
+          })()
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",