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

package/dist/index.mjs

@@ -1,55 +1,64 @@
 "use client";
 import "./chunk-EFZPSZWO.mjs";
-import "./chunk-MMVDU6DF.mjs";
+import "./chunk-MWC5OV7Z.mjs";
+import "./chunk-UCVCAGU7.mjs";
+import "./chunk-N7LTE54T.mjs";
 import "./chunk-SQMEPWVT.mjs";
 import {
   CopilotSidebar
-} from "./chunk-3PJA5MFR.mjs";
+} from "./chunk-LKCAF2HG.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
-  CopilotPopup
-} from "./chunk-ADTTDBLB.mjs";
-import "./chunk-AZU4QOV5.mjs";
-import "./chunk-YAGE7RCE.mjs";
-import "./chunk-VEC45H6Q.mjs";
-import "./chunk-RQNJNK2W.mjs";
+  DefaultResponseRenderer,
+  createResponseCache
+} from "./chunk-EJG6RRSX.mjs";
 import {
-  CopilotChat
-} from "./chunk-2C3ANQCY.mjs";
-import "./chunk-UWWMAJ7R.mjs";
-import "./chunk-WEYDZBT7.mjs";
-import "./chunk-OFYI4UU4.mjs";
+  DefaultStateRenderer
+} from "./chunk-MCO235PS.mjs";
 import {
-  UserMessage
-} from "./chunk-HEIDCT7I.mjs";
+  CopilotPopup
+} from "./chunk-LXCH2BIB.mjs";
+import "./chunk-KG6DW6R2.mjs";
+import "./chunk-CGVOCLHN.mjs";
+import "./chunk-GDJAAFIK.mjs";
 import "./chunk-V7W6IM2V.mjs";
-import {
-  AssistantMessage
-} from "./chunk-3VNMQWGT.mjs";
-import "./chunk-XB6QCUPB.mjs";
-import "./chunk-WGAZXTUA.mjs";
 import {
   CopilotDevConsole
-} from "./chunk-22K5DDPF.mjs";
+} from "./chunk-QGK5GOSC.mjs";
+import "./chunk-KXE2JCUH.mjs";
+import "./chunk-YC4NBUGE.mjs";
+import "./chunk-OTPAZXVR.mjs";
 import {
   shouldShowDevConsole
 } from "./chunk-6TCUJ3B7.mjs";
-import "./chunk-KXE2JCUH.mjs";
-import "./chunk-TI7SY2RI.mjs";
 import "./chunk-BH6PCAAL.mjs";
