@copilotkit/react-ui 1.7.2-next.1 → 1.8.0-next.3

package/dist/chunk-FBYETUFL.mjs

@@ -0,0 +1,118 @@
+import {
+  Markdown
+} from "./chunk-XNQO5AZZ.mjs";
+import {
+  useChatContext
+} from "./chunk-5JY5QJ2W.mjs";
+import {
+  CopyIcon,
+  RegenerateIcon,
+  ThumbsDownIcon,
+  ThumbsUpIcon
+} from "./chunk-ORSMX3SE.mjs";
+
+// src/components/chat/messages/AssistantMessage.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AssistantMessage = (props) => {
+  const { icons, labels } = useChatContext();
+  const {
+    message,
+    isLoading,
+    subComponent,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+    isCurrentMessage
+  } = props;
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    if (message && onCopy) {
+      navigator.clipboard.writeText(message);
+      setCopied(true);
+      onCopy(message);
+      setTimeout(() => setCopied(false), 2e3);
+    } else if (message) {
+      navigator.clipboard.writeText(message);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  const handleRegenerate = () => {
+    if (onRegenerate) {
+      onRegenerate();
+    }
+  };
+  const handleThumbsUp = () => {
+    if (onThumbsUp && message) {
+      onThumbsUp(message);
+    }
+  };
+  const handleThumbsDown = () => {
+    if (onThumbsDown && message) {
+      onThumbsDown(message);
+    }
+  };
+  const LoadingIcon = () => /* @__PURE__ */ jsx("span", { children: icons.activityIcon });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (message || isLoading) && /* @__PURE__ */ jsxs("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
+      message && /* @__PURE__ */ jsx(Markdown, { content: message || "" }),
+      isLoading && /* @__PURE__ */ jsx(LoadingIcon, {}),
+      message && !isLoading && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleRegenerate,
+                "aria-label": labels.regenerateResponse,
+                title: labels.regenerateResponse,
+                children: RegenerateIcon
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleCopy,
+                "aria-label": labels.copyToClipboard,
+                title: labels.copyToClipboard,
+                children: copied ? /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: "\u2713" }) : CopyIcon
+              }
+            ),
+            onThumbsUp && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleThumbsUp,
+                "aria-label": labels.thumbsUp,
+                title: labels.thumbsUp,
+                children: ThumbsUpIcon
+              }
+            ),
+            onThumbsDown && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleThumbsDown,
+                "aria-label": labels.thumbsDown,
+                title: labels.thumbsDown,
+                children: ThumbsDownIcon
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: "0.5rem" }, children: subComponent })
+  ] });
+};
+
+export {
+  AssistantMessage
+};
+//# sourceMappingURL=chunk-FBYETUFL.mjs.map

