feat: chat interface redesign (CopilotKit#1419)

Author: ranst91

CopilotKit/.changeset/modern-comics-flow.md

@@ -0,0 +1,5 @@
+---
+"@copilotkit/react-ui": minor
+---
+
+- feat(chat): redesign chat

CopilotKit/examples/next-openai/src/styles/globals.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.copilotKitHeader {
+    --copilot-kit-primary-color: rgb(255, 255, 255);
+    --copilot-kit-contrast-color: rgb(28, 28, 28);
+}

CopilotKit/packages/react-ui/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>
   );
 }

CopilotKit/packages/react-ui/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,
     }),

CopilotKit/packages/react-ui/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>

CopilotKit/packages/react-ui/src/components/chat/Header.tsx

@@ -1,15 +1,20 @@
 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();
 
   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>
   );
 };