@copilotkit/react-ui 0.0.0-test-custom-tag-prerelease-1-20250108200215

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

@@ -0,0 +1,164 @@
+import React, { useMemo, useState } from "react";
+import { CloseIcon, LifeBuoyIcon, LoadingSpinnerIcon } 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 validateEmail = (email: string) => {
+    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return re.test(email);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (email?.length > 0 && !validateEmail(email)) {
+      setEmailError("Please enter a valid email address");
+      return;
+    }
+    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);
+  };
+
+  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"
+      aria-label="Open Help"
+    >
+      Help
+    </button>
+  );
+
+  const submitButtonDisabled = useMemo(
+    () => submitting || !!emailError || issueDescription == null || issueDescription?.length == 0,
+    [submitting, emailError, issueDescription],
+  );
+
+  return (
+    <>
+      <HelpButton />
+      {showHelpModal && (
+        <div
+          className="fixed inset-0 flex items-center justify-center p-4"
+          style={{ backgroundColor: "rgba(11, 15, 26, 0.5)", zIndex: 99 }}
+        >
+          <div className="bg-white rounded-lg shadow-xl max-w-md 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" }}
+              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="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
+                <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="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
+                <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="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
+                <a
+                  href="https://go.copilotkit.ai/dev-console-support-slack"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Apply for Priority Direct Slack Support
+                </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>
+      )}
+    </>
+  );
+}

package/src/components/index.ts

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

package/src/context/index.ts

@@ -0,0 +1 @@
+export {};

package/src/css/animations.css