package/dist/chunk-FBYETUFL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/messages/AssistantMessage.tsx"],"sourcesContent":["import { AssistantMessageProps } from \"../props\";\nimport { useChatContext } from \"../ChatContext\";\nimport { Markdown } from \"../Markdown\";\nimport { RegenerateIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon } from \"../Icons\";\nimport { useState } from \"react\";\n\nexport const AssistantMessage = (props: AssistantMessageProps) => {\n  const { icons, labels } = useChatContext();\n  const {\n    message,\n    isLoading,\n    subComponent,\n    onRegenerate,\n    onCopy,\n    onThumbsUp,\n    onThumbsDown,\n    isCurrentMessage,\n  } = props;\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    if (message && onCopy) {\n      navigator.clipboard.writeText(message);\n      setCopied(true);\n      onCopy(message);\n      setTimeout(() => setCopied(false), 2000);\n    } else if (message) {\n      navigator.clipboard.writeText(message);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  const handleRegenerate = () => {\n    if (onRegenerate) {\n      onRegenerate();\n    }\n  };\n\n  const handleThumbsUp = () => {\n    if (onThumbsUp && message) {\n      onThumbsUp(message);\n    }\n  };\n\n  const handleThumbsDown = () => {\n    if (onThumbsDown && message) {\n      onThumbsDown(message);\n    }\n  };\n\n  const LoadingIcon = () => <span>{icons.activityIcon}</span>;\n\n  return (\n    <>\n      {(message || isLoading) && (\n        <div className=\"copilotKitMessage copilotKitAssistantMessage\">\n          {message && <Markdown content={message || \"\"} />}\n          {isLoading && <LoadingIcon />}\n\n          {message && !isLoading && (\n            <div\n              className={`copilotKitMessageControls ${isCurrentMessage ? \"currentMessage\" : \"\"}`}\n            >\n              <button\n                className=\"copilotKitMessageControlButton\"\n                onClick={handleRegenerate}\n                aria-label={labels.regenerateResponse}\n                title={labels.regenerateResponse}\n              >\n                {RegenerateIcon}\n              </button>\n              <button\n                className=\"copilotKitMessageControlButton\"\n                onClick={handleCopy}\n                aria-label={labels.copyToClipboard}\n                title={labels.copyToClipboard}\n              >\n                {copied ? (\n                  <span style={{ fontSize: \"10px\", fontWeight: \"bold\" }}>✓</span>\n                ) : (\n                  CopyIcon\n                )}\n              </button>\n              {onThumbsUp && (\n                <button\n                  className=\"copilotKitMessageControlButton\"\n                  onClick={handleThumbsUp}\n                  aria-label={labels.thumbsUp}\n                  title={labels.thumbsUp}\n                >\n                  {ThumbsUpIcon}\n                </button>\n              )}\n              {onThumbsDown && (\n                <button\n                  className=\"copilotKitMessageControlButton\"\n                  onClick={handleThumbsDown}\n                  aria-label={labels.thumbsDown}\n                  title={labels.thumbsDown}\n                >\n                  {ThumbsDownIcon}\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      <div style={{ marginBottom: \"0.5rem\" }}>{subComponent}</div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAIA,SAAS,gBAAgB;AA+CG,SAGxB,UAHwB,KAUhB,YAVgB;AA7CrB,IAAM,mBAAmB,CAAC,UAAiC;AAChE,QAAM,EAAE,OAAO,OAAO,IAAI,eAAe;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,aAAa,MAAM;AACvB,QAAI,WAAW,QAAQ;AACrB,gBAAU,UAAU,UAAU,OAAO;AACrC,gBAAU,IAAI;AACd,aAAO,OAAO;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IACzC,WAAW,SAAS;AAClB,gBAAU,UAAU,UAAU,OAAO;AACrC,gBAAU,IAAI;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,QAAI,cAAc;AAChB,mBAAa;AAAA,IACf;AAAA,EACF;AAEA,QAAM,iBAAiB,MAAM;AAC3B,QAAI,cAAc,SAAS;AACzB,iBAAW,OAAO;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,QAAI,gBAAgB,SAAS;AAC3B,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,cAAc,MAAM,oBAAC,UAAM,gBAAM,cAAa;AAEpD,SACE,iCACI;AAAA,gBAAW,cACX,qBAAC,SAAI,WAAU,gDACZ;AAAA,iBAAW,oBAAC,YAAS,SAAS,WAAW,IAAI;AAAA,MAC7C,aAAa,oBAAC,eAAY;AAAA,MAE1B,WAAW,CAAC,aACX;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,6BAA6B,mBAAmB,mBAAmB;AAAA,UAE9E;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAY,OAAO;AAAA,gBACnB,OAAO,OAAO;AAAA,gBAEb;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAY,OAAO;AAAA,gBACnB,OAAO,OAAO;AAAA,gBAEb,mBACC,oBAAC,UAAK,OAAO,EAAE,UAAU,QAAQ,YAAY,OAAO,GAAG,oBAAC,IAExD;AAAA;AAAA,YAEJ;AAAA,YACC,cACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAY,OAAO;AAAA,gBACnB,OAAO,OAAO;AAAA,gBAEb;AAAA;AAAA,YACH;AAAA,YAED,gBACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAY,OAAO;AAAA,gBACnB,OAAO,OAAO;AAAA,gBAEb;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MAEJ;AAAA,OAEJ;AAAA,IAEF,oBAAC,SAAI,OAAO,EAAE,cAAc,SAAS,GAAI,wBAAa;AAAA,KACxD;AAEJ;","names":[]}

package/dist/chunk-GDJAAFIK.mjs

@@ -0,0 +1,24 @@
+import {
+  CopilotDevConsole
+} from "./chunk-QGK5GOSC.mjs";
+import {
+  useChatContext
+} from "./chunk-5JY5QJ2W.mjs";
+
+// src/components/chat/Header.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Header = ({}) => {
+  const { setOpen, icons, labels } = useChatContext();
+  return /* @__PURE__ */ jsxs("div", { className: "copilotKitHeader", children: [
+    /* @__PURE__ */ jsx("div", { children: labels.title }),
+    /* @__PURE__ */ jsxs("div", { className: "copilotKitHeaderControls", children: [
+      /* @__PURE__ */ jsx(CopilotDevConsole, {}),
+      /* @__PURE__ */ jsx("button", { onClick: () => setOpen(false), "aria-label": "Close", children: icons.headerCloseIcon })
+    ] })
+  ] });
+};
+
+export {
+  Header
+};
+//# sourceMappingURL=chunk-GDJAAFIK.mjs.map

