@agentscope-ai/chat 1.1.20 → 1.1.22

package/bin/client.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import Chat from '../components/AgentScopeRuntimeWebUI/demo';
+import Chat from '../lib/AgentScopeRuntimeWebUI/starter';
 
 
 // 从 window 对象获取配置

package/components/AGUI/components/HelpModal/icons.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+export const LifeBuoyIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-lifebuoy"
+  >
+    <g transform="translate(0, -1)">
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
+      <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+      <path d="M15 15l3.35 3.35" />
+      <path d="M9 15l-3.35 3.35" />
+      <path d="M5.65 5.65l3.35 3.35" />
+      <path d="M18.35 5.65l-3.35 3.35" />
+    </g>
+  </svg>
+);
+
+export const CloseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    width="20"
+    height="20"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+export const LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }: { color?: string }) => (
+  <svg
+    style={{
+      animation: "copilotKitSpinAnimation 1s linear infinite",
+      color,
+    }}
+    width="24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 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>
+  </svg>
+);

package/components/AGUI/components/HelpModal/index.tsx

@@ -0,0 +1 @@
+export { CopilotKitHelpModal } from "./modal";

package/components/AGUI/components/HelpModal/modal.tsx

@@ -0,0 +1,101 @@
+import React, { useMemo, useState, useRef, useEffect } from "react";
+import { CloseIcon } from "./icons";
+
+export function CopilotKitHelpModal() {
+  const [showHelpModal, setShowHelpModal] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // 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);
+      }
+    };
+
+    if (showHelpModal) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showHelpModal]);
+
+  const HelpButton = () => (
+    <button
+      ref={buttonRef}
+      onClick={() => setShowHelpModal(!showHelpModal)}
+      className="copilotKitDebugMenuTriggerButton relative"
+      aria-label="Open Help"
+    >
+      Help
+    </button>
+  );
+
+  return (
+    <div className="relative">
+      <HelpButton />
+      {showHelpModal && (
+        <div
+          ref={popoverRef}
+          className="absolute mt-2 z-50"
+          style={{
+            top: "100%",
+            right: "-120px",
+            width: "380px",
+          }}
+        >
+          <div className="copilotKitHelpModal rounded-lg shadow-xl w-full p-4 flex-col relative">
+            <button
+              className="copilotKitHelpModalCloseButton absolute text-gray-400 hover:text-gray-600 focus:outline-none"
+              style={{ top: "10px", right: "10px" }}
+              onClick={() => setShowHelpModal(false)}
+              aria-label="Close"
+            >
+              <CloseIcon />
+            </button>
+            <div className="w-full flex mb-6 justify-center">
+              <h2 className="text-2xl font-bold">Help Options</h2>
+            </div>
+            <div className="space-y-4 mb-4">
+              <div className="copilotKitHelpItemButton">
+                <a
+                  href="https://docs.copilotkit.ai/coagents/troubleshooting/common-issues"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Visit the Troubleshooting and FAQ section in the docs
+                </a>
+              </div>
+              <div className="copilotKitHelpItemButton">
+                <a
+                  href="https://go.copilotkit.ai/dev-console-support-discord"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Go to Discord Support Channel (Community Support)
+                </a>
+              </div>
+              <div className="copilotKitHelpItemButton">
+                <a
+                  href="https://go.copilotkit.ai/dev-console-support-slack"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Apply for Priority Direct Slack Support
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/AGUI/components/chat/Button.tsx

@@ -0,0 +1,18 @@
+import { ButtonProps } from "./props";
+import { useChatContext } from "./ChatContext";
+
+export const Button = ({}: ButtonProps) => {
+  const { open, setOpen, icons } = useChatContext();
+
+  return (
+    <div onClick={() => setOpen(!open)}>
+      <button
+        className={`copilotKitButton ${open ? "open" : ""}`}
+        aria-label={open ? "Close Chat" : "Open Chat"}
+      >
+        <div className="copilotKitButtonIcon copilotKitButtonIconOpen">{icons.openIcon}</div>
+        <div className="copilotKitButtonIcon copilotKitButtonIconClose">{icons.closeIcon}</div>
+      </button>
+    </div>
+  );
+};