-import "./chunk-OTPAZXVR.mjs";
-import "./chunk-QXTRFMPM.mjs";
+import "./chunk-VC4NO5QZ.mjs";
+import {
+  CopilotChat
+} from "./chunk-5GNYGURH.mjs";
+import {
+  AssistantMessage
+} from "./chunk-FBYETUFL.mjs";
+import "./chunk-XB6QCUPB.mjs";
+import "./chunk-UWWMAJ7R.mjs";
+import "./chunk-WEYDZBT7.mjs";
+import "./chunk-7RIBDD4K.mjs";
+import {
+  UserMessage
+} from "./chunk-HEIDCT7I.mjs";
+import "./chunk-TOQ7P4DO.mjs";
+import "./chunk-2LRE4W6A.mjs";
 import "./chunk-YQFVRDNC.mjs";
 import {
   Markdown
-} from "./chunk-YQ3D5IQV.mjs";
-import "./chunk-6FTRYYR5.mjs";
-import "./chunk-3XAXY2Z3.mjs";
+} from "./chunk-XNQO5AZZ.mjs";
+import "./chunk-GJME6MK4.mjs";
+import "./chunk-UZTZXMYS.mjs";
 import {
   useChatContext
-} from "./chunk-CBBFRI3Q.mjs";
-import "./chunk-UPTB2MVO.mjs";
-import "./chunk-FZC7X5PK.mjs";
+} from "./chunk-5JY5QJ2W.mjs";
+import "./chunk-PCTCOQK2.mjs";
+import "./chunk-ORSMX3SE.mjs";
 import "./chunk-IU3WTXLQ.mjs";
 import "./chunk-T26KLXLH.mjs";
 import {
@@ -64,8 +73,11 @@ export {
   CopilotDevConsole,
   CopilotPopup,
   CopilotSidebar,
+  DefaultResponseRenderer,
+  DefaultStateRenderer,
   Markdown,
   UserMessage,
+  createResponseCache,
   shouldShowDevConsole,
   useChatContext,
   useCopilotChatSuggestions

package/dist/types/css.d.ts

@@ -4,13 +4,19 @@ interface CopilotKitCSSProperties extends CSSProperties {
     "--copilot-kit-primary-color"?: string;
     "--copilot-kit-contrast-color"?: string;
     "--copilot-kit-secondary-color"?: string;
-    "--copilot-kit-secondary-contrast-color"?: string;
     "--copilot-kit-background-color"?: string;
     "--copilot-kit-muted-color"?: string;
+    "--copilot-kit-text-light-color"?: string;
+    "--copilot-kit-text-dark-color"?: string;
     "--copilot-kit-separator-color"?: string;
     "--copilot-kit-scrollbar-color"?: string;
+    "--copilot-kit-header-color"?: string;
     "--copilot-kit-response-button-color"?: string;
     "--copilot-kit-response-button-background-color"?: string;
+    "--copilot-kit-shadow-sm"?: string;
+    "--copilot-kit-shadow-md"?: string;
+    "--copilot-kit-shadow-lg"?: string;
+    "--copilot-kit-text-color"?: string;
 }
 
 export { CopilotKitCSSProperties };

package/dist/types/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/css.ts"],"sourcesContent":["// autogenerated (see postcss.config.js) - do not edit\nimport { CSSProperties } from \"react\";\n\nexport interface CopilotKitCSSProperties extends CSSProperties {\n  \"--copilot-kit-primary-color\"?: string;\n  \"--copilot-kit-contrast-color\"?: string;\n  \"--copilot-kit-secondary-color\"?: string;\n  \"--copilot-kit-secondary-contrast-color\"?: string;\n  \"--copilot-kit-background-color\"?: string;\n  \"--copilot-kit-muted-color\"?: string;\n  \"--copilot-kit-separator-color\"?: string;\n  \"--copilot-kit-scrollbar-color\"?: string;\n  \"--copilot-kit-response-button-color\"?: string;\n  \"--copilot-kit-response-button-background-color\"?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../src/types/css.ts"],"sourcesContent":["// autogenerated (see postcss.config.js) - do not edit\nimport { CSSProperties } from \"react\";\n\nexport interface CopilotKitCSSProperties extends CSSProperties {\n  \"--copilot-kit-primary-color\"?: string;\n  \"--copilot-kit-contrast-color\"?: string;\n  \"--copilot-kit-secondary-color\"?: string;\n  \"--copilot-kit-background-color\"?: string;\n  \"--copilot-kit-muted-color\"?: string;\n  \"--copilot-kit-text-color\"?: string;\n  \"--copilot-kit-separator-color\"?: string;\n  \"--copilot-kit-scrollbar-color\"?: string;\n  \"--copilot-kit-response-button-color\"?: string;\n  \"--copilot-kit-response-button-background-color\"?: string;\n  \"--copilot-kit-shadow-sm\"?: string;\n  \"--copilot-kit-shadow-md\"?: string;\n  \"--copilot-kit-shadow-lg\"?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.7.2-next.1",
+  "version": "1.8.0-next.3",
   "sideEffects": [
     "**/*.css"
   ],
@@ -50,9 +50,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.7.2-next.1",
-    "@copilotkit/runtime-client-gql": "1.7.2-next.1",
-    "@copilotkit/shared": "1.7.2-next.1"
+    "@copilotkit/react-core": "1.8.0-next.3",
+    "@copilotkit/runtime-client-gql": "1.8.0-next.3",
+    "@copilotkit/shared": "1.8.0-next.3"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -118,6 +118,26 @@ export interface CopilotChatProps {
    */
   onReloadMessages?: OnReloadMessages;
 
+  /**
+   * A callback function to regenerate the assistant's response
+   */
+  onRegenerate?: () => void;
+
+  /**
+   * A callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * A callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: string) => void;
+
+  /**
+   * A callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: string) => void;
+
   /**
    * Icons can be used to set custom icons for the chat window.
    */
@@ -254,6 +274,10 @@ export function CopilotChat({
   onInProgress,
   onStopGeneration,
   onReloadMessages,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
   Messages = DefaultMessages,
   RenderTextMessage = DefaultRenderTextMessage,
   RenderActionExecutionMessage = DefaultRenderActionExecutionMessage,
@@ -312,9 +336,22 @@ export function CopilotChat({
   const chatContext = React.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
 
+  const handleRegenerate = () => {
+    if (onRegenerate) {
+      onRegenerate();
+    }
+
+    reloadMessages();
+  };
+
+  const handleCopy = (message: string) => {
+    if (onCopy) {
+      onCopy(message);
+    }
+  };
+
   return (
     <WrappedCopilotChat icons={icons} labels={labels} className={className}>
-      <CopilotDevConsole />
       <Messages
         AssistantMessage={AssistantMessage}
         UserMessage={UserMessage}
@@ -324,32 +361,32 @@ export function CopilotChat({
         RenderResultMessage={RenderResultMessage}
         messages={visibleMessages}
         inProgress={isLoading}
+        onRegenerate={handleRegenerate}
+        onCopy={handleCopy}
+        onThumbsUp={onThumbsUp}
+        onThumbsDown={onThumbsDown}
       >
         {currentSuggestions.length > 0 && (
-          <div>
-            <h6>Suggested:</h6>
-            <div className="suggestions">
-              {currentSuggestions.map((suggestion, index) => (
-                <Suggestion
-                  key={index}
-                  title={suggestion.title}
-                  message={suggestion.message}
-                  partial={suggestion.partial}
-                  className={suggestion.className}
-                  onClick={(message) => sendMessage(message)}
-                />
-              ))}
-            </div>
+          <div className="suggestions">
+            {currentSuggestions.map((suggestion, index) => (
+              <Suggestion
+                key={index}
+                title={suggestion.title}
+                message={suggestion.message}
+                partial={suggestion.partial}
+                className={suggestion.className}
+                onClick={(message) => sendMessage(message)}
+              />
+            ))}
           </div>
         )}
-        {showResponseButton && visibleMessages.length > 0 && (
-          <ResponseButton
-            onClick={isLoading ? stopGeneration : reloadMessages}
-            inProgress={isLoading}
-          />
-        )}
       </Messages>
-      <Input inProgress={isLoading} onSend={sendMessage} isVisible={isVisible} />
+      <Input
+        inProgress={isLoading}
+        onSend={sendMessage}
+        isVisible={isVisible}
+        onStop={stopGeneration}
+      />
     </WrappedCopilotChat>
   );
 }

package/src/components/chat/ChatContext.tsx

@@ -99,6 +99,30 @@ export interface CopilotChatLabels {
    * @default "Regenerate response"
    */
   regenerateResponse?: string;
+
+  /**
+   * The label for the copy button.
+   * @default "Copy to clipboard"
+   */
+  copyToClipboard?: string;
+
+  /**
+   * The label for the thumbs up button.
+   * @default "Thumbs up"
+   */
+  thumbsUp?: string;
+
+  /**
+   * The label for the thumbs down button.
+   * @default "Thumbs down"
+   */
+  thumbsDown?: string;
+
+  /**
+   * The text to display when content is copied.
+   * @default "Copied!"
+   */
+  copied?: string;
 }
 
 interface ChatContext {
@@ -150,6 +174,10 @@ export const ChatContextProvider = ({
         error: "❌ An error occurred. Please try again.",
         stopGenerating: "Stop generating",
         regenerateResponse: "Regenerate response",
+        copyToClipboard: "Copy to clipboard",
+        thumbsUp: "Thumbs up",
+        thumbsDown: "Thumbs down",
+        copied: "Copied!",
       },
       ...labels,
     }),
@@ -167,7 +195,7 @@ export const ChatContextProvider = ({
         spinnerIcon: DefaultIcons.SpinnerIcon,
         stopIcon: DefaultIcons.StopIcon,
         regenerateIcon: DefaultIcons.RegenerateIcon,
-        pushToTalkIcon: DefaultIcons.PushToTalkIcon,
+        pushToTalkIcon: DefaultIcons.MicrophoneIcon,
       },
       ...icons,
     }),

package/src/components/chat/CodeBlock.tsx

@@ -92,12 +92,10 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
         <span className="copilotKitCodeBlockToolbarLanguage">{language}</span>
         <div className="copilotKitCodeBlockToolbarButtons">
           <button className="copilotKitCodeBlockToolbarButton" onClick={downloadAsFile}>
-            <DownloadIcon />
-            <span className="sr-only">Download</span>
+            {DownloadIcon}
           </button>
           <button className="copilotKitCodeBlockToolbarButton" onClick={onCopy}>
-            {isCopied ? <CheckIcon /> : <CopyIcon />}
-            <span className="sr-only">Copy code</span>
+            {isCopied ? CheckIcon : CopyIcon}
           </button>
         </div>
       </div>

package/src/components/chat/Header.tsx

@@ -1,5 +1,7 @@
 import { HeaderProps } from "./props";
 import { useChatContext } from "./ChatContext";
+import { CopilotDevConsole } from "../dev-console";
+import React from "react";
 
 export const Header = ({}: HeaderProps) => {
   const { setOpen, icons, labels } = useChatContext();
@@ -7,9 +9,12 @@ export const Header = ({}: HeaderProps) => {
   return (
     <div className="copilotKitHeader">
       <div>{labels.title}</div>
-      <button onClick={() => setOpen(false)} aria-label="Close">
-        {icons.headerCloseIcon}
-      </button>
+      <div className="copilotKitHeaderControls">
+        <CopilotDevConsole />
+        <button onClick={() => setOpen(false)} aria-label="Close">
+          {icons.headerCloseIcon}
+        </button>
+      </div>
     </div>
   );
 };

package/src/components/chat/Icons.tsx

@@ -51,7 +51,21 @@ export const SendIcon = (
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
-    strokeWidth={1.5}
+    strokeWidth="1.5"
+    stroke="currentColor"
+    width="24"
+    height="24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 19V5m0 0l-7 7m7-7l7 7" />
+  </svg>
+);
+
+export const MicrophoneIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
     stroke="currentColor"
     width="24"
     height="24"
@@ -59,165 +73,151 @@ export const SendIcon = (
     <path
       strokeLinecap="round"
       strokeLinejoin="round"
-      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"
+      d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
     />
   </svg>
 );
 
-export const SpinnerIcon = (
+export const StopIcon = (
   <svg
-    style={{
-      animation: "copilotKitSpinAnimation 1s linear infinite",
-      color: "rgb(107 114 128)",
-    }}
-    width="24"
-    height="24"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    width="24"
+    height="24"
   >
-    <circle
-      style={{ opacity: 0.25 }}
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      strokeWidth="4"
-    ></circle>
     <path
-      style={{ opacity: 0.75 }}
-      fill="currentColor"
-      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"
-    ></path>
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
+    />
   </svg>
 );
 
-export const SmallSpinnerIcon = (
+export const RegenerateIcon = (
   <svg
-    style={{
-      animation: "copilotKitSpinAnimation 1s linear infinite",
-    }}
-    width="13"
-    height="13"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
   >
-    <circle
-      style={{ opacity: 0.25 }}
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      strokeWidth="4"
-    ></circle>
     <path
-      style={{ opacity: 0.75 }}
-      fill="currentColor"
-      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"
-    ></path>
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+    />
   </svg>
 );
 
-export const ActivityIcon = (
+export const CopyIcon = (
   <svg
-    style={{
-      display: "inline-block",
-      marginLeft: "0.25rem",
-      marginRight: "0.25rem",
-    }}
-    height="24"
-    width="24"
-    viewBox="0 0 27 27"
     xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
   >
-    <circle className="copilotKitActivityDot1" cx="4" cy="12" r="3" />
-    <circle className="copilotKitActivityDot1 copilotKitActivityDot2" cx="12" cy="12" r="3" />
-    <circle className="copilotKitActivityDot1 copilotKitActivityDot3" cx="20" cy="12" r="3" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
+    />
   </svg>
 );
 
-export function CheckIcon({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      style={{ height: "1rem", width: "1rem" }}
-      className={className}
-      {...props}
-    >
-      <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" />
-    </svg>
-  );
-}
+export const SmallSpinnerIcon = (
+  <span className="copilotKitSpinner" style={{ width: "13px", height: "13px" }}></span>
+);
 
-export function DownloadIcon({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      style={{ height: "1rem", width: "1rem" }}
-      className={className}
-      {...props}
-    >
-      <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" />
-    </svg>
-  );
-}
+export const SpinnerIcon = (
+  <span className="copilotKitSpinner" style={{ width: "24px", height: "24px" }}></span>
+);
 
-export function CopyIcon({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      style={{ height: "1rem", width: "1rem" }}
-      className={className}
-      {...props}
-    >
-      <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" />
-    </svg>
-  );
-}
+export const ActivityIcon = (
+  <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+    <span className="copilotKitActivityDot" style={{ animationDelay: "0s" }}></span>
+    <span className="copilotKitActivityDot" style={{ animationDelay: "0.2s" }}></span>
+    <span className="copilotKitActivityDot" style={{ animationDelay: "0.4s" }}></span>
+  </div>
+);
 
-export const StopIcon = (
+export const ThumbsUpIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 256 256"
-    fill="currentColor"
-    style={{ height: "1rem", width: "1rem" }}
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
   >
-    <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" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"
+    />
   </svg>
 );
 
-export const RegenerateIcon = (
+export const ThumbsDownIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 256 256"
-    fill="currentColor"
-    style={{ height: "1rem", width: "1rem" }}
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
   >
-    <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" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 002.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 007.5 19.5a2.25 2.25 0 002.25 2.25.75.75 0 00.75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 002.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384"
+    />
   </svg>
 );
 
-export const PushToTalkIcon = (
+export const DownloadIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
-    strokeWidth={1.5}
+    strokeWidth="2"
     stroke="currentColor"
-    className="w-6 h-6"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
   >
     <path
       strokeLinecap="round"
       strokeLinejoin="round"
-      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"
+      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
     />
   </svg>
 );
+
+export const CheckIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    width="16"
+    height="16"
+    style={{ minWidth: "16px", minHeight: "16px" }}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+  </svg>
+);