package/dist/chunk-GDJAAFIK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Header.tsx"],"sourcesContent":["import { HeaderProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport { CopilotDevConsole } from \"../dev-console\";\nimport React from \"react\";\n\nexport const Header = ({}: HeaderProps) => {\n  const { setOpen, icons, labels } = useChatContext();\n\n  return (\n    <div className=\"copilotKitHeader\">\n      <div>{labels.title}</div>\n      <div className=\"copilotKitHeaderControls\">\n        <CopilotDevConsole />\n        <button onClick={() => setOpen(false)} aria-label=\"Close\">\n          {icons.headerCloseIcon}\n        </button>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAUM,cACA,YADA;AALC,IAAM,SAAS,CAAC,CAAC,MAAmB;AACzC,QAAM,EAAE,SAAS,OAAO,OAAO,IAAI,eAAe;AAElD,SACE,qBAAC,SAAI,WAAU,oBACb;AAAA,wBAAC,SAAK,iBAAO,OAAM;AAAA,IACnB,qBAAC,SAAI,WAAU,4BACb;AAAA,0BAAC,qBAAkB;AAAA,MACnB,oBAAC,YAAO,SAAS,MAAM,QAAQ,KAAK,GAAG,cAAW,SAC/C,gBAAM,iBACT;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/{chunk-6FTRYYR5.mjs → chunk-GJME6MK4.mjs}

@@ -1,6 +1,6 @@
 import {
   useChatContext
-} from "./chunk-CBBFRI3Q.mjs";
+} from "./chunk-5JY5QJ2W.mjs";
 
 // src/components/chat/Messages.tsx
 import { useEffect, useMemo, useRef } from "react";