@@ -0,0 +1,35 @@
+.copilotKitActivityDot1 {
+  animation: copilotKitActivityDotsAnimation 1.05s infinite;
+}
+.copilotKitActivityDot2 {
+  animation-delay: 0.1s;
+}
+.copilotKitActivityDot3 {
+  animation-delay: 0.2s;
+}
+@keyframes copilotKitActivityDotsAnimation {
+  0%,
+  57.14% {
+    animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
+    transform: translate(0);
+  }
+  28.57% {
+    animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translate(0);
+  }
+}
+
+@keyframes copilotKitSpinAnimation {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes copilotKitPulseAnimation {
+  50% {
+    opacity: 0.5;
+  }
+}

package/src/css/button.css

@@ -0,0 +1,56 @@
+.copilotKitButton {
+  width: 3.5rem;
+  height: 3.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  outline: none;
+  position: relative;
+  transform: scale(1);
+  transition: transform 200ms;
+  background-color: var(--copilot-kit-primary-color);
+  color: var(--copilot-kit-contrast-color);
+  cursor: pointer;
+}
+
+.copilotKitButton:hover {
+  transform: scale(1.1);
+}
+
+.copilotKitButton:active {
+  transform: scale(0.75);
+}
+
+.copilotKitButtonIcon {
+  transition:
+    opacity 100ms,
+    transform 300ms;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* State when the chat is open */
+.copilotKitButton.open .copilotKitButtonIconOpen {
+  transform: translate(-50%, -50%) scale(0) rotate(90deg);
+  opacity: 0;
+}
+
+.copilotKitButton.open .copilotKitButtonIconClose {
+  transform: translate(-50%, -50%) scale(1) rotate(0deg);
+  opacity: 1;
+}
+
+/* State when the chat is closed */
+.copilotKitButton:not(.open) .copilotKitButtonIconOpen {
+  transform: translate(-50%, -50%) scale(1) rotate(0deg);
+  opacity: 1;
+}
+
+.copilotKitButton:not(.open) .copilotKitButtonIconClose {
+  transform: translate(-50%, -50%) scale(0) rotate(-90deg);
+  opacity: 0;
+}

package/src/css/colors.css

@@ -0,0 +1,12 @@
+html {
+  --copilot-kit-primary-color: rgb(59 130 246);
+  --copilot-kit-contrast-color: rgb(255 255 255);
+  --copilot-kit-secondary-color: rgb(243 244 246);
+  --copilot-kit-secondary-contrast-color: rgb(0 0 0);
+  --copilot-kit-background-color: rgb(255 255 255);
+  --copilot-kit-muted-color: rgb(106 106 106);
+  --copilot-kit-separator-color: rgba(0, 0, 0, 0.08);
+  --copilot-kit-scrollbar-color: rgba(0, 0, 0, 0.2);
+  --copilot-kit-response-button-color: #333;
+  --copilot-kit-response-button-background-color: #fff;
+}

package/src/css/console.css

@@ -0,0 +1,134 @@
+.copilotKitDevConsole {
+  background-color: #f3f4f6;
+  padding-left: 10px;
+  padding-right: 10px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #cecece;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.copilotKitDevConsole.copilotKitDevConsoleWarnOutdated {
+  background-color: #f9caca;
+}
+
+.copilotKitDevConsole .copilotKitVersionInfo {
+  flex: 1;
+  margin-left: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.copilotKitDevConsole .copilotKitVersionInfo header {
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.copilotKitDevConsole .copilotKitVersionInfo footer {
+  margin-top: 10px;
+}
+
+.copilotKitDevConsole .copilotKitVersionInfo footer button {
+  font-size: 11px;
+  font-weight: normal;
+  font-family: monospace;
+  background-color: white;
+  border: 1px solid #979797;
+  padding: 1px 12px;
+  padding-left: 5px;
+  border-radius: 4px;
+  display: inline-block;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 260px;
+  text-overflow: ellipsis;
+}
+
+.copilotKitDevConsole .copilotKitVersionInfo header aside {
+  display: inline;
+  font-weight: normal;
+  color: #7f7a7a;
+  margin-left: 5px;
+}
+
+.copilotKitDevConsole .copilotKitVersionInfo section {
+  font-size: 11px;
+}
+
+.copilotKitDevConsole .copilotKitVersionInfo section svg {
+  margin-left: 3px;
+  margin-top: -3px;
+}
+
+.copilotKitDevConsole .copilotKitDebugMenuButton {
+  font-size: 11px;
+  font-weight: bold;
+  display: flex;
+  width: 90px;
+  height: 30px;
+  background-color: #d8d8d8;
+  border: 1px solid #979797;
+  border-radius: 6px;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+.copilotKitDebugMenuButton.compact {
+  width: 35px;
+  color: black;
+  justify-content: center;
+  outline: none;
+  font-size: 8px;
+}
+
+.copilotKitDevConsole .copilotKitDebugMenuButton:hover {
+  background-color: #c7c7c7;
+}
+
+.copilotKitDevConsole .copilotKitDebugMenuButton > svg {
+  margin-left: 10px;
+}
+
+.copilotKitDebugMenu {
+  background-color: #d8d8d8;
+  margin-top: 2px;
+  border-radius: 6px;
+  border: 1px solid #979797;
+  padding: 0.25rem;
+  outline: none;
+  font-size: 13px;
+}
+
+.copilotKitDebugMenuItem {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 10px;
+  padding-right: 10px;
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.copilotKitDebugMenuItem:hover {
+  background-color: #c7c7c7;
+  border-radius: 4px;
+}
+
+.copilotKitDebugMenu[data-closed] {
+  transform: scale(0.95); /* data-[closed]:scale-95 */
+  opacity: 0; /* data-[closed]:opacity-0 */
+}
+
+.copilotKitDebugMenu hr {
+  height: 1px;
+  border: none; /* Remove 3D look */
+  background-color: #979797; /* Set color */
+  margin: 0.25rem;
+}

package/src/css/header.css

@@ -0,0 +1,43 @@
+.copilotKitHeader {
+  height: 56px;
+  font-weight: 500;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: var(--copilot-kit-primary-color);
+  color: var(--copilot-kit-contrast-color);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom: 1px solid var(--copilot-kit-separator-color);
+}
+
+.copilotKitSidebar .copilotKitHeader {
+  border-radius: 0;
+}
+
+@media (min-width: 640px) {
+  .copilotKitHeader {
+    padding-left: 24px;
+    padding-right: 24px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+}
+
+.copilotKitHeader > button {
+  border: 0;
+  padding: 0px;
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+  outline: none;
+  color: var(--copilot-kit-contrast-color);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.copilotKitHeader > button:focus {
+  outline: none;
+}

package/src/css/input.css

@@ -0,0 +1,89 @@
+.copilotKitInput {
+  border-top: 1px solid var(--copilot-kit-separator-color);
+  padding-left: 2rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  cursor: text;
+  position: relative;
+  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+  background-color: var(--copilot-kit-background-color);
+}
+
+.copilotKitInput > .copilotKitInputControls > button {
+  padding: 0.25rem;
+  cursor: pointer;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  transform: scale(1);
+  color: rgba(0, 0, 0, 0.25);
+  -webkit-appearance: button;
+  appearance: button;
+  background-color: transparent;
+  background-image: none;
+  text-transform: none;
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  border: 0;
+  margin: 0;
+  text-indent: 0px;
+  text-shadow: none;
+  display: inline-block;
+  text-align: center;
+  margin-left: 0.5rem; /* Add margin to separate button from textarea */
+}
+
+.copilotKitInput > .copilotKitInputControls > button:not([disabled]) {
+  color: var(--copilot-kit-primary-color);
+}
+
+.copilotKitInput > .copilotKitInputControls > button:not([disabled]):hover {
+  transform: scale(1.1);
+}
+
+.copilotKitInput > .copilotKitInputControls > button[disabled] {
+  color: var(--copilot-kit-muted-color);
+}
+
+.copilotKitInputControls {
+  display: flex;
+}
+
+.copilotKitInput > textarea {
+  flex: 1; /* Allow textarea to take up remaining space */
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  resize: none;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: text;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-weight: inherit;
+  color: var(--copilot-kit-secondary-contrast-color);
+  border: 0px;
+  background-color: var(--copilot-kit-background-color);
+}
+
+.copilotKitInput > textarea::placeholder {
+  color: var(--copilot-kit-muted-color);
+  opacity: 1;
+}
+
+.copilotKitInput > .copilotKitInputControls > button.copilotKitPushToTalkRecording {
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  animation: copilotKitPulseAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}

package/src/css/markdown.css

@@ -0,0 +1,136 @@
+.copilotKitMarkdown h1,
+.copilotKitMarkdown h2,
+.copilotKitMarkdown h3,
+.copilotKitMarkdown h4,
+.copilotKitMarkdown h5,
+.copilotKitMarkdown h6 {
+  font-weight: bold;
+  line-height: 1.2;
+}
+
+.copilotKitMarkdown h1:not(:last-child),
+.copilotKitMarkdown h2:not(:last-child),
+.copilotKitMarkdown h3:not(:last-child),
+.copilotKitMarkdown h4:not(:last-child),
+.copilotKitMarkdown h5:not(:last-child),
+.copilotKitMarkdown h6:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.copilotKitMarkdown h1 {
+  font-size: 1.5em;
+}
+
+.copilotKitMarkdown h2 {
+  font-size: 1.25em;
+  font-weight: 600;
+}
+
+.copilotKitMarkdown h3 {
+  font-size: 1.1em;
+}
+
+.copilotKitMarkdown h4 {
+  font-size: 1em;
+}
+
+.copilotKitMarkdown h5 {
+  font-size: 0.9em;
+}
+
+.copilotKitMarkdown h6 {
+  font-size: 0.8em;
+}
+
+.copilotKitMarkdown p {
+  padding: 0px;
+  margin: 0px;
+}
+
+.copilotKitMarkdown p:not(:last-child),
+.copilotKitMarkdown pre:not(:last-child),
+.copilotKitMarkdown ol:not(:last-child),
+.copilotKitMarkdown ul:not(:last-child),
+.copilotKitMarkdown blockquote:not(:last-child) {
+  margin-bottom: 1.25em;
+}
+
+.copilotKitMarkdown blockquote {
+  border-color: rgb(142, 142, 160);
+  border-left-width: 2px;
+  border-left-style: solid;
+  line-height: 1.2;
+  padding-left: 10px;
+}
+
+.copilotKitMarkdown blockquote p {
+  padding: 0.7em 0;
+}
+
+.copilotKitMarkdown ul {
+  list-style-type: disc;
+  padding-left: 20px;
+  overflow: visible;
+}
+
+.copilotKitMarkdown li {
+  list-style-type: inherit;
+  list-style-position: outside;
+  margin-left: 0;
+  padding-left: 0;
+  position: relative;
+  overflow: visible;
+}
+
+.copilotKitCodeBlock {
+  position: relative;
+  width: 100%;
+  background-color: rgb(9 9 11);
+  border-radius: 0.375rem;
+}
+
+.copilotKitCodeBlockToolbar {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgb(39 39 42);
+  padding-left: 1rem;
+  padding-top: 0.09rem;
+  padding-bottom: 0.09rem;
+  color: rgb(228, 228, 228);
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+  font-family: sans-serif;
+}
+
+.copilotKitCodeBlockToolbarLanguage {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  text-transform: lowercase;
+}
+
+.copilotKitCodeBlockToolbarButtons {
+  display: flex;
+  align-items: center;
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+.copilotKitCodeBlockToolbarButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  height: 2.5rem;
+  width: 2.5rem;
+  padding: 3px;
+  margin: 2px;
+}
+
+.copilotKitCodeBlockToolbarButton:hover {
+  background-color: rgb(55, 55, 58);
+}