@copilotkit/react-ui 1.5.11 → 1.5.12-next.1

package/dist/components/chat/messages/AssistantMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/chat/messages/AssistantMessage.tsx","../../../../src/components/chat/ChatContext.tsx","../../../../src/components/chat/Icons.tsx","../../../../src/components/chat/Markdown.tsx","../../../../src/components/chat/CodeBlock.tsx","../../../../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { AssistantMessageProps } from \"../props\";\nimport { useChatContext } from \"../ChatContext\";\nimport { Markdown } from \"../Markdown\";\n\nexport const AssistantMessage = (props: AssistantMessageProps) => {\n  const { icons } = useChatContext();\n  const { message, isLoading, subComponent } = props;\n\n  return (\n    <>\n      {(message || isLoading) && (\n        <div className=\"copilotKitMessage copilotKitAssistantMessage\">\n          {message && <Markdown content={message || \"\"} />}\n          {isLoading && icons.spinnerIcon}\n        </div>\n      )}\n      <div style={{ marginBottom: \"0.5rem\" }}>{subComponent}</div>\n    </>\n  );\n};\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[];\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string;\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string;\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"❌ An error occurred. Please try again.\"\n   */\n  error?: string;\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string;\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string;\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>;\n  icons: Required<CopilotChatIcons>;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext);\n  if (context === undefined) {\n    throw new Error(\n      \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n    );\n  }\n  return context;\n}\n\ninterface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels;\n  icons?: CopilotChatIcons;\n  children?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n  // temperature,\n  // instructions,\n  // maxFeedback,\n  labels,\n  icons,\n  children,\n  open,\n  setOpen,\n}: ChatContextProps) => {\n  const memoizedLabels = useMemo(\n    () => ({\n      ...{\n        initial: \"\",\n        title: \"CopilotKit\",\n        placeholder: \"Type a message...\",\n        error: \"❌ An error occurred. Please try again.\",\n        stopGenerating: \"Stop generating\",\n        regenerateResponse: \"Regenerate response\",\n      },\n      ...labels,\n    }),\n    [labels],\n  );\n\n  const memoizedIcons = useMemo(\n    () => ({\n      ...{\n        openIcon: DefaultIcons.OpenIcon,\n        closeIcon: DefaultIcons.CloseIcon,\n        headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n        sendIcon: DefaultIcons.SendIcon,\n        activityIcon: DefaultIcons.ActivityIcon,\n        spinnerIcon: DefaultIcons.SpinnerIcon,\n        stopIcon: DefaultIcons.StopIcon,\n        regenerateIcon: DefaultIcons.RegenerateIcon,\n        pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n      },\n      ...icons,\n    }),\n    [icons],\n  );\n\n  const context = useMemo(\n    () => ({\n      labels: memoizedLabels,\n      icons: memoizedIcons,\n      open,\n      setOpen,\n    }),\n    [memoizedLabels, memoizedIcons, open, setOpen],\n  );\n\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n","import React from \"react\";\n\nexport const OpenIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    width=\"24\"\n    height=\"24\"\n  >\n    <g transform=\"translate(24, 0) scale(-1, 1)\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M5.337 21.718a6.707 6.707 0 01-.533-.074.75.75 0 01-.44-1.223 3.73 3.73 0 00.814-1.686c.023-.115-.022-.317-.254-.543C3.274 16.587 2.25 14.41 2.25 12c0-5.03 4.428-9 9.75-9s9.75 3.97 9.75 9c0 5.03-4.428 9-9.75 9-.833 0-1.643-.097-2.417-.279a6.721 6.721 0 01-4.246.997z\"\n        clipRule=\"evenodd\"\n      />\n    </g>\n  </svg>\n);\n\nexport const CloseIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    strokeWidth=\"1.5\"\n    stroke=\"currentColor\"\n    width=\"24\"\n    height=\"24\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n  </svg>\n);\n\nexport const HeaderCloseIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    strokeWidth=\"1.5\"\n    stroke=\"currentColor\"\n    width=\"24\"\n    height=\"24\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n);\n\nexport const SendIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    strokeWidth={1.5}\n    stroke=\"currentColor\"\n    width=\"24\"\n    height=\"24\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5\"\n    />\n  </svg>\n);\n\nexport const SpinnerIcon = (\n  <svg\n    style={{\n      animation: \"copilotKitSpinAnimation 1s linear infinite\",\n      color: \"rgb(107 114 128)\",\n    }}\n    width=\"24\"\n    height=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      style={{ opacity: 0.25 }}\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    ></circle>\n    <path\n      style={{ opacity: 0.75 }}\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n);\n\nexport const SmallSpinnerIcon = (\n  <svg\n    style={{\n      animation: \"copilotKitSpinAnimation 1s linear infinite\",\n    }}\n    width=\"13\"\n    height=\"13\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      style={{ opacity: 0.25 }}\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    ></circle>\n    <path\n      style={{ opacity: 0.75 }}\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n);\n\nexport const ActivityIcon = (\n  <svg\n    style={{\n      display: \"inline-block\",\n      marginLeft: \"0.25rem\",\n      marginRight: \"0.25rem\",\n    }}\n    height=\"24\"\n    width=\"24\"\n    viewBox=\"0 0 27 27\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n  >\n    <circle className=\"copilotKitActivityDot1\" cx=\"4\" cy=\"12\" r=\"3\" />\n    <circle className=\"copilotKitActivityDot1 copilotKitActivityDot2\" cx=\"12\" cy=\"12\" r=\"3\" />\n    <circle className=\"copilotKitActivityDot1 copilotKitActivityDot3\" cx=\"20\" cy=\"12\" r=\"3\" />\n  </svg>\n);\n\nexport function CheckIcon({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      style={{ height: \"1rem\", width: \"1rem\" }}\n      className={className}\n      {...props}\n    >\n      <path d=\"m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z\" />\n    </svg>\n  );\n}\n\nexport function DownloadIcon({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      style={{ height: \"1rem\", width: \"1rem\" }}\n      className={className}\n      {...props}\n    >\n      <path d=\"M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z\" />\n    </svg>\n  );\n}\n\nexport function CopyIcon({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 256 256\"\n      fill=\"currentColor\"\n      style={{ height: \"1rem\", width: \"1rem\" }}\n      className={className}\n      {...props}\n    >\n      <path d=\"M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z\" />\n    </svg>\n  );\n}\n\nexport const StopIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 256 256\"\n    fill=\"currentColor\"\n    style={{ height: \"1rem\", width: \"1rem\" }}\n  >\n    <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z\" />\n  </svg>\n);\n\nexport const RegenerateIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 256 256\"\n    fill=\"currentColor\"\n    style={{ height: \"1rem\", width: \"1rem\" }}\n  >\n    <path d=\"M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z\" />\n  </svg>\n);\n\nexport const PushToTalkIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    strokeWidth={1.5}\n    stroke=\"currentColor\"\n    className=\"w-6 h-6\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z\"\n    />\n  </svg>\n);\n","import { FC, memo } from \"react\";\nimport ReactMarkdown, { Options, Components } from \"react-markdown\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\n\nconst MemoizedReactMarkdown: FC<Options> = memo(\n  ReactMarkdown,\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.className === nextProps.className,\n);\n\ntype MarkdownProps = {\n  content: string;\n};\n\nexport const Markdown = ({ content }: MarkdownProps) => {\n  return (\n    <div className=\"copilotKitMarkdown\">\n      <MemoizedReactMarkdown components={components} remarkPlugins={[remarkGfm, remarkMath]}>\n        {content}\n      </MemoizedReactMarkdown>\n    </div>\n  );\n};\n\nconst components: Components = {\n  p({ children }) {\n    return <p>{children}</p>;\n  },\n  a({ children, ...props }) {\n    return (\n      <a\n        style={{ color: \"blue\", textDecoration: \"underline\" }}\n        {...props}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        {children}\n      </a>\n    );\n  },\n  code({ children, className, inline, ...props }) {\n    if (children.length) {\n      if (children[0] == \"▍\") {\n        return (\n          <span\n            style={{\n              animation: \"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n              marginTop: \"0.25rem\",\n            }}\n          >\n            ▍\n          </span>\n        );\n      }\n\n      children[0] = (children[0] as string).replace(\"`▍`\", \"▍\");\n    }\n\n    const match = /language-(\\w+)/.exec(className || \"\");\n\n    if (inline) {\n      return (\n        <code className={className} {...props}>\n          {children}\n        </code>\n      );\n    }\n\n    return (\n      <CodeBlock\n        key={Math.random()}\n        language={(match && match[1]) || \"\"}\n        value={String(children).replace(/\\n$/, \"\")}\n        {...props}\n      />\n    );\n  },\n};\n","import { FC, memo } from \"react\";\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard\";\nimport { CheckIcon, CopyIcon, DownloadIcon } from \"./Icons\";\n\ninterface CodeActionButtonProps {\n  onClick: () => void;\n  children: React.ReactNode;\n}\n\ninterface Props {\n  language: string;\n  value: string;\n}\n\ninterface languageMap {\n  [key: string]: string | undefined;\n}\n\nexport const programmingLanguages: languageMap = {\n  javascript: \".js\",\n  python: \".py\",\n  java: \".java\",\n  c: \".c\",\n  cpp: \".cpp\",\n  \"c++\": \".cpp\",\n  \"c#\": \".cs\",\n  ruby: \".rb\",\n  php: \".php\",\n  swift: \".swift\",\n  \"objective-c\": \".m\",\n  kotlin: \".kt\",\n  typescript: \".ts\",\n  go: \".go\",\n  perl: \".pl\",\n  rust: \".rs\",\n  scala: \".scala\",\n  haskell: \".hs\",\n  lua: \".lua\",\n  shell: \".sh\",\n  sql: \".sql\",\n  html: \".html\",\n  css: \".css\",\n  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component\n};\n\nexport const generateRandomString = (length: number, lowercase = false) => {\n  const chars = \"ABCDEFGHJKLMNPQRSTUVWXY3456789\"; // excluding similar looking characters like Z, 2, I, 1, O, 0\n  let result = \"\";\n  for (let i = 0; i < length; i++) {\n    result += chars.charAt(Math.floor(Math.random() * chars.length));\n  }\n  return lowercase ? result.toLowerCase() : result;\n};\n\nconst CodeBlock: FC<Props> = memo(({ language, value }) => {\n  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });\n\n  const downloadAsFile = () => {\n    if (typeof window === \"undefined\") {\n      return;\n    }\n    const fileExtension = programmingLanguages[language] || \".file\";\n    const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;\n    const fileName = window.prompt(\"Enter file name\" || \"\", suggestedFileName);\n\n    if (!fileName) {\n      // User pressed cancel on prompt.\n      return;\n    }\n\n    const blob = new Blob([value], { type: \"text/plain\" });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.download = fileName;\n    link.href = url;\n    link.style.display = \"none\";\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    URL.revokeObjectURL(url);\n  };\n\n  const onCopy = () => {\n    if (isCopied) return;\n    copyToClipboard(value);\n  };\n\n  return (\n    <div className=\"copilotKitCodeBlock\">\n      <div className=\"copilotKitCodeBlockToolbar\">\n        <span className=\"copilotKitCodeBlockToolbarLanguage\">{language}</span>\n        <div className=\"copilotKitCodeBlockToolbarButtons\">\n          <button className=\"copilotKitCodeBlockToolbarButton\" onClick={downloadAsFile}>\n            <DownloadIcon />\n            <span className=\"sr-only\">Download</span>\n          </button>\n          <button className=\"copilotKitCodeBlockToolbarButton\" onClick={onCopy}>\n            {isCopied ? <CheckIcon /> : <CopyIcon />}\n            <span className=\"sr-only\">Copy code</span>\n          </button>\n        </div>\n      </div>\n      <SyntaxHighlighter\n        language={language}\n        style={highlightStyle}\n        PreTag=\"div\"\n        customStyle={{\n          margin: 0,\n          borderBottomLeftRadius: \"0.375rem\",\n          borderBottomRightRadius: \"0.375rem\",\n        }}\n      >\n        {value}\n      </SyntaxHighlighter>\n    </div>\n  );\n});\nCodeBlock.displayName = \"CodeBlock\";\n\nexport { CodeBlock };\n\n// import { vscDarkPlus as highlightStyle } from \"react-syntax-highlighter/dist/esm/styles/prism\";\n// As a workaround, we inline the vscDarkPlus from react-syntax-highlighter.\n// Importing it as recommended in the documentation leads to build errors in the non app router\n// (Next.js classic) setup.\nconst highlightStyle: any = {\n  'pre[class*=\"language-\"]': {\n    color: \"#d4d4d4\",\n    fontSize: \"13px\",\n    textShadow: \"none\",\n    fontFamily: 'Menlo, Monaco, Consolas, \"Andale Mono\", \"Ubuntu Mono\", \"Courier New\", monospace',\n    direction: \"ltr\",\n    textAlign: \"left\",\n    whiteSpace: \"pre\",\n    wordSpacing: \"normal\",\n    wordBreak: \"normal\",\n    lineHeight: \"1.5\",\n    MozTabSize: \"4\",\n    OTabSize: \"4\",\n    tabSize: \"4\",\n    WebkitHyphens: \"none\",\n    MozHyphens: \"none\",\n    msHyphens: \"none\",\n    hyphens: \"none\",\n    padding: \"1em\",\n    margin: \".5em 0\",\n    overflow: \"auto\",\n    background: \"#1e1e1e\",\n  },\n  'code[class*=\"language-\"]': {\n    color: \"#d4d4d4\",\n    fontSize: \"13px\",\n    textShadow: \"none\",\n    fontFamily: 'Menlo, Monaco, Consolas, \"Andale Mono\", \"Ubuntu Mono\", \"Courier New\", monospace',\n    direction: \"ltr\",\n    textAlign: \"left\",\n    whiteSpace: \"pre\",\n    wordSpacing: \"normal\",\n    wordBreak: \"normal\",\n    lineHeight: \"1.5\",\n    MozTabSize: \"4\",\n    OTabSize: \"4\",\n    tabSize: \"4\",\n    WebkitHyphens: \"none\",\n    MozHyphens: \"none\",\n    msHyphens: \"none\",\n    hyphens: \"none\",\n  },\n  'pre[class*=\"language-\"]::selection': {\n    textShadow: \"none\",\n    background: \"#264F78\",\n  },\n  'code[class*=\"language-\"]::selection': {\n    textShadow: \"none\",\n    background: \"#264F78\",\n  },\n  'pre[class*=\"language-\"] *::selection': {\n    textShadow: \"none\",\n    background: \"#264F78\",\n  },\n  'code[class*=\"language-\"] *::selection': {\n    textShadow: \"none\",\n    background: \"#264F78\",\n  },\n  ':not(pre) > code[class*=\"language-\"]': {\n    padding: \".1em .3em\",\n    borderRadius: \".3em\",\n    color: \"#db4c69\",\n    background: \"#1e1e1e\",\n  },\n  \".namespace\": {\n    Opacity: \".7\",\n  },\n  \"doctype.doctype-tag\": {\n    color: \"#569CD6\",\n  },\n  \"doctype.name\": {\n    color: \"#9cdcfe\",\n  },\n  comment: {\n    color: \"#6a9955\",\n  },\n  prolog: {\n    color: \"#6a9955\",\n  },\n  punctuation: {\n    color: \"#d4d4d4\",\n  },\n  \".language-html .language-css .token.punctuation\": {\n    color: \"#d4d4d4\",\n  },\n  \".language-html .language-javascript .token.punctuation\": {\n    color: \"#d4d4d4\",\n  },\n  property: {\n    color: \"#9cdcfe\",\n  },\n  tag: {\n    color: \"#569cd6\",\n  },\n  boolean: {\n    color: \"#569cd6\",\n  },\n  number: {\n    color: \"#b5cea8\",\n  },\n  constant: {\n    color: \"#9cdcfe\",\n  },\n  symbol: {\n    color: \"#b5cea8\",\n  },\n  inserted: {\n    color: \"#b5cea8\",\n  },\n  unit: {\n    color: \"#b5cea8\",\n  },\n  selector: {\n    color: \"#d7ba7d\",\n  },\n  \"attr-name\": {\n    color: \"#9cdcfe\",\n  },\n  string: {\n    color: \"#ce9178\",\n  },\n  char: {\n    color: \"#ce9178\",\n  },\n  builtin: {\n    color: \"#ce9178\",\n  },\n  deleted: {\n    color: \"#ce9178\",\n  },\n  \".language-css .token.string.url\": {\n    textDecoration: \"underline\",\n  },\n  operator: {\n    color: \"#d4d4d4\",\n  },\n  entity: {\n    color: \"#569cd6\",\n  },\n  \"operator.arrow\": {\n    color: \"#569CD6\",\n  },\n  atrule: {\n    color: \"#ce9178\",\n  },\n  \"atrule.rule\": {\n    color: \"#c586c0\",\n  },\n  \"atrule.url\": {\n    color: \"#9cdcfe\",\n  },\n  \"atrule.url.function\": {\n    color: \"#dcdcaa\",\n  },\n  \"atrule.url.punctuation\": {\n    color: \"#d4d4d4\",\n  },\n  keyword: {\n    color: \"#569CD6\",\n  },\n  \"keyword.module\": {\n    color: \"#c586c0\",\n  },\n  \"keyword.control-flow\": {\n    color: \"#c586c0\",\n  },\n  function: {\n    color: \"#dcdcaa\",\n  },\n  \"function.maybe-class-name\": {\n    color: \"#dcdcaa\",\n  },\n  regex: {\n    color: \"#d16969\",\n  },\n  important: {\n    color: \"#569cd6\",\n  },\n  italic: {\n    fontStyle: \"italic\",\n  },\n  \"class-name\": {\n    color: \"#4ec9b0\",\n  },\n  \"maybe-class-name\": {\n    color: \"#4ec9b0\",\n  },\n  console: {\n    color: \"#9cdcfe\",\n  },\n  parameter: {\n    color: \"#9cdcfe\",\n  },\n  interpolation: {\n    color: \"#9cdcfe\",\n  },\n  \"punctuation.interpolation-punctuation\": {\n    color: \"#569cd6\",\n  },\n  variable: {\n    color: \"#9cdcfe\",\n  },\n  \"imports.maybe-class-name\": {\n    color: \"#9cdcfe\",\n  },\n  \"exports.maybe-class-name\": {\n    color: \"#9cdcfe\",\n  },\n  escape: {\n    color: \"#d7ba7d\",\n  },\n  \"tag.punctuation\": {\n    color: \"#808080\",\n  },\n  cdata: {\n    color: \"#808080\",\n  },\n  \"attr-value\": {\n    color: \"#ce9178\",\n  },\n  \"attr-value.punctuation\": {\n    color: \"#ce9178\",\n  },\n  \"attr-value.punctuation.attr-equals\": {\n    color: \"#d4d4d4\",\n  },\n  namespace: {\n    color: \"#4ec9b0\",\n  },\n  'pre[class*=\"language-javascript\"]': {\n    color: \"#9cdcfe\",\n  },\n  'code[class*=\"language-javascript\"]': {\n    color: \"#9cdcfe\",\n  },\n  'pre[class*=\"language-jsx\"]': {\n    color: \"#9cdcfe\",\n  },\n  'code[class*=\"language-jsx\"]': {\n    color: \"#9cdcfe\",\n  },\n  'pre[class*=\"language-typescript\"]': {\n    color: \"#9cdcfe\",\n  },\n  'code[class*=\"language-typescript\"]': {\n    color: \"#9cdcfe\",\n  },\n  'pre[class*=\"language-tsx\"]': {\n    color: \"#9cdcfe\",\n  },\n  'code[class*=\"language-tsx\"]': {\n    color: \"#9cdcfe\",\n  },\n  'pre[class*=\"language-css\"]': {\n    color: \"#ce9178\",\n  },\n  'code[class*=\"language-css\"]': {\n    color: \"#ce9178\",\n  },\n  'pre[class*=\"language-html\"]': {\n    color: \"#d4d4d4\",\n  },\n  'code[class*=\"language-html\"]': {\n    color: \"#d4d4d4\",\n  },\n  \".language-regex .token.anchor\": {\n    color: \"#dcdcaa\",\n  },\n  \".language-html .token.punctuation\": {\n    color: \"#808080\",\n  },\n  'pre[class*=\"language-\"] > code[class*=\"language-\"]': {\n    position: \"relative\",\n    zIndex: \"1\",\n  },\n  \".line-highlight.line-highlight\": {\n    background: \"#f7ebc6\",\n    boxShadow: \"inset 5px 0 0 #f7d87c\",\n    zIndex: \"0\",\n  },\n};\n","import * as React from \"react\";\n\nexport interface useCopyToClipboardProps {\n  timeout?: number;\n}\n\nexport function useCopyToClipboard({ timeout = 2000 }: useCopyToClipboardProps) {\n  const [isCopied, setIsCopied] = React.useState<Boolean>(false);\n\n  const copyToClipboard = (value: string) => {\n    if (typeof window === \"undefined\" || !navigator.clipboard?.writeText) {\n      return;\n    }\n\n    if (!value) {\n      return;\n    }\n\n    navigator.clipboard.writeText(value).then(() => {\n      setIsCopied(true);\n\n      setTimeout(() => {\n        setIsCopied(false);\n      }, timeout);\n    });\n  };\n\n  return { isCopied, copyToClipboard };\n}\n"],"mappings":"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","names":["import_jsx_runtime","React","import_react","import_react","React","import_jsx_runtime","SyntaxHighlighter","import_jsx_runtime","ReactMarkdown","remarkGfm","remarkMath","import_jsx_runtime"]}

