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

package/src/components/crew/types.ts

@@ -0,0 +1,398 @@
+import { ReactNode } from "react";
+
+/**
+ * Status of a response or action that requires user input
+ */
+export type ResponseStatus = "inProgress" | "complete" | "executing";
+
+/**
+ * Response data structure for the ResponseRenderer
+ */
+export interface Response {
+  /**
+   * Unique identifier for the response
+   */
+  id: string;
+
+  /**
+   * The content of the response to display
+   */
+  content: string;
+
+  /**
+   * Optional metadata for the response
+   */
+  metadata?: Record<string, any>;
+}
+
+/**
+ * Optional cache for storing user feedback
+ */
+export interface ResponseCache<T extends { id: string }> {
+  /**
+   * Get feedback for a specific ID
+   */
+  getResponse: (id: string) => T | undefined;
+
+  /**
+   * Set feedback for a specific ID
+   */
+  setResponse: (id: string, response: T) => void;
+}
+
+/**
+ * Props for custom icon components
+ */
+export interface ResponseRendererIconProps {
+  className?: string;
+}
+
+/**
+ * Icons for the ResponseRenderer component
+ */
+export interface ResponseRendererIcons {
+  /**
+   * Icon for expanding content
+   */
+  expand?: React.ComponentType<ResponseRendererIconProps>;
+
+  /**
+   * Icon for collapsing content
+   */
+  collapse?: React.ComponentType<ResponseRendererIconProps>;
+}
+
+/**
+ * Labels for the ResponseRenderer component
+ */
+export interface ResponseRendererLabels {
+  /**
+   * Label for the response section
+   */
+  responseLabel?: string;
+
+  /**
+   * Label for the approve button
+   */
+  approveLabel?: string;
+
+  /**
+   * Label for the reject button
+   */
+  rejectLabel?: string;
+
+  /**
+   * Message shown when approved
+   */
+  approvedMessage?: string;
+
+  /**
+   * Message shown when rejected
+   */
+  rejectedMessage?: string;
+
+  /**
+   * Message shown when feedback is submitted
+   */
+  feedbackSubmittedMessage?: string;
+}
+
+/**
+ * Props for the content renderer component
+ */
+export interface ContentRendererProps {
+  /**
+   * Content to render
+   */
+  content: string;
+
+  /**
+   * CSS class name for styling
+   */
+  className?: string;
+}
+
+/**
+ * Props for the feedback button component
+ */
+export interface FeedbackButtonProps {
+  /**
+   * The text to display on the button
+   */
+  label: string;
+
+  /**
+   * Function to call when the button is clicked
+   */
+  onClick: () => void;
+
+  /**
+   * CSS class name for styling
+   */
+  className?: string;
+}
+
+/**
+ * Props for the completed feedback display component
+ */
+export interface CompletedFeedbackProps {
+  /**
+   * The message to display
+   */
+  message: string;
+
+  /**
+   * CSS class name for styling
+   */
+  className?: string;
+}
+
+/**
+ * Props for the ResponseRenderer component
+ */
+export interface ResponseRendererProps {
+  /**
+   * The response data to render
+   */
+  response: Response;
+
+  /**
+   * The current status of the response
+   */
+  status: ResponseStatus;
+
+  /**
+   * Function to call when a response is given
+   */
+  onRespond?: (input: string) => void;
+
+  /**
+   * Custom icons for the component
+   */
+  icons?: ResponseRendererIcons;
+
+  /**
+   * Custom labels for the component
+   */
+  labels?: ResponseRendererLabels;
+
+  /**
+   * Custom component for rendering content
+   */
+  ContentRenderer?: React.ComponentType<ContentRendererProps>;
+
+  /**
+   * Custom component for rendering feedback buttons
+   */
+  FeedbackButton?: React.ComponentType<FeedbackButtonProps>;
+
+  /**
+   * Custom component for rendering completed feedback
+   */
+  CompletedFeedback?: React.ComponentType<CompletedFeedbackProps>;
+
+  /**
+   * CSS class for the root element
+   */
+  className?: string;
+
+  /**
+   * CSS class for the content element
+   */
+  contentClassName?: string;
+
+  /**
+   * CSS class for the actions container
+   */
+  actionsClassName?: string;
+
+  /**
+   * CSS class for feedback buttons
+   */
+  buttonClassName?: string;
+
+  /**
+   * CSS class for completed feedback
+   */
+  completedFeedbackClassName?: string;
+
+  /**
+   * Children nodes
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Base state item interface for agent state items
+ */
+export interface StateItem {
+  /**
+   * Unique identifier for the item
+   */
+  id: string;
+
+  /**
+   * Timestamp when the item was created
+   */
+  timestamp: string;
+}
+
+/**
+ * Tool execution state item
+ */
+export interface ToolStateItem extends StateItem {
+  /**
+   * Name of the tool that was executed
+   */
+  tool: string;
+
+  /**
+   * Optional thought process for the tool execution
+   */
+  thought?: string;
+
+  /**
+   * Result of the tool execution
+   */
+  result?: any;
+}
+
+/**
+ * Task state item
+ */
+export interface TaskStateItem extends StateItem {
+  /**
+   * Name of the task
+   */
+  name: string;
+
+  /**
+   * Description of the task
+   */
+  description?: string;
+}
+
+/**
+ * AgentState containing information about steps and tasks
+ */
+export interface AgentState {
+  /**
+   * Array of tool execution steps
+   */
+  steps?: ToolStateItem[];
+
+  /**
+   * Array of tasks
+   */
+  tasks?: TaskStateItem[];
+}
+
+/**
+ * Props for the item renderer component
+ */
+export interface StateItemRendererProps {
+  /**
+   * The item to render
+   */
+  item: ToolStateItem | TaskStateItem;
+
+  /**
+   * Whether the item is the newest
+   */
+  isNewest: boolean;
+
+  /**
+   * CSS class for the item container
+   */
+  className?: string;
+}
+
+/**
+ * Props for the skeleton loader component
+ */
+export interface SkeletonLoaderProps {
+  /**
+   * CSS class for the skeleton
+   */
+  className?: string;
+}
+
+/**
+ * Props for the DefaultStateRenderer component
+ */
+export interface StateRendererProps {
+  /**
+   * The state to render
+   */
+  state?: AgentState;
+
+  /**
+   * The current status
+   */
+  status: ResponseStatus;
+
+  /**
+   * Custom component for rendering individual state items
+   */
+  StateItemRenderer?: React.ComponentType<StateItemRendererProps>;
+
+  /**
+   * Custom component for showing a loading skeleton
+   */
+  SkeletonLoader?: React.ComponentType<SkeletonLoaderProps>;
+
+  /**
+   * Custom labels for the component
+   */
+  labels?: {
+    /**
+     * Label shown when in progress
+     */
+    inProgressLabel?: string;
+
+    /**
+     * Label shown when complete
+     */
+    completeLabel?: string;
+
+    /**
+     * Label shown when no items are present
+     */
+    emptyLabel?: string;
+  };
+
+  /**
+   * Custom icons for the component
+   */
+  icons?: ResponseRendererIcons;
+
+  /**
+   * CSS class for the root element
+   */
+  className?: string;
+
+  /**
+   * CSS class for the content container
+   */
+  contentClassName?: string;
+
+  /**
+   * CSS class for state items
+   */
+  itemClassName?: string;
+
+  /**
+   * Maximum height for the content area
+   */
+  maxHeight?: string;
+
+  /**
+   * Initial collapsed state
+   */
+  defaultCollapsed?: boolean;
+
+  /**
+   * Children nodes
+   */
+  children?: ReactNode;
+}

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>
 

package/src/components/help-modal/modal.tsx

@@ -1,73 +1,58 @@
-import React, { useMemo, useState } from "react";
-import { CloseIcon, LifeBuoyIcon, LoadingSpinnerIcon } from "./icons";
+import React, { useMemo, useState, useRef, useEffect } from "react";
+import { CloseIcon } from "./icons";
 
 export function CopilotKitHelpModal() {
   const [showHelpModal, setShowHelpModal] = useState(false);
-  const [issueDescription, setIssueDescription] = useState("");
-  const [email, setEmail] = useState("");
-  const [emailError, setEmailError] = useState("");
-  const [submitting, setSubmitting] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
 
-  const validateEmail = (email: string) => {
-    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-    return re.test(email);
-  };
+  // Close popover when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setShowHelpModal(false);
+      }
+    };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (email?.length > 0 && !validateEmail(email)) {
-      setEmailError("Please enter a valid email address");
-      return;
+    if (showHelpModal) {
+      document.addEventListener("mousedown", handleClickOutside);
     }
-    setSubmitting(true);
-
-    await fetch("https://api.segment.io/v1/track", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        event: "oss.dev-console.help",
-        anonymousId: window.crypto.randomUUID(),
-        properties: { email, text: issueDescription },
-        writeKey: "q0gQqvGYyw9pNyhIocNzefSYKGO1aiwW",
-      }),
-    });
 
