@copilotkit/react-ui 1.7.2-next.2 → 1.8.0-next.4

package/src/components/chat/Input.tsx

@@ -5,7 +5,7 @@ import AutoResizingTextarea from "./Textarea";
 import { usePushToTalk } from "../../hooks/use-push-to-talk";
 import { useCopilotContext } from "@copilotkit/react-core";
 
-export const Input = ({ inProgress, onSend, isVisible = false }: InputProps) => {
+export const Input = ({ inProgress, onSend, isVisible = false, onStop }: InputProps) => {
   const context = useChatContext();
   const copilotContext = useCopilotContext();
 
@@ -42,10 +42,8 @@ export const Input = ({ inProgress, onSend, isVisible = false }: InputProps) =>
     inProgress,
   });
 
-  const sendIcon =
-    inProgress || pushToTalkState === "transcribing"
-      ? context.icons.activityIcon
-      : context.icons.sendIcon;
+  const isInProgress = inProgress || pushToTalkState === "transcribing";
+  const buttonIcon = isInProgress ? context.icons.stopIcon : context.icons.sendIcon;
   const showPushToTalk =
     pushToTalkConfigured &&
     (pushToTalkState === "idle" || pushToTalkState === "recording") &&
@@ -55,50 +53,61 @@ export const Input = ({ inProgress, onSend, isVisible = false }: InputProps) =>
     const interruptEvent = copilotContext.langGraphInterruptAction?.event;
     const interruptInProgress =
       interruptEvent?.name === "LangGraphInterruptEvent" && !interruptEvent?.response;
+
     return (
-      !inProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interruptInProgress
+      (isInProgress || (!isInProgress && text.trim().length > 0)) &&
+      pushToTalkState === "idle" &&
+      !interruptInProgress
     );
   };
 
   const sendDisabled = !canSend();
 
   return (
-    <div className="copilotKitInput" onClick={handleDivClick}>
-      <AutoResizingTextarea
-        ref={textareaRef}
-        placeholder={context.labels.placeholder}
-        autoFocus={true}
-        maxRows={5}
-        value={text}
-        onChange={(event) => setText(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
-            if (canSend()) {
-              send();
+    <div className="copilotKitInputContainer">
+      <div className="copilotKitInput" onClick={handleDivClick}>
+        <AutoResizingTextarea
+          ref={textareaRef}
+          placeholder={context.labels.placeholder}
+          autoFocus={true}
+          maxRows={5}
+          value={text}
+          onChange={(event) => setText(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              if (canSend()) {
+                send();
+              }
             }
-          }
-        }}
-      />
-      <div className="copilotKitInputControls">
-        {showPushToTalk && (
+          }}
+        />
+        <div className="copilotKitInputControls">
+          <div style={{ flexGrow: 1 }} />
+          {showPushToTalk && (
+            <button
+              onClick={() =>
+                setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing")
+              }
+              className={
+                pushToTalkState === "recording"
+                  ? "copilotKitInputControlButton copilotKitPushToTalkRecording"
+                  : "copilotKitInputControlButton"
+              }
+            >
+              {context.icons.pushToTalkIcon}
+            </button>
+          )}
           <button
-            onClick={() =>
-              setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing")
-            }
-            className={pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : ""}
+            disabled={sendDisabled}
+            onClick={isInProgress ? onStop : send}
+            data-copilotkit-in-progress={inProgress}
+            data-test-id={inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready"}
+            className="copilotKitInputControlButton"
           >
-            {context.icons.pushToTalkIcon}
+            {buttonIcon}
           </button>
-        )}
-        <button
-          disabled={sendDisabled}
-          onClick={send}
-          data-copilotkit-in-progress={!!inProgress}
-          data-testid={inProgress ? "copilot-chat-request-in-progress" : undefined}
-        >
-          {sendIcon}
-        </button>
+        </div>
       </div>
     </div>
   );

package/src/components/chat/Markdown.tsx