package/dist/components/chat/messages/AssistantMessage.mjs

@@ -0,0 +1,13 @@
+import {
+  AssistantMessage
+} from "../../../chunk-3VNMQWGT.mjs";
+import "../../../chunk-YQ3D5IQV.mjs";
+import "../../../chunk-CBBFRI3Q.mjs";
+import "../../../chunk-UPTB2MVO.mjs";
+import "../../../chunk-FZC7X5PK.mjs";
+import "../../../chunk-54JAUBUJ.mjs";
+import "../../../chunk-MRXNTQOX.mjs";
+export {
+  AssistantMessage
+};
+//# sourceMappingURL=AssistantMessage.mjs.map

package/dist/components/chat/messages/AssistantMessage.mjs.map

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

package/dist/components/chat/messages/RenderActionExecutionMessage.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/chat/messages/RenderActionExecutionMessage.tsx
@@ -34,38 +24,27 @@ __export(RenderActionExecutionMessage_exports, {
 });
 module.exports = __toCommonJS(RenderActionExecutionMessage_exports);
 var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
-
-// src/components/chat/ChatContext.tsx
-var import_react = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var ChatContext = import_react.default.createContext(void 0);
-function useChatContext() {
-  const context = import_react.default.useContext(ChatContext);
-  if (context === void 0) {
-    throw new Error(
-      "Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?"
-    );
-  }
-  return context;
-}
-
-// src/components/chat/messages/RenderActionExecutionMessage.tsx
 var import_react_core = require("@copilotkit/react-core");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 function RenderActionExecutionMessage(props) {
-  const { message, inProgress, index, isCurrentMessage, actionResult } = props;
   const { chatComponentsCache } = (0, import_react_core.useCopilotContext)();
-  const { icons } = useChatContext();
+  const { message, inProgress, index, isCurrentMessage, actionResult, AssistantMessage } = props;
   if (message.isActionExecutionMessage()) {
     if (chatComponentsCache.current !== null && (chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"])) {
       const render = chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"];
       if (typeof render === "string") {
         if (isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-            icons.spinnerIcon,
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inProgressLabel", children: render })
-          ] }, index);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            AssistantMessage,
+            {
+              rawData: message,
+              "data-message-role": "assistant",
+              isLoading: false,
+              isGenerating: true,
+              message: render
+            },
+            index
+          );
         } else {
           return null;
         }
@@ -88,39 +67,65 @@ function RenderActionExecutionMessage(props) {
             return null;
           }
           if (typeof toRender === "string") {
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-              isCurrentMessage && inProgress && icons.spinnerIcon,
-              " ",
-              toRender
-            ] }, index);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              AssistantMessage,
+              {
+                rawData: message,
+                "data-message-role": "assistant",
+                isLoading: false,
+                isGenerating: false,
+                message: toRender
+              },
+              index
+            );
           } else {
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "div",
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              AssistantMessage,
               {
-                "data-message-type": "action-render",
-                className: "copilotKitCustomAssistantMessage",
-                children: toRender
+                rawData: message,
+                "data-message-role": "action-render",
+                isLoading: false,
+                isGenerating: false,
+                subComponent: toRender
               },
               index
             );
           }
         } catch (e) {
           console.error(`Error executing render function for action ${message.name}: ${e}`);
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-            isCurrentMessage && inProgress && icons.spinnerIcon,
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
-              "\u274C Error executing render: ",
-              message.name
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("br", {}),
-            e instanceof Error ? e.message : String(e)
-          ] }, index);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            AssistantMessage,
+            {
+              rawData: message,
+              "data-message-role": "assistant",
+              isLoading: false,
+              isGenerating: false,
+              subComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("b", { children: [
+                  "\u274C Error executing render: ",
+                  message.name
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+                e instanceof Error ? e.message : String(e)
+              ] })
+            },
+            index
+          );
         }
       }
     } else if (!inProgress || !isCurrentMessage) {
       return null;
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        AssistantMessage,
+        {
+          rawData: message,
+          "data-message-role": "assistant",
+          isLoading: true,
+          isGenerating: true
+        },
+        index
+      );
     }
   }
 }