@@ -16,7 +16,11 @@ var Messages = ({
   RenderAgentStateMessage,
   RenderResultMessage,
   AssistantMessage,
-  UserMessage
+  UserMessage,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown
 }) => {
   const context = useChatContext();
   const initialMessages = useMemo(
@@ -39,65 +43,71 @@ var Messages = ({
   const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);
   const interrupt = useLangGraphInterruptRender();
   return /* @__PURE__ */ jsxs("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
-    messages.map((message, index) => {
-      const isCurrentMessage = index === messages.length - 1;
-      if (message.isTextMessage()) {
-        return /* @__PURE__ */ jsx(
-          RenderTextMessage,
-          {
-            message,
-            inProgress,
-            index,
-            isCurrentMessage,
-            AssistantMessage,
-            UserMessage
-          },
-          index
-        );
-      } else if (message.isActionExecutionMessage()) {
-        return /* @__PURE__ */ jsx(
-          RenderActionExecutionMessage,
-          {
-            message,
-            inProgress,
-            index,
-            isCurrentMessage,
-            actionResult: actionResults[message.id],
-            AssistantMessage,
-            UserMessage
-          },
-          index
-        );
-      } else if (message.isAgentStateMessage()) {
-        return /* @__PURE__ */ jsx(
-          RenderAgentStateMessage,
-          {
-            message,
-            inProgress,
-            index,
-            isCurrentMessage,
-            AssistantMessage,
-            UserMessage
-          },
-          index
-        );
-      } else if (message.isResultMessage()) {
-        return /* @__PURE__ */ jsx(
-          RenderResultMessage,
-          {
-            message,
-            inProgress,
-            index,
-            isCurrentMessage,
-            AssistantMessage,
-            UserMessage
-          },
-          index
-        );
-      }
-    }),
-    interrupt,
-    /* @__PURE__ */ jsx("footer", { ref: messagesEndRef, children })
+    /* @__PURE__ */ jsxs("div", { className: "copilotKitMessagesContainer", children: [
+      messages.map((message, index) => {
+        const isCurrentMessage = index === messages.length - 1;
+        if (message.isTextMessage()) {
+          return /* @__PURE__ */ jsx(
+            RenderTextMessage,
+            {
+              message,
+              inProgress,
+              index,
+              isCurrentMessage,
+              AssistantMessage,
+              UserMessage,
+              onRegenerate,
+              onCopy,
+              onThumbsUp,
+              onThumbsDown
+            },
+            index
+          );
+        } else if (message.isActionExecutionMessage()) {
+          return /* @__PURE__ */ jsx(
+            RenderActionExecutionMessage,
+            {
+              message,
+              inProgress,
+              index,
+              isCurrentMessage,
+              actionResult: actionResults[message.id],
+              AssistantMessage,
+              UserMessage
+            },
+            index
+          );
+        } else if (message.isAgentStateMessage()) {
+          return /* @__PURE__ */ jsx(
+            RenderAgentStateMessage,
+            {
+              message,
+              inProgress,
+              index,
+              isCurrentMessage,
+              AssistantMessage,
+              UserMessage
+            },
+            index
+          );
+        } else if (message.isResultMessage()) {
+          return /* @__PURE__ */ jsx(
+            RenderResultMessage,
+            {
+              message,
+              inProgress,
+              index,
+              isCurrentMessage,
+              AssistantMessage,
+              UserMessage
+            },
+            index
+          );
+        }
+      }),
+      interrupt
+    ] }),
+    /* @__PURE__ */ jsx("footer", { className: "copilotKitMessagesFooter", ref: messagesEndRef, children })
   ] });
 };
 function makeInitialMessages(initial) {
@@ -180,4 +190,4 @@ export {
   Messages,
   useScrollToBottom
 };
-//# sourceMappingURL=chunk-6FTRYYR5.mjs.map
+//# sourceMappingURL=chunk-GJME6MK4.mjs.map

package/dist/chunk-GJME6MK4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Messages.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport { Message, ResultMessage, TextMessage, Role } from \"@copilotkit/runtime-client-gql\";\nimport { useLangGraphInterruptRender } from \"@copilotkit/react-core\";\n\nexport const Messages = ({\n  messages,\n  inProgress,\n  children,\n  RenderTextMessage,\n  RenderActionExecutionMessage,\n  RenderAgentStateMessage,\n  RenderResultMessage,\n  AssistantMessage,\n  UserMessage,\n  onRegenerate,\n  onCopy,\n  onThumbsUp,\n  onThumbsDown,\n}: MessagesProps) => {\n  const context = useChatContext();\n  const initialMessages = useMemo(\n    () => makeInitialMessages(context.labels.initial),\n    [context.labels.initial],\n  );\n\n  messages = [...initialMessages, ...messages];\n\n  const actionResults: Record<string, string> = {};\n\n  for (let i = 0; i < messages.length; i++) {\n    if (messages[i].isActionExecutionMessage()) {\n      const id = messages[i].id;\n      const resultMessage: ResultMessage | undefined = messages.find(\n        (message) => message.isResultMessage() && message.actionExecutionId === id,\n      ) as ResultMessage | undefined;\n\n      if (resultMessage) {\n        actionResults[id] = ResultMessage.decodeResult(resultMessage.result || \"\");\n      }\n    }\n  }\n\n  const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);\n\n  const interrupt = useLangGraphInterruptRender();\n\n  return (\n    <div className=\"copilotKitMessages\" ref={messagesContainerRef}>\n      <div className=\"copilotKitMessagesContainer\">\n        {messages.map((message, index) => {\n          const isCurrentMessage = index === messages.length - 1;\n\n          if (message.isTextMessage()) {\n            return (\n              <RenderTextMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n                onRegenerate={onRegenerate}\n                onCopy={onCopy}\n                onThumbsUp={onThumbsUp}\n                onThumbsDown={onThumbsDown}\n              />\n            );\n          } else if (message.isActionExecutionMessage()) {\n            return (\n              <RenderActionExecutionMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                actionResult={actionResults[message.id]}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n              />\n            );\n          } else if (message.isAgentStateMessage()) {\n            return (\n              <RenderAgentStateMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n              />\n            );\n          } else if (message.isResultMessage()) {\n            return (\n              <RenderResultMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n              />\n            );\n          }\n        })}\n        {interrupt}\n      </div>\n      <footer className=\"copilotKitMessagesFooter\" ref={messagesEndRef}>\n        {children}\n      </footer>\n    </div>\n  );\n};\n\nfunction makeInitialMessages(initial?: string | string[]): Message[] {\n  let initialArray: string[] = [];\n  if (initial) {\n    if (Array.isArray(initial)) {\n      initialArray.push(...initial);\n    } else {\n      initialArray.push(initial);\n    }\n  }\n\n  return initialArray.map(\n    (message) =>\n      new TextMessage({\n        role: Role.Assistant,\n        content: message,\n      }),\n  );\n}\nexport function useScrollToBottom(messages: any[]) {\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const messagesContainerRef = useRef<HTMLDivElement | null>(null);\n  const isProgrammaticScrollRef = useRef(false);\n  const isUserScrollUpRef = useRef(false);\n\n  const scrollToBottom = () => {\n    if (messagesEndRef.current) {\n      isProgrammaticScrollRef.current = true;\n      messagesEndRef.current.scrollIntoView({\n        behavior: \"auto\",\n      });\n    }\n  };\n\n  const handleScroll = () => {\n    if (isProgrammaticScrollRef.current) {\n      isProgrammaticScrollRef.current = false;\n      return;\n    }\n\n    if (messagesContainerRef.current) {\n      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;\n      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;\n    }\n  };\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (container) {\n      container.addEventListener(\"scroll\", handleScroll);\n    }\n    return () => {\n      if (container) {\n        container.removeEventListener(\"scroll\", handleScroll);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const mutationObserver = new MutationObserver(() => {\n      if (!isUserScrollUpRef.current) {\n        scrollToBottom();\n      }\n    });\n\n    mutationObserver.observe(container, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    isUserScrollUpRef.current = false;\n    scrollToBottom();\n  }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);\n\n  return { messagesEndRef, messagesContainerRef };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-AZU4QOV5.mjs → chunk-KG6DW6R2.mjs}

@@ -1,33 +1,33 @@
 import {
   Window
-} from "./chunk-YAGE7RCE.mjs";
+} from "./chunk-CGVOCLHN.mjs";
 import {
   Header
-} from "./chunk-VEC45H6Q.mjs";
+} from "./chunk-GDJAAFIK.mjs";
 import {
   Button
-} from "./chunk-RQNJNK2W.mjs";
+} from "./chunk-VC4NO5QZ.mjs";
 import {
   CopilotChat
-} from "./chunk-2C3ANQCY.mjs";
+} from "./chunk-5GNYGURH.mjs";
+import {
+  AssistantMessage
+} from "./chunk-FBYETUFL.mjs";
 import {
   UserMessage
 } from "./chunk-HEIDCT7I.mjs";