@@ -25,9 +25,6 @@ export const Markdown = ({ content }: MarkdownProps) => {
 };
 
 const components: Components = {
-  p({ children }) {
-    return <p>{children}</p>;
-  },
   a({ children, ...props }) {
     return (
       <a

package/src/components/chat/Messages.tsx

@@ -14,6 +14,10 @@ export const Messages = ({
   RenderResultMessage,
   AssistantMessage,
   UserMessage,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
 }: MessagesProps) => {
   const context = useChatContext();
   const initialMessages = useMemo(
@@ -44,62 +48,70 @@ export const Messages = ({
 
   return (
     <div className="copilotKitMessages" ref={messagesContainerRef}>
-      {messages.map((message, index) => {
-        const isCurrentMessage = index === messages.length - 1;
-
-        if (message.isTextMessage()) {
-          return (
-            <RenderTextMessage
-              key={index}
-              message={message}
-              inProgress={inProgress}
-              index={index}
-              isCurrentMessage={isCurrentMessage}
-              AssistantMessage={AssistantMessage}
-              UserMessage={UserMessage}
-            />
-          );
-        } else if (message.isActionExecutionMessage()) {
-          return (
-            <RenderActionExecutionMessage
-              key={index}
-              message={message}
-              inProgress={inProgress}
-              index={index}
-              isCurrentMessage={isCurrentMessage}
-              actionResult={actionResults[message.id]}
-              AssistantMessage={AssistantMessage}
-              UserMessage={UserMessage}
-            />
-          );
-        } else if (message.isAgentStateMessage()) {
-          return (
-            <RenderAgentStateMessage
-              key={index}
-              message={message}
-              inProgress={inProgress}
-              index={index}
-              isCurrentMessage={isCurrentMessage}
-              AssistantMessage={AssistantMessage}
-              UserMessage={UserMessage}
-            />
-          );
-        } else if (message.isResultMessage()) {
-          return (
-            <RenderResultMessage
-              key={index}
-              message={message}
-              inProgress={inProgress}
-              index={index}
-              isCurrentMessage={isCurrentMessage}
-              AssistantMessage={AssistantMessage}
-              UserMessage={UserMessage}
-            />
-          );
-        }
-      })}
-      {interrupt}
-      <footer ref={messagesEndRef}>{children}</footer>
+      <div className="copilotKitMessagesContainer">
+        {messages.map((message, index) => {
+          const isCurrentMessage = index === messages.length - 1;
+
+          if (message.isTextMessage()) {
+            return (
+              <RenderTextMessage
+                key={index}
+                message={message}
+                inProgress={inProgress}
+                index={index}
+                isCurrentMessage={isCurrentMessage}
+                AssistantMessage={AssistantMessage}
+                UserMessage={UserMessage}
+                onRegenerate={onRegenerate}
+                onCopy={onCopy}
+                onThumbsUp={onThumbsUp}
+                onThumbsDown={onThumbsDown}
+              />
+            );
+          } else if (message.isActionExecutionMessage()) {
+            return (
+              <RenderActionExecutionMessage
+                key={index}
+                message={message}
+                inProgress={inProgress}
+                index={index}
+                isCurrentMessage={isCurrentMessage}
+                actionResult={actionResults[message.id]}
+                AssistantMessage={AssistantMessage}
+                UserMessage={UserMessage}
+              />
+            );
+          } else if (message.isAgentStateMessage()) {
+            return (
+              <RenderAgentStateMessage
+                key={index}
+                message={message}
+                inProgress={inProgress}
+                index={index}
+                isCurrentMessage={isCurrentMessage}
+                AssistantMessage={AssistantMessage}
+                UserMessage={UserMessage}
+              />
+            );
+          } else if (message.isResultMessage()) {
+            return (
+              <RenderResultMessage
+                key={index}
+                message={message}
+                inProgress={inProgress}
+                index={index}
+                isCurrentMessage={isCurrentMessage}
+                AssistantMessage={AssistantMessage}
+                UserMessage={UserMessage}
+              />
+            );
+          }
+        })}
+        {interrupt}
+      </div>
+      <footer className="copilotKitMessagesFooter" ref={messagesEndRef}>
+        {children}
+      </footer>
     </div>
   );
 };

package/src/components/chat/Suggestion.tsx

@@ -18,11 +18,10 @@ export function Suggestion({ title, message, onClick, partial, className }: Sugg
         e.preventDefault();
         onClick(message);
       }}
-      className={className || "suggestion"}
+      className={className || (partial ? "suggestion loading" : "suggestion")}
       data-test-id="suggestion"
     >
-      {partial && SmallSpinnerIcon}
-      <span>{title}</span>
+      {partial ? SmallSpinnerIcon : <span>{title}</span>}
     </button>
   );
 }

package/src/components/chat/messages/AssistantMessage.tsx

@@ -1,17 +1,109 @@
 import { AssistantMessageProps } from "../props";
 import { useChatContext } from "../ChatContext";
 import { Markdown } from "../Markdown";
+import { RegenerateIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon } from "../Icons";
+import { useState } from "react";
 
 export const AssistantMessage = (props: AssistantMessageProps) => {
-  const { icons } = useChatContext();
-  const { message, isLoading, subComponent } = props;
+  const { icons, labels } = useChatContext();
+  const {
+    message,
+    isLoading,
+    subComponent,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+    isCurrentMessage,
+  } = props;
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    if (message && onCopy) {
+      navigator.clipboard.writeText(message);
+      setCopied(true);
+      onCopy(message);
+      setTimeout(() => setCopied(false), 2000);
+    } else if (message) {
+      navigator.clipboard.writeText(message);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleRegenerate = () => {
+    if (onRegenerate) {
+      onRegenerate();
+    }
+  };
+
+  const handleThumbsUp = () => {
+    if (onThumbsUp && message) {
+      onThumbsUp(message);
+    }
+  };
+
+  const handleThumbsDown = () => {
+    if (onThumbsDown && message) {
+      onThumbsDown(message);
+    }
+  };
+
+  const LoadingIcon = () => <span>{icons.activityIcon}</span>;
 
   return (
     <>
       {(message || isLoading) && (
         <div className="copilotKitMessage copilotKitAssistantMessage">
           {message && <Markdown content={message || ""} />}
-          {isLoading && icons.spinnerIcon}
+          {isLoading && <LoadingIcon />}
+
+          {message && !isLoading && (
+            <div
+              className={`copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`}
+            >
+              <button
+                className="copilotKitMessageControlButton"
+                onClick={handleRegenerate}
+                aria-label={labels.regenerateResponse}
+                title={labels.regenerateResponse}
+              >
+                {RegenerateIcon}
+              </button>
+              <button
+                className="copilotKitMessageControlButton"
+                onClick={handleCopy}
+                aria-label={labels.copyToClipboard}
+                title={labels.copyToClipboard}
+              >
+                {copied ? (
+                  <span style={{ fontSize: "10px", fontWeight: "bold" }}>✓</span>
+                ) : (
+                  CopyIcon
+                )}
+              </button>
+              {onThumbsUp && (
+                <button
+                  className="copilotKitMessageControlButton"
+                  onClick={handleThumbsUp}
+                  aria-label={labels.thumbsUp}
+                  title={labels.thumbsUp}
+                >
+                  {ThumbsUpIcon}
+                </button>
+              )}
+              {onThumbsDown && (
+                <button
+                  className="copilotKitMessageControlButton"
+                  onClick={handleThumbsDown}
+                  aria-label={labels.thumbsDown}
+                  title={labels.thumbsDown}
+                >
+                  {ThumbsDownIcon}
+                </button>
+              )}
+            </div>
+          )}
         </div>
       )}
       <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div>

package/src/components/chat/messages/RenderTextMessage.tsx

@@ -1,7 +1,18 @@
 import { RenderMessageProps } from "../props";
 
 export function RenderTextMessage(props: RenderMessageProps) {
-  const { message, inProgress, index, isCurrentMessage, UserMessage, AssistantMessage } = props;
+  const {
+    message,
+    inProgress,
+    index,
+    isCurrentMessage,
+    UserMessage,
+    AssistantMessage,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+  } = props;
 
   if (message.isTextMessage()) {
     if (message.role === "user") {
@@ -22,6 +33,11 @@ export function RenderTextMessage(props: RenderMessageProps) {
           rawData={message}
           isLoading={inProgress && isCurrentMessage && !message.content}
           isGenerating={inProgress && isCurrentMessage && !!message.content}
+          isCurrentMessage={isCurrentMessage}
+          onRegenerate={onRegenerate}
+          onCopy={onCopy}
+          onThumbsUp={onThumbsUp}
+          onThumbsDown={onThumbsDown}
         />
       );
     }

package/src/components/chat/props.ts

@@ -29,6 +29,26 @@ export interface MessagesProps {
   RenderActionExecutionMessage: React.ComponentType<RenderMessageProps>;
   RenderAgentStateMessage: React.ComponentType<RenderMessageProps>;
   RenderResultMessage: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: () => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: string) => void;
 }
 
 export interface Renderer {
@@ -47,6 +67,11 @@ export interface AssistantMessageProps {
 
   message?: string;
 
+  /**
+   * Indicates if this is the last message
+   */
+  isCurrentMessage?: boolean;
+
   /**
    * The raw data from the assistant's response
    */
@@ -68,6 +93,26 @@ export interface AssistantMessageProps {
    * Whether a response is generating, this is when the LLM is actively generating and streaming content.
    */
   isGenerating: boolean;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: () => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: string) => void;
 }
 
 export interface RenderMessageProps {
@@ -78,12 +123,33 @@ export interface RenderMessageProps {
   actionResult?: string;
   AssistantMessage: React.ComponentType<AssistantMessageProps>;
   UserMessage: React.ComponentType<UserMessageProps>;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: () => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: string) => void;
 }
 
 export interface InputProps {
   inProgress: boolean;
   onSend: (text: string) => Promise<Message>;
   isVisible?: boolean;
+  onStop?: () => void;
 }
 
 export interface ResponseButtonProps {

package/src/components/dev-console/console.tsx

@@ -82,39 +82,6 @@ export function CopilotDevConsole() {
     checkForUpdates();
   }, []);
 
-  useEffect(() => {
-    const handleResize = (entries: ResizeObserverEntry[]) => {
-      for (let entry of entries) {
-        if (entry.target === consoleRef.current) {
-          const width = entry.contentRect.width;
-          if (width < 400) {
-            setDebugButtonMode("compact");
-          } else {
-            setDebugButtonMode("full");
-          }
-        }
-      }
-    };
-
-    const observer = new ResizeObserver(handleResize);
-    if (consoleRef.current) {
-      observer.observe(consoleRef.current);
-
-      const initialWidth = consoleRef.current.getBoundingClientRect().width;
-      if (initialWidth < 400) {
-        setDebugButtonMode("compact");
-      } else {
-        setDebugButtonMode("full");
-      }
-    }
-
-    return () => {
-      if (consoleRef.current) {
-        observer.unobserve(consoleRef.current);
-      }
-    };
-  }, [consoleRef.current]);
-
   if (!showDevConsole) {
     return null;
   }
@@ -127,11 +94,6 @@ export function CopilotDevConsole() {
         (versionStatus === "outdated" ? "copilotKitDevConsoleWarnOutdated" : "")
       }
     >
-      <div className="copilotKitDevConsoleLogo">
-        <a href="https://copilotkit.ai" target="_blank">
-          {CopilotKitIcon}
-        </a>
-      </div>
       <VersionInfo
         showDevConsole={context.showDevConsole}
         versionStatus={versionStatus}
@@ -205,22 +167,20 @@ function VersionInfo({
     });
   };
 
-  return (
-    <div className="copilotKitVersionInfo">
-      <header>
-        COPILOTKIT DEV CONSOLE{showDevConsole === "auto" && <aside>{asideLabel}</aside>}
-      </header>
-      <section>
-        Version: {versionLabel} ({currentVersionLabel}) {versionIcon}
-      </section>
-      {(versionStatus === "update-available" || versionStatus === "outdated") && (
-        <footer>
-          <button onClick={handleCopyClick}>{copyStatus || installCommand}</button>
-        </footer>
-      )}
-    </div>
-  );
+  if (versionStatus === "update-available" || versionStatus === "outdated") {
+    return (
+      <div className="copilotKitVersionInfo">
+        <p>
+          {currentVersionLabel} {versionIcon}
+        </p>
+        <button onClick={handleCopyClick}>{copyStatus || installCommand}</button>
+      </div>
+    );
+  }
+
+  return null;
 }
+
 export default function DebugMenuButton({
   setShowDevConsole,
   checkForUpdates,
@@ -236,7 +196,9 @@ export default function DebugMenuButton({
   return (
     <div className="bg-black top-24 w-52 text-right">
       <Menu>
-        <MenuButton className={`copilotKitDebugMenuButton ${mode === "compact" ? "compact" : ""}`}>
+        <MenuButton
+          className={`copilotKitDebugMenuTriggerButton ${mode === "compact" ? "compact" : ""}`}
+        >
           {mode == "compact" ? "Debug" : <>Debug {ChevronDownIcon}</>}
         </MenuButton>