package/dist/components/chat/messages/RenderActionExecutionMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/chat/messages/RenderActionExecutionMessage.tsx","../../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { MessageStatusCode } from \"@copilotkit/runtime-client-gql\";\nimport { RenderMessageProps } from \"../props\";\nimport { useChatContext } from \"../ChatContext\";\nimport { RenderFunctionStatus, useCopilotContext } from \"@copilotkit/react-core\";\n\nexport function RenderActionExecutionMessage(props: RenderMessageProps) {\n  const { message, inProgress, index, isCurrentMessage, actionResult } = props;\n  const { chatComponentsCache } = useCopilotContext();\n  const { icons } = useChatContext();\n\n  if (message.isActionExecutionMessage()) {\n    if (\n      chatComponentsCache.current !== null &&\n      (chatComponentsCache.current.actions[message.name] ||\n        chatComponentsCache.current.actions[\"*\"])\n    ) {\n      const render =\n        chatComponentsCache.current.actions[message.name] ||\n        chatComponentsCache.current.actions[\"*\"];\n      // render a static string\n      if (typeof render === \"string\") {\n        // when render is static, we show it only when in progress\n        if (isCurrentMessage && inProgress) {\n          return (\n            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n              {icons.spinnerIcon} <span className=\"inProgressLabel\">{render}</span>\n            </div>\n          );\n        }\n        // Done - silent by default to avoid a series of \"done\" messages\n        else {\n          return null;\n        }\n      }\n      // render is a function\n      else {\n        const args = message.arguments;\n\n        let status: RenderFunctionStatus = \"inProgress\";\n\n        if (actionResult !== undefined) {\n          status = \"complete\";\n        } else if (message.status.code !== MessageStatusCode.Pending) {\n          status = \"executing\";\n        }\n\n        try {\n          const toRender = render({\n            status: status as any,\n            args,\n            result: actionResult,\n            name: message.name,\n          });\n          // No result and complete: stay silent\n          if (!toRender && status === \"complete\") {\n            return null;\n          }\n          if (typeof toRender === \"string\") {\n            return (\n              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n                {isCurrentMessage && inProgress && icons.spinnerIcon} {toRender}\n              </div>\n            );\n          } else {\n            return (\n              <div\n                key={index}\n                data-message-type=\"action-render\"\n                className=\"copilotKitCustomAssistantMessage\"\n              >\n                {toRender}\n              </div>\n            );\n          }\n        } catch (e) {\n          console.error(`Error executing render function for action ${message.name}: ${e}`);\n          return (\n            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n              {isCurrentMessage && inProgress && icons.spinnerIcon}\n              <b>❌ Error executing render: {message.name}</b>\n              <br />\n              {e instanceof Error ? e.message : String(e)}\n            </div>\n          );\n        }\n      }\n    }\n    // No render function found- show the default message\n    else if (!inProgress || !isCurrentMessage) {\n      // Done - silent by default to avoid a series of \"done\" messages\n      return null;\n    } else {\n      // In progress\n      return (\n        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n          {icons.spinnerIcon}\n        </div>\n      );\n    }\n  }\n}\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[];\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string;\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string;\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"❌ An error occurred. Please try again.\"\n   */\n  error?: string;\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string;\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string;\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>;\n  icons: Required<CopilotChatIcons>;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext);\n  if (context === undefined) {\n    throw new Error(\n      \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n    );\n  }\n  return context;\n}\n\ninterface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels;\n  icons?: CopilotChatIcons;\n  children?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n  // temperature,\n  // instructions,\n  // maxFeedback,\n  labels,\n  icons,\n  children,\n  open,\n  setOpen,\n}: ChatContextProps) => {\n  const memoizedLabels = useMemo(\n    () => ({\n      ...{\n        initial: \"\",\n        title: \"CopilotKit\",\n        placeholder: \"Type a message...\",\n        error: \"❌ An error occurred. Please try again.\",\n        stopGenerating: \"Stop generating\",\n        regenerateResponse: \"Regenerate response\",\n      },\n      ...labels,\n    }),\n    [labels],\n  );\n\n  const memoizedIcons = useMemo(\n    () => ({\n      ...{\n        openIcon: DefaultIcons.OpenIcon,\n        closeIcon: DefaultIcons.CloseIcon,\n        headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n        sendIcon: DefaultIcons.SendIcon,\n        activityIcon: DefaultIcons.ActivityIcon,\n        spinnerIcon: DefaultIcons.SpinnerIcon,\n        stopIcon: DefaultIcons.StopIcon,\n        regenerateIcon: DefaultIcons.RegenerateIcon,\n        pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n      },\n      ...icons,\n    }),\n    [icons],\n  );\n\n  const context = useMemo(\n    () => ({\n      labels: memoizedLabels,\n      icons: memoizedIcons,\n      open,\n      setOpen,\n    }),\n    [memoizedLabels, memoizedIcons, open, setOpen],\n  );\n\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAkC;;;ACAlC,mBAAyC;AA0LhC;AA5EF,IAAM,cAAc,aAAAA,QAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,aAAAA,QAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;;;ADrHA,wBAAwD;AAqB5C,IAAAC,sBAAA;AAnBL,SAAS,6BAA6B,OAA2B;AACtE,QAAM,EAAE,SAAS,YAAY,OAAO,kBAAkB,aAAa,IAAI;AACvE,QAAM,EAAE,oBAAoB,QAAI,qCAAkB;AAClD,QAAM,EAAE,MAAM,IAAI,eAAe;AAEjC,MAAI,QAAQ,yBAAyB,GAAG;AACtC,QACE,oBAAoB,YAAY,SAC/B,oBAAoB,QAAQ,QAAQ,QAAQ,IAAI,KAC/C,oBAAoB,QAAQ,QAAQ,GAAG,IACzC;AACA,YAAM,SACJ,oBAAoB,QAAQ,QAAQ,QAAQ,IAAI,KAChD,oBAAoB,QAAQ,QAAQ,GAAG;AAEzC,UAAI,OAAO,WAAW,UAAU;AAE9B,YAAI,oBAAoB,YAAY;AAClC,iBACE,8CAAC,SAAgB,WAAW,gDACzB;AAAA,kBAAM;AAAA,YAAY;AAAA,YAAC,6CAAC,UAAK,WAAU,mBAAmB,kBAAO;AAAA,eADtD,KAEV;AAAA,QAEJ,OAEK;AACH,iBAAO;AAAA,QACT;AAAA,MACF,OAEK;AACH,cAAM,OAAO,QAAQ;AAErB,YAAI,SAA+B;AAEnC,YAAI,iBAAiB,QAAW;AAC9B,mBAAS;AAAA,QACX,WAAW,QAAQ,OAAO,SAAS,4CAAkB,SAAS;AAC5D,mBAAS;AAAA,QACX;AAEA,YAAI;AACF,gBAAM,WAAW,OAAO;AAAA,YACtB;AAAA,YACA;AAAA,YACA,QAAQ;AAAA,YACR,MAAM,QAAQ;AAAA,UAChB,CAAC;AAED,cAAI,CAAC,YAAY,WAAW,YAAY;AACtC,mBAAO;AAAA,UACT;AACA,cAAI,OAAO,aAAa,UAAU;AAChC,mBACE,8CAAC,SAAgB,WAAW,gDACzB;AAAA,kCAAoB,cAAc,MAAM;AAAA,cAAY;AAAA,cAAE;AAAA,iBAD/C,KAEV;AAAA,UAEJ,OAAO;AACL,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,qBAAkB;AAAA,gBAClB,WAAU;AAAA,gBAET;AAAA;AAAA,cAJI;AAAA,YAKP;AAAA,UAEJ;AAAA,QACF,SAAS,GAAP;AACA,kBAAQ,MAAM,8CAA8C,QAAQ,SAAS,GAAG;AAChF,iBACE,8CAAC,SAAgB,WAAW,gDACzB;AAAA,gCAAoB,cAAc,MAAM;AAAA,YACzC,8CAAC,OAAE;AAAA;AAAA,cAA2B,QAAQ;AAAA,eAAK;AAAA,YAC3C,6CAAC,QAAG;AAAA,YACH,aAAa,QAAQ,EAAE,UAAU,OAAO,CAAC;AAAA,eAJlC,KAKV;AAAA,QAEJ;AAAA,MACF;AAAA,IACF,WAES,CAAC,cAAc,CAAC,kBAAkB;AAEzC,aAAO;AAAA,IACT,OAAO;AAEL,aACE,6CAAC,SAAgB,WAAW,gDACzB,gBAAM,eADC,KAEV;AAAA,IAEJ;AAAA,EACF;AACF;","names":["React","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/chat/messages/RenderActionExecutionMessage.tsx"],"sourcesContent":["import { MessageStatusCode } from \"@copilotkit/runtime-client-gql\";\nimport { RenderMessageProps } from \"../props\";\nimport { RenderFunctionStatus, useCopilotContext } from \"@copilotkit/react-core\";\n\nexport function RenderActionExecutionMessage(props: RenderMessageProps) {\n  const { chatComponentsCache } = useCopilotContext();\n  const { message, inProgress, index, isCurrentMessage, actionResult, AssistantMessage } = props;\n\n  if (message.isActionExecutionMessage()) {\n    if (\n      chatComponentsCache.current !== null &&\n      (chatComponentsCache.current.actions[message.name] ||\n        chatComponentsCache.current.actions[\"*\"])\n    ) {\n      const render =\n        chatComponentsCache.current.actions[message.name] ||\n        chatComponentsCache.current.actions[\"*\"];\n      // render a static string\n      if (typeof render === \"string\") {\n        // when render is static, we show it only when in progress\n        if (isCurrentMessage && inProgress) {\n          return (\n            <AssistantMessage\n              rawData={message}\n              key={index}\n              data-message-role=\"assistant\"\n              isLoading={false}\n              isGenerating={true}\n              message={render}\n            />\n          );\n        }\n        // Done - silent by default to avoid a series of \"done\" messages\n        else {\n          return null;\n        }\n      }\n      // render is a function\n      else {\n        const args = message.arguments;\n\n        let status: RenderFunctionStatus = \"inProgress\";\n\n        if (actionResult !== undefined) {\n          status = \"complete\";\n        } else if (message.status.code !== MessageStatusCode.Pending) {\n          status = \"executing\";\n        }\n\n        try {\n          const toRender = render({\n            status: status as any,\n            args,\n            result: actionResult,\n            name: message.name,\n          });\n          // No result and complete: stay silent\n          if (!toRender && status === \"complete\") {\n            return null;\n          }\n          if (typeof toRender === \"string\") {\n            return (\n              <AssistantMessage\n                rawData={message}\n                data-message-role=\"assistant\"\n                key={index}\n                isLoading={false}\n                isGenerating={false}\n                message={toRender}\n              />\n            );\n          } else {\n            return (\n              <AssistantMessage\n                rawData={message}\n                data-message-role=\"action-render\"\n                key={index}\n                isLoading={false}\n                isGenerating={false}\n                subComponent={toRender}\n              />\n            );\n          }\n        } catch (e) {\n          console.error(`Error executing render function for action ${message.name}: ${e}`);\n          return (\n            <AssistantMessage\n              rawData={message}\n              data-message-role=\"assistant\"\n              key={index}\n              isLoading={false}\n              isGenerating={false}\n              subComponent={\n                <div>\n                  <b>❌ Error executing render: {message.name}</b>\n                  <br />\n                  {e instanceof Error ? e.message : String(e)}\n                </div>\n              }\n            />\n          );\n        }\n      }\n    }\n    // No render function found- show the default message\n    else if (!inProgress || !isCurrentMessage) {\n      // Done - silent by default to avoid a series of \"done\" messages\n      return null;\n    } else {\n      // In progress\n      return (\n        <AssistantMessage\n          rawData={message}\n          key={index}\n          data-message-role=\"assistant\"\n          isLoading={true}\n          isGenerating={true}\n        />\n      );\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAkC;AAElC,wBAAwD;AAoB5C;AAlBL,SAAS,6BAA6B,OAA2B;AACtE,QAAM,EAAE,oBAAoB,QAAI,qCAAkB;AAClD,QAAM,EAAE,SAAS,YAAY,OAAO,kBAAkB,cAAc,iBAAiB,IAAI;AAEzF,MAAI,QAAQ,yBAAyB,GAAG;AACtC,QACE,oBAAoB,YAAY,SAC/B,oBAAoB,QAAQ,QAAQ,QAAQ,IAAI,KAC/C,oBAAoB,QAAQ,QAAQ,GAAG,IACzC;AACA,YAAM,SACJ,oBAAoB,QAAQ,QAAQ,QAAQ,IAAI,KAChD,oBAAoB,QAAQ,QAAQ,GAAG;AAEzC,UAAI,OAAO,WAAW,UAAU;AAE9B,YAAI,oBAAoB,YAAY;AAClC,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cAET,qBAAkB;AAAA,cAClB,WAAW;AAAA,cACX,cAAc;AAAA,cACd,SAAS;AAAA;AAAA,YAJJ;AAAA,UAKP;AAAA,QAEJ,OAEK;AACH,iBAAO;AAAA,QACT;AAAA,MACF,OAEK;AACH,cAAM,OAAO,QAAQ;AAErB,YAAI,SAA+B;AAEnC,YAAI,iBAAiB,QAAW;AAC9B,mBAAS;AAAA,QACX,WAAW,QAAQ,OAAO,SAAS,4CAAkB,SAAS;AAC5D,mBAAS;AAAA,QACX;AAEA,YAAI;AACF,gBAAM,WAAW,OAAO;AAAA,YACtB;AAAA,YACA;AAAA,YACA,QAAQ;AAAA,YACR,MAAM,QAAQ;AAAA,UAChB,CAAC;AAED,cAAI,CAAC,YAAY,WAAW,YAAY;AACtC,mBAAO;AAAA,UACT;AACA,cAAI,OAAO,aAAa,UAAU;AAChC,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,qBAAkB;AAAA,gBAElB,WAAW;AAAA,gBACX,cAAc;AAAA,gBACd,SAAS;AAAA;AAAA,cAHJ;AAAA,YAIP;AAAA,UAEJ,OAAO;AACL,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,qBAAkB;AAAA,gBAElB,WAAW;AAAA,gBACX,cAAc;AAAA,gBACd,cAAc;AAAA;AAAA,cAHT;AAAA,YAIP;AAAA,UAEJ;AAAA,QACF,SAAS,GAAP;AACA,kBAAQ,MAAM,8CAA8C,QAAQ,SAAS,GAAG;AAChF,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,qBAAkB;AAAA,cAElB,WAAW;AAAA,cACX,cAAc;AAAA,cACd,cACE,6CAAC,SACC;AAAA,6DAAC,OAAE;AAAA;AAAA,kBAA2B,QAAQ;AAAA,mBAAK;AAAA,gBAC3C,4CAAC,QAAG;AAAA,gBACH,aAAa,QAAQ,EAAE,UAAU,OAAO,CAAC;AAAA,iBAC5C;AAAA;AAAA,YARG;AAAA,UAUP;AAAA,QAEJ;AAAA,MACF;AAAA,IACF,WAES,CAAC,cAAc,CAAC,kBAAkB;AAEzC,aAAO;AAAA,IACT,OAAO;AAEL,aACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UAET,qBAAkB;AAAA,UAClB,WAAW;AAAA,UACX,cAAc;AAAA;AAAA,QAHT;AAAA,MAIP;AAAA,IAEJ;AAAA,EACF;AACF;","names":[]}