-import {
-  AssistantMessage
-} from "./chunk-3VNMQWGT.mjs";
 import {
   Input
-} from "./chunk-QXTRFMPM.mjs";
+} from "./chunk-2LRE4W6A.mjs";
 import {
   Messages
-} from "./chunk-6FTRYYR5.mjs";
+} from "./chunk-GJME6MK4.mjs";
 import {
   ResponseButton
-} from "./chunk-3XAXY2Z3.mjs";
+} from "./chunk-UZTZXMYS.mjs";
 import {
   ChatContextProvider
-} from "./chunk-CBBFRI3Q.mjs";
+} from "./chunk-5JY5QJ2W.mjs";
 
 // src/components/chat/Modal.tsx
 import React from "react";
@@ -102,4 +102,4 @@ var CopilotModal = ({
 export {
   CopilotModal
 };
-//# sourceMappingURL=chunk-AZU4QOV5.mjs.map
+//# sourceMappingURL=chunk-KG6DW6R2.mjs.map

package/dist/{chunk-3PJA5MFR.mjs → chunk-LKCAF2HG.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-AZU4QOV5.mjs";
+} from "./chunk-KG6DW6R2.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -27,4 +27,4 @@ function CopilotSidebar(props) {
 export {
   CopilotSidebar
 };
-//# sourceMappingURL=chunk-3PJA5MFR.mjs.map
+//# sourceMappingURL=chunk-LKCAF2HG.mjs.map

package/dist/{chunk-ADTTDBLB.mjs → chunk-LXCH2BIB.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-AZU4QOV5.mjs";
+} from "./chunk-KG6DW6R2.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -18,4 +18,4 @@ function CopilotPopup(props) {
 export {
   CopilotPopup
 };
-//# sourceMappingURL=chunk-ADTTDBLB.mjs.map
+//# sourceMappingURL=chunk-LXCH2BIB.mjs.map

package/dist/chunk-MCO235PS.mjs

@@ -0,0 +1,164 @@
+import {
+  __spreadValues
+} from "./chunk-MRXNTQOX.mjs";
+
+// src/components/crew/DefaultStateRenderer.tsx
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DefaultExpandIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+  }
+);
+var DefaultCollapseIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
+  }
+);
+var DefaultLoaderIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: `${className} copilotkit-spinner`,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+  }
+);
+var formatContent = (result) => {
+  if (result === null || result === void 0)
+    return "";
+  return typeof result === "string" ? result : JSON.stringify(result, null, 2);
+};
+var DefaultSkeletonLoader = ({ className }) => /* @__PURE__ */ jsxs("div", { className: className || "copilotkit-skeleton", children: [
+  /* @__PURE__ */ jsxs("div", { className: "copilotkit-skeleton-header", children: [
+    /* @__PURE__ */ jsx("div", { className: "copilotkit-skeleton-title" }),
+    /* @__PURE__ */ jsx("div", { className: "copilotkit-skeleton-subtitle" })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "copilotkit-skeleton-content" })
+] });
+var DefaultStateItemRenderer = ({
+  item,
+  isNewest,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `${className || "copilotkit-state-item"} ${isNewest ? "copilotkit-state-item-newest" : ""}`,
+    children: [
+      /* @__PURE__ */ jsx("div", { className: "copilotkit-state-item-header", children: "tool" in item ? item.tool : item.name }),
+      "thought" in item && item.thought && /* @__PURE__ */ jsx("div", { className: "copilotkit-state-item-thought", children: item.thought }),
+      "result" in item && item.result !== void 0 && item.result !== null && /* @__PURE__ */ jsx("div", { className: "copilotkit-state-item-result", children: formatContent(item.result) }),
+      "description" in item && item.description && /* @__PURE__ */ jsx("div", { className: "copilotkit-state-item-description", children: item.description })
+    ]
+  }
+);
+var DefaultStateRenderer = ({
+  state,
+  status,
+  StateItemRenderer = DefaultStateItemRenderer,
+  SkeletonLoader = DefaultSkeletonLoader,
+  labels,
+  icons,
+  className = "copilotkit-state",
+  contentClassName = "copilotkit-state-content",
+  itemClassName = "copilotkit-state-item",
+  maxHeight = "250px",
+  defaultCollapsed = true
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const contentRef = useRef(null);
+  const prevItemsLengthRef = useRef(0);
+  const [newestItemId, setNewestItemId] = useState(null);
+  const defaultLabels = {
+    inProgressLabel: "Analyzing",
+    completeLabel: "Analyzed",
+    emptyLabel: "No activity"
+  };
+  const mergedLabels = __spreadValues(__spreadValues({}, defaultLabels), labels);
+  const ExpandIcon = (icons == null ? void 0 : icons.expand) || DefaultExpandIcon;
+  const CollapseIcon = (icons == null ? void 0 : icons.collapse) || DefaultCollapseIcon;
+  const items = useMemo(() => {
+    var _a;
+    return state ? [...((_a = state.steps) == null ? void 0 : _a.filter((s) => s.tool)) || [], ...state.tasks || []].sort(
+      (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+    ) : [];
+  }, [state]);
+  const isThinking = status === "inProgress" && items.length === 0;
+  useEffect(() => {
+    if (!state)
+      return;
+    if (items.length > prevItemsLengthRef.current) {
+      if (items.length > 0) {
+        const newest = items[items.length - 1];
+        setNewestItemId(newest.id);
+        setTimeout(() => {
+          setNewestItemId(null);
+        }, 1500);
+      }
+      if (contentRef.current && !isCollapsed) {
+        contentRef.current.scrollTop = contentRef.current.scrollHeight;
+      }
+    }
+    prevItemsLengthRef.current = items.length;
+  }, [items, isCollapsed, state]);
+  if (!state) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(DefaultLoaderIcon, { className: "copilotkit-loader" }) });
+  }
+  if (isCollapsed && items.length === 0 && !isThinking)
+    return null;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "copilotkit-state-header", onClick: () => setIsCollapsed(!isCollapsed), children: [
+      isCollapsed ? /* @__PURE__ */ jsx(ExpandIcon, { className: "copilotkit-icon" }) : /* @__PURE__ */ jsx(CollapseIcon, { className: "copilotkit-icon" }),
+      /* @__PURE__ */ jsx("div", { className: "copilotkit-state-label", children: status === "inProgress" ? /* @__PURE__ */ jsx("span", { className: "copilotkit-state-label-loading", children: mergedLabels.inProgressLabel }) : mergedLabels.completeLabel })
+    ] }),
+    !isCollapsed && /* @__PURE__ */ jsx("div", { ref: contentRef, className: contentClassName, style: { maxHeight }, children: items.length > 0 ? items.map((item) => /* @__PURE__ */ jsx(
+      StateItemRenderer,
+      {
+        item,
+        isNewest: item.id === newestItemId,
+        className: itemClassName
+      },
+      item.id
+    )) : isThinking ? (
+      // Show skeleton loader while thinking
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SkeletonLoader, {}),
+        /* @__PURE__ */ jsx(SkeletonLoader, {})
+      ] })
+    ) : (
+      // Empty state
+      /* @__PURE__ */ jsx("div", { className: "copilotkit-state-empty", children: mergedLabels.emptyLabel })
+    ) })
+  ] });
+};
+
+export {
+  DefaultStateRenderer
+};
+//# sourceMappingURL=chunk-MCO235PS.mjs.map