-    // Reset
-    setEmailError("");
-    setEmail("");
-    setIssueDescription("");
-    setSubmitting(false);
-    setShowHelpModal(false);
-  };
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showHelpModal]);
 
   const HelpButton = () => (
     <button
-      onClick={() => setShowHelpModal(true)}
-      style={{ width: "50px", height: "30px", marginRight: "0.25rem" }}
-      className="text-sm p-0 bg-transparent rounded border border-blue-500"
+      ref={buttonRef}
+      onClick={() => setShowHelpModal(!showHelpModal)}
+      className="copilotKitDebugMenuTriggerButton relative"
       aria-label="Open Help"
     >
       Help
     </button>
   );
 
-  const submitButtonDisabled = useMemo(
-    () => submitting || !!emailError || issueDescription == null || issueDescription?.length == 0,
-    [submitting, emailError, issueDescription],
-  );
-
   return (
-    <>
+    <div className="relative">
       <HelpButton />
       {showHelpModal && (
         <div
-          className="fixed inset-0 flex items-center justify-center p-4"
-          style={{ backgroundColor: "rgba(11, 15, 26, 0.5)", zIndex: 99 }}
+          ref={popoverRef}
+          className="absolute mt-2 z-50"
+          style={{
+            top: "100%",
+            right: "-120px",
+            width: "380px",
+          }}
         >
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative">
+          <div className="bg-white rounded-lg shadow-xl w-full p-4 flex-col relative">
             <button
               className="absolute text-gray-400 hover:text-gray-600 focus:outline-none"
               style={{ top: "10px", right: "10px" }}
@@ -80,7 +65,7 @@ export function CopilotKitHelpModal() {
               <h2 className="text-2xl font-bold">Help Options</h2>
             </div>
             <div className="space-y-4 mb-4">
-              <div className="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
+              <div className="copilotKitHelpItemButton">
                 <a
                   href="https://docs.copilotkit.ai/coagents/troubleshooting/common-issues"
                   target="_blank"
@@ -89,7 +74,7 @@ export function CopilotKitHelpModal() {
                   Visit the Troubleshooting and FAQ section in the docs
                 </a>
               </div>
-              <div className="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
+              <div className="copilotKitHelpItemButton">
                 <a
                   href="https://go.copilotkit.ai/dev-console-support-discord"
                   target="_blank"
@@ -98,7 +83,7 @@ export function CopilotKitHelpModal() {
                   Go to Discord Support Channel (Community Support)
                 </a>
               </div>
-              <div className="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
+              <div className="copilotKitHelpItemButton">
                 <a
                   href="https://go.copilotkit.ai/dev-console-support-slack"
                   target="_blank"
@@ -108,57 +93,9 @@ export function CopilotKitHelpModal() {
                 </a>
               </div>
             </div>
-            <form onSubmit={handleSubmit} className="flex flex-col space-y-2">
-              <div>
-                <label htmlFor="feedback" className="block text-sm font-medium text-gray-700 mb-1">
-                  Let us know what your issue is:
-                </label>
-                <textarea
-                  id="feedback"
-                  rows={4}
-                  className="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500"
-                  placeholder="A Loom link / screen recording is always great!"
-                  onChange={(e) => setIssueDescription(e.target.value)}
-                  value={issueDescription}
-                  required
-                ></textarea>
-              </div>
-              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
-                  Email (optional):
-                </label>
-                <input
-                  type="email"
-                  id="email"
-                  className={`w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500 ${emailError ? "border-red-500" : ""}`}
-                  placeholder="Enter your email for follow-up"
-                  onChange={(e) => {
-                    setEmail(e.target.value);
-                    setEmailError("");
-                  }}
-                  value={email}
-                />
-                {emailError && <p className="text-red-500 text-sm mt-1">{emailError}</p>}
-              </div>
-              <div className="bg-gray-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg">
-                <button
-                  type="submit"
-                  onClick={handleSubmit}
-                  disabled={submitButtonDisabled}
-                  style={
-                    submitButtonDisabled
-                      ? { backgroundColor: "rgb(216, 216, 216)", color: "rgb(129, 129, 129)" }
-                      : undefined
-                  }
-                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-500 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:shadow-none"
-                >
-                  {submitting ? <LoadingSpinnerIcon color="white" /> : "Submit"}
-                </button>
-              </div>
-            </form>
           </div>
         </div>
       )}
-    </>
+    </div>
   );
 }

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./chat";
 export * from "./dev-console";
+export * from "./crew";