package/dist/components/chat/messages/RenderActionExecutionMessage.mjs

@@ -1,8 +1,6 @@
 import {
   RenderActionExecutionMessage
-} from "../../../chunk-3E7HY2UN.mjs";
-import "../../../chunk-CBBFRI3Q.mjs";
-import "../../../chunk-FZC7X5PK.mjs";
+} from "../../../chunk-P5A3A5FO.mjs";
 import "../../../chunk-MRXNTQOX.mjs";
 export {
   RenderActionExecutionMessage

package/dist/components/chat/messages/RenderAgentStateMessage.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/chat/messages/RenderAgentStateMessage.tsx
@@ -33,28 +23,11 @@ __export(RenderAgentStateMessage_exports, {
   RenderAgentStateMessage: () => RenderAgentStateMessage
 });
 module.exports = __toCommonJS(RenderAgentStateMessage_exports);
-
-// src/components/chat/ChatContext.tsx
-var import_react = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var ChatContext = import_react.default.createContext(void 0);
-function useChatContext() {
-  const context = import_react.default.useContext(ChatContext);
-  if (context === void 0) {
-    throw new Error(
-      "Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?"
-    );
-  }
-  return context;
-}
-
-// src/components/chat/messages/RenderAgentStateMessage.tsx
 var import_react_core = require("@copilotkit/react-core");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 function RenderAgentStateMessage(props) {
-  const { message, inProgress, index, isCurrentMessage } = props;
   const { chatComponentsCache } = (0, import_react_core.useCopilotContext)();
-  const { icons } = useChatContext();
+  const { message, inProgress, index, isCurrentMessage, AssistantMessage } = props;
   if (message.isAgentStateMessage()) {
     let render;
     if (chatComponentsCache.current !== null) {
@@ -63,11 +36,17 @@ function RenderAgentStateMessage(props) {
     if (render) {
       if (typeof render === "string") {
         if (isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-            icons.spinnerIcon,
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inProgressLabel", children: render })
-          ] }, index);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            AssistantMessage,
+            {
+              rawData: message,
+              message: render,
+              "data-message-role": "assistant",
+              isLoading: true,
+              isGenerating: true
+            },
+            index
+          );
         } else {
           return null;
         }
@@ -83,24 +62,58 @@ function RenderAgentStateMessage(props) {
           return null;
         }
         if (!toRender && isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            AssistantMessage,
+            {
+              "data-message-role": "assistant",
+              rawData: message,
+              isLoading: true,
+              isGenerating: true
+            },
+            index
+          );
         } else if (!toRender) {
           return null;
         }
         if (typeof toRender === "string") {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-            isCurrentMessage && inProgress && icons.spinnerIcon,
-            " ",
-            toRender
-          ] }, index);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            AssistantMessage,
+            {
+              rawData: message,
+              message: toRender,
+              isLoading: true,
+              isGenerating: true,
+              "data-message-role": "assistant"
+            },
+            index
+          );
         } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            AssistantMessage,