package/dist/chunk-MCO235PS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/crew/DefaultStateRenderer.tsx"],"sourcesContent":["/**\n * <br/>\n * A state renderer component for the CopilotKit framework. This component displays\n * the internal state of an agent, such as the steps it has taken and the tasks it has performed.\n * It provides a collapsible UI that shows the agent's thought process and actions.\n *\n * ## Install Dependencies\n *\n * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.\n *\n * ```shell npm2yarn \\\"@copilotkit/react-ui\"\\\n * npm install @copilotkit/react-core @copilotkit/react-ui\n * ```\n *\n * ## Usage\n *\n * ```tsx\n * import { DefaultStateRenderer } from \"@copilotkit/react-ui\";\n * import \"@copilotkit/react-ui/styles.css\";\n *\n * // Basic usage\n * <DefaultStateRenderer\n *   state={agentState}\n *   status=\"inProgress\"\n * />\n * ```\n *\n * ## Customization\n *\n * You can customize the appearance and behavior of the component:\n *\n * ```tsx\n * // Custom labels and styling\n * <DefaultStateRenderer\n *   state={agentState}\n *   status=\"inProgress\"\n *   labels={{\n *     inProgressLabel: \"Thinking...\",\n *     completeLabel: \"Finished processing\",\n *     emptyLabel: \"Nothing to show\"\n *   }}\n *   className=\"my-custom-state\"\n *   contentClassName=\"my-custom-content\"\n *   itemClassName=\"my-custom-item\"\n *   maxHeight=\"300px\"\n *   defaultCollapsed={false}\n * />\n *\n * // Custom renderers\n * <DefaultStateRenderer\n *   state={agentState}\n *   status=\"inProgress\"\n *   StateItemRenderer={({ item, isNewest, className }) => (\n *     <MyCustomItemRenderer item={item} isNewest={isNewest} className={className} />\n *   )}\n *   SkeletonLoader={({ className }) => (\n *     <MyCustomSkeletonLoader className={className} />\n *   )}\n * />\n * ```\n *\n * ### Look & Feel\n *\n * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:\n * ```tsx title=\"YourRootComponent.tsx\"\n * ...\n * import \"@copilotkit/react-ui/styles.css\"; // [!code highlight]\n *\n * export function YourRootComponent() {\n *   return (\n *     <CopilotKit>\n *       ...\n *     </CopilotKit>\n *   );\n * }\n * ```\n * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.\n */\n\nimport React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport {\n  AgentState,\n  StateRendererProps,\n  StateItemRendererProps,\n  SkeletonLoaderProps,\n  ToolStateItem,\n  TaskStateItem,\n  ResponseRendererIconProps,\n} from \"./types\";\n\n/**\n * Default expand icon component\n */\nconst DefaultExpandIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (\n  <svg\n    className={className}\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <polyline points=\"6 9 12 15 18 9\"></polyline>\n  </svg>\n);\n\n/**\n * Default collapse icon component\n */\nconst DefaultCollapseIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (\n  <svg\n    className={className}\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <polyline points=\"18 15 12 9 6 15\"></polyline>\n  </svg>\n);\n\n/**\n * Default loader icon component\n */\nconst DefaultLoaderIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (\n  <svg\n    className={`${className} copilotkit-spinner`}\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M21 12a9 9 0 1 1-6.219-8.56\"></path>\n  </svg>\n);\n\n/**\n * Helper to safely format content\n */\nconst formatContent = (result: unknown): string => {\n  if (result === null || result === undefined) return \"\";\n  return typeof result === \"string\" ? result : JSON.stringify(result, null, 2);\n};\n\n/**\n * Default skeleton loader component\n */\nconst DefaultSkeletonLoader: React.FC<SkeletonLoaderProps> = ({ className }) => (\n  <div className={className || \"copilotkit-skeleton\"}>\n    <div className=\"copilotkit-skeleton-header\">\n      <div className=\"copilotkit-skeleton-title\"></div>\n      <div className=\"copilotkit-skeleton-subtitle\"></div>\n    </div>\n    <div className=\"copilotkit-skeleton-content\"></div>\n  </div>\n);\n\n/**\n * Default state item renderer component\n */\nconst DefaultStateItemRenderer: React.FC<StateItemRendererProps> = ({\n  item,\n  isNewest,\n  className,\n}) => (\n  <div\n    className={`${className || \"copilotkit-state-item\"} ${isNewest ? \"copilotkit-state-item-newest\" : \"\"}`}\n  >\n    <div className=\"copilotkit-state-item-header\">{\"tool\" in item ? item.tool : item.name}</div>\n\n    {\"thought\" in item && item.thought && (\n      <div className=\"copilotkit-state-item-thought\">{item.thought}</div>\n    )}\n\n    {\"result\" in item && item.result !== undefined && item.result !== null && (\n      <div className=\"copilotkit-state-item-result\">{formatContent(item.result)}</div>\n    )}\n\n    {\"description\" in item && item.description && (\n      <div className=\"copilotkit-state-item-description\">{item.description}</div>\n    )}\n  </div>\n);\n\n/**\n * Default state renderer component\n */\nexport const DefaultStateRenderer: React.FC<StateRendererProps> = ({\n  state,\n  status,\n  StateItemRenderer = DefaultStateItemRenderer,\n  SkeletonLoader = DefaultSkeletonLoader,\n  labels,\n  icons,\n  className = \"copilotkit-state\",\n  contentClassName = \"copilotkit-state-content\",\n  itemClassName = \"copilotkit-state-item\",\n  maxHeight = \"250px\",\n  defaultCollapsed = true,\n}) => {\n  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const prevItemsLengthRef = useRef<number>(0);\n  const [newestItemId, setNewestItemId] = useState<string | null>(null);\n\n  // Default label values\n  const defaultLabels = {\n    inProgressLabel: \"Analyzing\",\n    completeLabel: \"Analyzed\",\n    emptyLabel: \"No activity\",\n  };\n\n  // Merge provided labels with defaults\n  const mergedLabels = { ...defaultLabels, ...labels };\n\n  // Decide which icon to display\n  const ExpandIcon = icons?.expand || DefaultExpandIcon;\n  const CollapseIcon = icons?.collapse || DefaultCollapseIcon;\n\n  // Safely compute derived values using useMemo\n  const items = useMemo(() => {\n    return state\n      ? [...(state.steps?.filter((s) => s.tool) || []), ...(state.tasks || [])].sort(\n          (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),\n        )\n      : [];\n  }, [state]);\n\n  // Determine if we should show skeleton UI (thinking but no items yet)\n  const isThinking = status === \"inProgress\" && items.length === 0;\n\n  // Track newest item and auto-scroll\n  useEffect(() => {\n    if (!state) return; // Skip effect if no state\n\n    // If new items were added\n    if (items.length > prevItemsLengthRef.current) {\n      // Get the newest item\n      if (items.length > 0) {\n        const newest = items[items.length - 1];\n        setNewestItemId(newest.id);\n\n        // Clear the animation after 1.5 seconds\n        setTimeout(() => {\n          setNewestItemId(null);\n        }, 1500);\n      }\n\n      // Auto-scroll to bottom\n      if (contentRef.current && !isCollapsed) {\n        contentRef.current.scrollTop = contentRef.current.scrollHeight;\n      }\n    }\n\n    prevItemsLengthRef.current = items.length;\n  }, [items, isCollapsed, state]);\n\n  // Early return for loading state with no state\n  if (!state) {\n    return (\n      <div className={className}>\n        <DefaultLoaderIcon className=\"copilotkit-loader\" />\n      </div>\n    );\n  }\n\n  // Don't render anything if collapsed and empty and not thinking\n  if (isCollapsed && items.length === 0 && !isThinking) return null;\n\n  return (\n    <div className={className}>\n      {/* Header with toggle */}\n      <div className=\"copilotkit-state-header\" onClick={() => setIsCollapsed(!isCollapsed)}>\n        {isCollapsed ? (\n          <ExpandIcon className=\"copilotkit-icon\" />\n        ) : (\n          <CollapseIcon className=\"copilotkit-icon\" />\n        )}\n        <div className=\"copilotkit-state-label\">\n          {status === \"inProgress\" ? (\n            <span className=\"copilotkit-state-label-loading\">{mergedLabels.inProgressLabel}</span>\n          ) : (\n            mergedLabels.completeLabel\n          )}\n        </div>\n      </div>\n\n      {/* Content area */}\n      {!isCollapsed && (\n        <div ref={contentRef} className={contentClassName} style={{ maxHeight }}>\n          {/* Render items if available */}\n          {items.length > 0 ? (\n            items.map((item) => (\n              <StateItemRenderer\n                key={item.id}\n                item={item}\n                isNewest={item.id === newestItemId}\n                className={itemClassName}\n              />\n            ))\n          ) : isThinking ? (\n            // Show skeleton loader while thinking\n            <>\n              <SkeletonLoader />\n              <SkeletonLoader />\n            </>\n          ) : (\n            // Empty state\n            <div className=\"copilotkit-state-empty\">{mergedLabels.emptyLabel}</div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-MWC5OV7Z.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-MWC5OV7Z.mjs.map

package/dist/chunk-N7LTE54T.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-N7LTE54T.mjs.map

package/dist/chunk-N7LTE54T.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}