UNPKG

@copilotkit/react-ui

Version:

<div align="center"> <a href="https://copilotkit.ai" target="_blank"> <img src="https://github.com/copilotkit/copilotkit/raw/main/assets/banner.png" alt="CopilotKit Logo"> </a>

1 lines 11 kB
{"version":3,"sources":["../src/components/dev-console/console.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCopilotContext, useCopilotMessagesContext } from \"@copilotkit/react-core\";\nimport {\n getPublishedCopilotKitVersion,\n logActions,\n logMessages,\n logReadables,\n shouldShowDevConsole,\n} from \"./utils\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n CheckIcon,\n ChevronDownIcon,\n CopilotKitIcon,\n ExclamationMarkIcon,\n ExclamationMarkTriangleIcon,\n} from \"./icons\";\nimport { Menu, MenuButton, MenuItem, MenuItems } from \"@headlessui/react\";\nimport { COPILOTKIT_VERSION } from \"@copilotkit/shared\";\nimport { SmallSpinnerIcon } from \"../chat/Icons\";\nimport { CopilotKitHelpModal } from \"../help-modal\";\n\ntype VersionStatus = \"unknown\" | \"checking\" | \"latest\" | \"update-available\" | \"outdated\";\n\nexport function CopilotDevConsole() {\n const currentVersion = COPILOTKIT_VERSION;\n const context = useCopilotContext();\n\n // to prevent hydration errors, ensure that the component renders the same content\n // server-side as it does during the initial client-side render to prevent a hydration\n // mismatch\n // see: https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only\n\n const [showDevConsole, setShowDevConsole] = useState(false);\n\n useEffect(() => {\n setShowDevConsole(shouldShowDevConsole(context.showDevConsole));\n }, [context.showDevConsole]);\n\n const dontRunTwiceInDevMode = useRef(false);\n const [versionStatus, setVersionStatus] = useState<VersionStatus>(\"unknown\");\n const [latestVersion, setLatestVersion] = useState<string>(\"\");\n const consoleRef = useRef<HTMLDivElement>(null);\n const [debugButtonMode, setDebugButtonMode] = useState<\"full\" | \"compact\">(\"full\");\n\n const checkForUpdates = (force: boolean = false) => {\n setVersionStatus(\"checking\");\n\n getPublishedCopilotKitVersion(currentVersion, force)\n .then((v) => {\n setLatestVersion(v.latest);\n let versionOk = false;\n\n // match exact version or a version with a letter (e.g. 1.0.0-alpha.1)\n if (v.current === v.latest) {\n versionOk = true;\n } else if (/[a-zA-Z]/.test(v.current)) {\n versionOk = true;\n }\n\n if (versionOk) {\n setVersionStatus(\"latest\");\n } else if (v.severity !== \"low\") {\n setVersionStatus(\"outdated\");\n } else {\n setVersionStatus(\"update-available\");\n }\n })\n .catch((e) => {\n console.error(e);\n setVersionStatus(\"unknown\");\n });\n };\n\n useEffect(() => {\n if (dontRunTwiceInDevMode.current === true) {\n return;\n }\n dontRunTwiceInDevMode.current = true;\n\n checkForUpdates();\n }, []);\n\n if (!showDevConsole) {\n return null;\n }\n return (\n <div\n ref={consoleRef}\n className={\n \"copilotKitDevConsole \" +\n (versionStatus === \"update-available\" ? \"copilotKitDevConsoleUpgrade\" : \"\") +\n (versionStatus === \"outdated\" ? \"copilotKitDevConsoleWarnOutdated\" : \"\")\n }\n >\n <VersionInfo\n showDevConsole={context.showDevConsole}\n versionStatus={versionStatus}\n currentVersion={currentVersion}\n latestVersion={latestVersion}\n />\n\n <CopilotKitHelpModal />\n\n <DebugMenuButton\n setShowDevConsole={setShowDevConsole}\n checkForUpdates={checkForUpdates}\n mode={debugButtonMode}\n />\n </div>\n );\n}\n\nfunction VersionInfo({\n showDevConsole,\n versionStatus,\n currentVersion,\n latestVersion,\n}: {\n showDevConsole: boolean | \"auto\";\n versionStatus: VersionStatus;\n currentVersion: string;\n latestVersion: string;\n}) {\n const [copyStatus, setCopyStatus] = useState<string>(\"\");\n\n let versionLabel = \"\";\n let versionIcon: any = \"\";\n let currentVersionLabel = currentVersion;\n\n if (versionStatus === \"latest\") {\n versionLabel = \"latest\";\n versionIcon = CheckIcon;\n } else if (versionStatus === \"checking\") {\n versionLabel = \"checking\";\n versionIcon = SmallSpinnerIcon;\n } else if (versionStatus === \"update-available\") {\n versionLabel = \"update available\";\n versionIcon = ExclamationMarkIcon;\n currentVersionLabel = `${currentVersion} → ${latestVersion}`;\n } else if (versionStatus === \"outdated\") {\n versionLabel = \"outdated\";\n versionIcon = ExclamationMarkTriangleIcon;\n currentVersionLabel = `${currentVersion} → ${latestVersion}`;\n }\n\n let asideLabel = \"\";\n if (showDevConsole === \"auto\") {\n asideLabel = \"(localhost only)\";\n } else if (showDevConsole === true) {\n asideLabel = \"(always on)\";\n }\n\n const installCommand = [\n `npm install`,\n `@copilotkit/react-core@${latestVersion}`,\n `@copilotkit/react-ui@${latestVersion}`,\n `@copilotkit/react-textarea@${latestVersion}`,\n `&& npm install @copilotkit/runtime@${latestVersion}`,\n ].join(\" \");\n\n const handleCopyClick = () => {\n navigator.clipboard.writeText(installCommand.trim()).then(() => {\n setCopyStatus(\"Command copied to clipboard!\");\n setTimeout(() => setCopyStatus(\"\"), 1000);\n });\n };\n\n if (versionStatus === \"update-available\" || versionStatus === \"outdated\") {\n return (\n <div className=\"copilotKitVersionInfo\">\n <p>\n {currentVersionLabel} {versionIcon}\n </p>\n <button onClick={handleCopyClick}>{copyStatus || installCommand}</button>\n </div>\n );\n }\n\n return null;\n}\n\nexport default function DebugMenuButton({\n setShowDevConsole,\n checkForUpdates,\n mode,\n}: {\n setShowDevConsole: (show: boolean) => void;\n checkForUpdates: (force: boolean) => void;\n mode: \"full\" | \"compact\";\n}) {\n const context = useCopilotContext();\n const messagesContext = useCopilotMessagesContext();\n\n return (\n <>\n <Menu>\n <MenuButton\n className={`copilotKitDebugMenuTriggerButton ${mode === \"compact\" ? \"compact\" : \"\"}`}\n >\n {mode == \"compact\" ? \"Debug\" : <>Debug {ChevronDownIcon}</>}\n </MenuButton>\n\n <MenuItems\n transition\n anchor=\"bottom end\"\n className=\"copilotKitDebugMenu\"\n style={{ zIndex: 40 }}\n >\n <MenuItem>\n <button className=\"copilotKitDebugMenuItem\" onClick={() => logReadables(context)}>\n Log Readables\n </button>\n </MenuItem>\n <MenuItem>\n <button className=\"copilotKitDebugMenuItem\" onClick={() => logActions(context)}>\n Log Actions\n </button>\n </MenuItem>\n <MenuItem>\n <button\n className=\"copilotKitDebugMenuItem\"\n onClick={() => logMessages(messagesContext)}\n >\n Log Messages\n </button>\n </MenuItem>\n <MenuItem>\n <button className=\"copilotKitDebugMenuItem\" onClick={() => checkForUpdates(true)}>\n Check for Updates\n </button>\n </MenuItem>\n <hr />\n <MenuItem>\n <button className=\"copilotKitDebugMenuItem\" onClick={() => setShowDevConsole(false)}>\n Hide Dev Console\n </button>\n </MenuItem>\n </MenuItems>\n </Menu>\n </>\n );\n}\n"],"mappings":"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","names":[]}