+            {
+              rawData: message,
+              "data-message-role": "agent-state-render",
+              isLoading: false,
+              isGenerating: false,
+              subComponent: toRender
+            },
+            index
+          );
         }
       }
     } else if (!inProgress || !isCurrentMessage) {
       return null;
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        AssistantMessage,
+        {
+          rawData: message,
+          isLoading: true,
+          isGenerating: true,
+          "data-message-role": "assistant"
+        },
+        index
+      );
     }
   }
 }

package/dist/components/chat/messages/RenderAgentStateMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/chat/messages/RenderAgentStateMessage.tsx","../../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { AgentStateMessage } from \"@copilotkit/runtime-client-gql\";\nimport { RenderMessageProps } from \"../props\";\nimport { useChatContext } from \"../ChatContext\";\nimport { CoagentInChatRenderFunction, useCopilotContext } from \"@copilotkit/react-core\";\n\nexport function RenderAgentStateMessage(props: RenderMessageProps) {\n  const { message, inProgress, index, isCurrentMessage } = props;\n  const { chatComponentsCache } = useCopilotContext();\n  const { icons } = useChatContext();\n\n  if (message.isAgentStateMessage()) {\n    let render: string | CoagentInChatRenderFunction | undefined;\n\n    if (chatComponentsCache.current !== null) {\n      render =\n        chatComponentsCache.current.coAgentStateRenders[\n          `${message.agentName}-${message.nodeName}`\n        ] || chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-global`];\n    }\n\n    if (render) {\n      // render a static string\n      if (typeof render === \"string\") {\n        // when render is static, we show it only when in progress\n        if (isCurrentMessage && inProgress) {\n          return (\n            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n              {icons.spinnerIcon} <span className=\"inProgressLabel\">{render}</span>\n            </div>\n          );\n        }\n        // Done - silent by default to avoid a series of \"done\" messages\n        else {\n          return null;\n        }\n      }\n      // render is a function\n      else {\n        const state = message.state;\n\n        let status = message.active ? \"inProgress\" : \"complete\";\n\n        const toRender = render({\n          status: status as any,\n          state,\n          nodeName: message.nodeName,\n        });\n\n        // No result and complete: stay silent\n        if (!toRender && status === \"complete\") {\n          return null;\n        }\n\n        if (!toRender && isCurrentMessage && inProgress) {\n          return (\n            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n              {icons.spinnerIcon}\n            </div>\n          );\n        } else if (!toRender) {\n          return null;\n        }\n\n        if (typeof toRender === \"string\") {\n          return (\n            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n              {isCurrentMessage && inProgress && icons.spinnerIcon} {toRender}\n            </div>\n          );\n        } else {\n          return (\n            <div key={index} className=\"copilotKitCustomAssistantMessage\">\n              {toRender}\n            </div>\n          );\n        }\n      }\n    }\n    // No render function found- show the default message\n    else if (!inProgress || !isCurrentMessage) {\n      // Done - silent by default to avoid a series of \"done\" messages\n      return null;\n    } else {\n      // In progress\n      return (\n        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n          {icons.spinnerIcon}\n        </div>\n      );\n    }\n  }\n}\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[];\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string;\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string;\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"❌ An error occurred. Please try again.\"\n   */\n  error?: string;\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string;\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string;\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>;\n  icons: Required<CopilotChatIcons>;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext);\n  if (context === undefined) {\n    throw new Error(\n      \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n    );\n  }\n  return context;\n}\n\ninterface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels;\n  icons?: CopilotChatIcons;\n  children?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n  // temperature,\n  // instructions,\n  // maxFeedback,\n  labels,\n  icons,\n  children,\n  open,\n  setOpen,\n}: ChatContextProps) => {\n  const memoizedLabels = useMemo(\n    () => ({\n      ...{\n        initial: \"\",\n        title: \"CopilotKit\",\n        placeholder: \"Type a message...\",\n        error: \"❌ An error occurred. Please try again.\",\n        stopGenerating: \"Stop generating\",\n        regenerateResponse: \"Regenerate response\",\n      },\n      ...labels,\n    }),\n    [labels],\n  );\n\n  const memoizedIcons = useMemo(\n    () => ({\n      ...{\n        openIcon: DefaultIcons.OpenIcon,\n        closeIcon: DefaultIcons.CloseIcon,\n        headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n        sendIcon: DefaultIcons.SendIcon,\n        activityIcon: DefaultIcons.ActivityIcon,\n        spinnerIcon: DefaultIcons.SpinnerIcon,\n        stopIcon: DefaultIcons.StopIcon,\n        regenerateIcon: DefaultIcons.RegenerateIcon,\n        pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n      },\n      ...icons,\n    }),\n    [icons],\n  );\n\n  const context = useMemo(\n    () => ({\n      labels: memoizedLabels,\n      icons: memoizedIcons,\n      open,\n      setOpen,\n    }),\n    [memoizedLabels, memoizedIcons, open, setOpen],\n  );\n\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyC;AA0LhC;AA5EF,IAAM,cAAc,aAAAA,QAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,aAAAA,QAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;;;ADrHA,wBAA+D;AAuBnD,IAAAC,sBAAA;AArBL,SAAS,wBAAwB,OAA2B;AACjE,QAAM,EAAE,SAAS,YAAY,OAAO,iBAAiB,IAAI;AACzD,QAAM,EAAE,oBAAoB,QAAI,qCAAkB;AAClD,QAAM,EAAE,MAAM,IAAI,eAAe;AAEjC,MAAI,QAAQ,oBAAoB,GAAG;AACjC,QAAI;AAEJ,QAAI,oBAAoB,YAAY,MAAM;AACxC,eACE,oBAAoB,QAAQ,oBAC1B,GAAG,QAAQ,aAAa,QAAQ,UAClC,KAAK,oBAAoB,QAAQ,oBAAoB,GAAG,QAAQ,kBAAkB;AAAA,IACtF;AAEA,QAAI,QAAQ;AAEV,UAAI,OAAO,WAAW,UAAU;AAE9B,YAAI,oBAAoB,YAAY;AAClC,iBACE,8CAAC,SAAgB,WAAW,gDACzB;AAAA,kBAAM;AAAA,YAAY;AAAA,YAAC,6CAAC,UAAK,WAAU,mBAAmB,kBAAO;AAAA,eADtD,KAEV;AAAA,QAEJ,OAEK;AACH,iBAAO;AAAA,QACT;AAAA,MACF,OAEK;AACH,cAAM,QAAQ,QAAQ;AAEtB,YAAI,SAAS,QAAQ,SAAS,eAAe;AAE7C,cAAM,WAAW,OAAO;AAAA,UACtB;AAAA,UACA;AAAA,UACA,UAAU,QAAQ;AAAA,QACpB,CAAC;AAGD,YAAI,CAAC,YAAY,WAAW,YAAY;AACtC,iBAAO;AAAA,QACT;AAEA,YAAI,CAAC,YAAY,oBAAoB,YAAY;AAC/C,iBACE,6CAAC,SAAgB,WAAW,gDACzB,gBAAM,eADC,KAEV;AAAA,QAEJ,WAAW,CAAC,UAAU;AACpB,iBAAO;AAAA,QACT;AAEA,YAAI,OAAO,aAAa,UAAU;AAChC,iBACE,8CAAC,SAAgB,WAAW,gDACzB;AAAA,gCAAoB,cAAc,MAAM;AAAA,YAAY;AAAA,YAAE;AAAA,eAD/C,KAEV;AAAA,QAEJ,OAAO;AACL,iBACE,6CAAC,SAAgB,WAAU,oCACxB,sBADO,KAEV;AAAA,QAEJ;AAAA,MACF;AAAA,IACF,WAES,CAAC,cAAc,CAAC,kBAAkB;AAEzC,aAAO;AAAA,IACT,OAAO;AAEL,aACE,6CAAC,SAAgB,WAAW,gDACzB,gBAAM,eADC,KAEV;AAAA,IAEJ;AAAA,EACF;AACF;","names":["React","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/chat/messages/RenderAgentStateMessage.tsx"],"sourcesContent":["import { RenderMessageProps } from \"../props\";\nimport { CoagentInChatRenderFunction, useCopilotContext } from \"@copilotkit/react-core\";\n\nexport function RenderAgentStateMessage(props: RenderMessageProps) {\n  const { chatComponentsCache } = useCopilotContext();\n  const { message, inProgress, index, isCurrentMessage, AssistantMessage } = props;\n\n  if (message.isAgentStateMessage()) {\n    let render: string | CoagentInChatRenderFunction | undefined;\n\n    if (chatComponentsCache.current !== null) {\n      render =\n        chatComponentsCache.current.coAgentStateRenders[\n          `${message.agentName}-${message.nodeName}`\n        ] || chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-global`];\n    }\n\n    if (render) {\n      // render a static string\n      if (typeof render === \"string\") {\n        // when render is static, we show it only when in progress\n        if (isCurrentMessage && inProgress) {\n          return (\n            <AssistantMessage\n              rawData={message}\n              message={render}\n              data-message-role=\"assistant\"\n              key={index}\n              isLoading={true}\n              isGenerating={true}\n            />\n          );\n        }\n        // Done - silent by default to avoid a series of \"done\" messages\n        else {\n          return null;\n        }\n      }\n      // render is a function\n      else {\n        const state = message.state;\n\n        let status = message.active ? \"inProgress\" : \"complete\";\n\n        const toRender = render({\n          status: status as any,\n          state,\n          nodeName: message.nodeName,\n        });\n\n        // No result and complete: stay silent\n        if (!toRender && status === \"complete\") {\n          return null;\n        }\n\n        if (!toRender && isCurrentMessage && inProgress) {\n          return (\n            <AssistantMessage\n              data-message-role=\"assistant\"\n              key={index}\n              rawData={message}\n              isLoading={true}\n              isGenerating={true}\n            />\n          );\n        } else if (!toRender) {\n          return null;\n        }\n\n        if (typeof toRender === \"string\") {\n          return (\n            <AssistantMessage\n              rawData={message}\n              message={toRender}\n              isLoading={true}\n              isGenerating={true}\n              data-message-role=\"assistant\"\n              key={index}\n            />\n          );\n        } else {\n          return (\n            <AssistantMessage\n              rawData={message}\n              data-message-role=\"agent-state-render\"\n              key={index}\n              isLoading={false}\n              isGenerating={false}\n              subComponent={toRender}\n            />\n          );\n        }\n      }\n    }\n    // No render function found- show the default message\n    else if (!inProgress || !isCurrentMessage) {\n      // Done - silent by default to avoid a series of \"done\" messages\n      return null;\n    } else {\n      // In progress\n      return (\n        <AssistantMessage\n          rawData={message}\n          isLoading={true}\n          isGenerating={true}\n          data-message-role=\"assistant\"\n          key={index}\n        />\n      );\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA+D;AAsBnD;AApBL,SAAS,wBAAwB,OAA2B;AACjE,QAAM,EAAE,oBAAoB,QAAI,qCAAkB;AAClD,QAAM,EAAE,SAAS,YAAY,OAAO,kBAAkB,iBAAiB,IAAI;AAE3E,MAAI,QAAQ,oBAAoB,GAAG;AACjC,QAAI;AAEJ,QAAI,oBAAoB,YAAY,MAAM;AACxC,eACE,oBAAoB,QAAQ,oBAC1B,GAAG,QAAQ,aAAa,QAAQ,UAClC,KAAK,oBAAoB,QAAQ,oBAAoB,GAAG,QAAQ,kBAAkB;AAAA,IACtF;AAEA,QAAI,QAAQ;AAEV,UAAI,OAAO,WAAW,UAAU;AAE9B,YAAI,oBAAoB,YAAY;AAClC,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,SAAS;AAAA,cACT,qBAAkB;AAAA,cAElB,WAAW;AAAA,cACX,cAAc;AAAA;AAAA,YAFT;AAAA,UAGP;AAAA,QAEJ,OAEK;AACH,iBAAO;AAAA,QACT;AAAA,MACF,OAEK;AACH,cAAM,QAAQ,QAAQ;AAEtB,YAAI,SAAS,QAAQ,SAAS,eAAe;AAE7C,cAAM,WAAW,OAAO;AAAA,UACtB;AAAA,UACA;AAAA,UACA,UAAU,QAAQ;AAAA,QACpB,CAAC;AAGD,YAAI,CAAC,YAAY,WAAW,YAAY;AACtC,iBAAO;AAAA,QACT;AAEA,YAAI,CAAC,YAAY,oBAAoB,YAAY;AAC/C,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,qBAAkB;AAAA,cAElB,SAAS;AAAA,cACT,WAAW;AAAA,cACX,cAAc;AAAA;AAAA,YAHT;AAAA,UAIP;AAAA,QAEJ,WAAW,CAAC,UAAU;AACpB,iBAAO;AAAA,QACT;AAEA,YAAI,OAAO,aAAa,UAAU;AAChC,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,SAAS;AAAA,cACT,WAAW;AAAA,cACX,cAAc;AAAA,cACd,qBAAkB;AAAA;AAAA,YACb;AAAA,UACP;AAAA,QAEJ,OAAO;AACL,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,qBAAkB;AAAA,cAElB,WAAW;AAAA,cACX,cAAc;AAAA,cACd,cAAc;AAAA;AAAA,YAHT;AAAA,UAIP;AAAA,QAEJ;AAAA,MACF;AAAA,IACF,WAES,CAAC,cAAc,CAAC,kBAAkB;AAEzC,aAAO;AAAA,IACT,OAAO;AAEL,aACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAW;AAAA,UACX,cAAc;AAAA,UACd,qBAAkB;AAAA;AAAA,QACb;AAAA,MACP;AAAA,IAEJ;AAAA,EACF;AACF;","names":[]}

package/dist/components/chat/messages/RenderAgentStateMessage.mjs

@@ -1,8 +1,6 @@
 import {
   RenderAgentStateMessage
-} from "../../../chunk-ZABXREBH.mjs";
-import "../../../chunk-CBBFRI3Q.mjs";
-import "../../../chunk-FZC7X5PK.mjs";
+} from "../../../chunk-UWWMAJ7R.mjs";
 import "../../../chunk-MRXNTQOX.mjs";
 export {
   RenderAgentStateMessage

package/dist/components/chat/messages/RenderResultMessage.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/chat/messages/RenderResultMessage.tsx
@@ -33,28 +23,20 @@ __export(RenderResultMessage_exports, {
   RenderResultMessage: () => RenderResultMessage
 });
 module.exports = __toCommonJS(RenderResultMessage_exports);
-
-// src/components/chat/ChatContext.tsx
-var import_react = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var ChatContext = import_react.default.createContext(void 0);
-function useChatContext() {
-  const context = import_react.default.useContext(ChatContext);
-  if (context === void 0) {
-    throw new Error(
-      "Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?"
-    );
-  }
-  return context;
-}
-
-// src/components/chat/messages/RenderResultMessage.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
 function RenderResultMessage(props) {
-  const { message, inProgress, index, isCurrentMessage } = props;
-  const { icons } = useChatContext();
+  const { message, inProgress, index, isCurrentMessage, AssistantMessage } = props;
   if (message.isResultMessage() && inProgress && isCurrentMessage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AssistantMessage,
+      {
+        "data-message-role": "assistant",
+        rawData: message,
+        isLoading: true,
+        isGenerating: true
+      },
+      index
+    );
   }
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/chat/messages/RenderResultMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/chat/messages/RenderResultMessage.tsx","../../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { ResultMessage } from \"@copilotkit/runtime-client-gql\";\nimport { RenderMessageProps } from \"../props\";\nimport { useChatContext } from \"../ChatContext\";\n\nexport function RenderResultMessage(props: RenderMessageProps) {\n  const { message, inProgress, index, isCurrentMessage } = props;\n  const { icons } = useChatContext();\n  if (message.isResultMessage() && inProgress && isCurrentMessage) {\n    return (\n      <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n        {icons.spinnerIcon}\n      </div>\n    );\n  }\n}\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[];\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string;\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string;\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"❌ An error occurred. Please try again.\"\n   */\n  error?: string;\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string;\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string;\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>;\n  icons: Required<CopilotChatIcons>;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext);\n  if (context === undefined) {\n    throw new Error(\n      \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n    );\n  }\n  return context;\n}\n\ninterface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels;\n  icons?: CopilotChatIcons;\n  children?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n  // temperature,\n  // instructions,\n  // maxFeedback,\n  labels,\n  icons,\n  children,\n  open,\n  setOpen,\n}: ChatContextProps) => {\n  const memoizedLabels = useMemo(\n    () => ({\n      ...{\n        initial: \"\",\n        title: \"CopilotKit\",\n        placeholder: \"Type a message...\",\n        error: \"❌ An error occurred. Please try again.\",\n        stopGenerating: \"Stop generating\",\n        regenerateResponse: \"Regenerate response\",\n      },\n      ...labels,\n    }),\n    [labels],\n  );\n\n  const memoizedIcons = useMemo(\n    () => ({\n      ...{\n        openIcon: DefaultIcons.OpenIcon,\n        closeIcon: DefaultIcons.CloseIcon,\n        headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n        sendIcon: DefaultIcons.SendIcon,\n        activityIcon: DefaultIcons.ActivityIcon,\n        spinnerIcon: DefaultIcons.SpinnerIcon,\n        stopIcon: DefaultIcons.StopIcon,\n        regenerateIcon: DefaultIcons.RegenerateIcon,\n        pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n      },\n      ...icons,\n    }),\n    [icons],\n  );\n\n  const context = useMemo(\n    () => ({\n      labels: memoizedLabels,\n      icons: memoizedIcons,\n      open,\n      setOpen,\n    }),\n    [memoizedLabels, memoizedIcons, open, setOpen],\n  );\n\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyC;AA0LhC;AA5EF,IAAM,cAAc,aAAAA,QAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,aAAAA,QAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;;;AD/GM,IAAAC,sBAAA;AALC,SAAS,oBAAoB,OAA2B;AAC7D,QAAM,EAAE,SAAS,YAAY,OAAO,iBAAiB,IAAI;AACzD,QAAM,EAAE,MAAM,IAAI,eAAe;AACjC,MAAI,QAAQ,gBAAgB,KAAK,cAAc,kBAAkB;AAC/D,WACE,6CAAC,SAAgB,WAAW,gDACzB,gBAAM,eADC,KAEV;AAAA,EAEJ;AACF;","names":["React","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/chat/messages/RenderResultMessage.tsx"],"sourcesContent":["import { RenderMessageProps } from \"../props\";\n\nexport function RenderResultMessage(props: RenderMessageProps) {\n  const { message, inProgress, index, isCurrentMessage, AssistantMessage } = props;\n\n  if (message.isResultMessage() && inProgress && isCurrentMessage) {\n    return (\n      <AssistantMessage\n        key={index}\n        data-message-role=\"assistant\"\n        rawData={message}\n        isLoading={true}\n        isGenerating={true}\n      />\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM;AALC,SAAS,oBAAoB,OAA2B;AAC7D,QAAM,EAAE,SAAS,YAAY,OAAO,kBAAkB,iBAAiB,IAAI;AAE3E,MAAI,QAAQ,gBAAgB,KAAK,cAAc,kBAAkB;AAC/D,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,qBAAkB;AAAA,QAClB,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc;AAAA;AAAA,MAJT;AAAA,IAKP;AAAA,EAEJ;AACF;","names":[]}

package/dist/components/chat/messages/RenderResultMessage.mjs

@@ -1,8 +1,6 @@
 import {
   RenderResultMessage
-} from "../../../chunk-6INMITFA.mjs";
-import "../../../chunk-CBBFRI3Q.mjs";
-import "../../../chunk-FZC7X5PK.mjs";
+} from "../../../chunk-F7VWGY77.mjs";
 import "../../../chunk-MRXNTQOX.mjs";
 export {
   RenderResultMessage