@copilotkit/react-core/dist/copilotkit-B5RsC6la.mjs.map

<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />

{"version":3,"file":"copilotkit-B5RsC6la.mjs","names":["twMerge","React","EMPTY_DEPS","React","COPILOT_CLOUD_CHAT_URL","useThreads","CopilotChatAssistantMessage","CopilotChatUserMessage","CopilotChatReasoningMessage","CopilotChatInput","TranscriptionErrorCode","CopilotChatView","CopilotChatView","CopilotChatView","CopilotPopupView","CopilotChatView","emptyCopilotContext","setsHaveIntersection","CopilotKitV2Provider"],"sources":["../src/v2/lib/slots.tsx","../src/v2/providers/CopilotChatConfigurationProvider.tsx","../src/v2/lib/utils.ts","../src/v2/components/ui/button.tsx","../src/v2/components/ui/tooltip.tsx","../src/v2/components/ui/dropdown-menu.tsx","../src/v2/components/chat/CopilotChatAudioRecorder.tsx","../src/v2/components/chat/CopilotChatInput.tsx","../src/v2/hooks/useKatexStyles.ts","../src/v2/lib/react-core.ts","../src/v2/context.ts","../src/v2/types/defineToolCallRenderer.ts","../src/v2/hooks/use-render-tool.tsx","../src/v2/hooks/use-default-render-tool.tsx","../src/v2/hooks/use-render-tool-call.tsx","../src/v2/components/CopilotKitInspector.tsx","../src/v2/components/license-warning-banner.tsx","../src/v2/components/MCPAppsActivityRenderer.tsx","../src/v2/providers/SandboxFunctionsContext.ts","../src/v2/lib/processPartialHtml.ts","../src/v2/components/OpenGenerativeUIRenderer.tsx","../src/v2/a2ui/A2UIMessageRenderer.tsx","../src/v2/a2ui/A2UIToolCallRenderer.tsx","../src/v2/hooks/use-agent-context.tsx","../src/v2/a2ui/A2UICatalogContext.tsx","../src/v2/providers/CopilotKitProvider.tsx","../src/v2/hooks/use-render-custom-messages.tsx","../src/v2/hooks/use-render-activity-message.tsx","../src/v2/hooks/use-frontend-tool.tsx","../src/v2/hooks/use-component.tsx","../src/v2/hooks/use-human-in-the-loop.tsx","../src/v2/hooks/use-agent.tsx","../src/v2/hooks/use-capabilities.tsx","../src/v2/hooks/use-suggestions.tsx","../src/v2/hooks/use-configure-suggestions.tsx","../src/v2/hooks/use-interrupt.tsx","../src/v2/hooks/use-threads.tsx","../src/v2/hooks/use-attachments.tsx","../src/v2/components/chat/CopilotChatToolCallsView.tsx","../src/v2/components/chat/CopilotChatAssistantMessage.tsx","../src/v2/components/chat/Lightbox.tsx","../src/v2/components/chat/CopilotChatAttachmentRenderer.tsx","../src/v2/components/chat/CopilotChatUserMessage.tsx","../src/v2/components/chat/CopilotChatReasoningMessage.tsx","../src/v2/components/chat/CopilotChatSuggestionPill.tsx","../src/v2/components/chat/CopilotChatSuggestionView.tsx","../src/v2/components/chat/scroll-element-context.ts","../src/v2/components/intelligence-indicator/IntelligenceIndicator.tsx","../src/v2/components/chat/CopilotChatMessageView.tsx","../src/v2/components/chat/CopilotChatAttachmentQueue.tsx","../src/v2/hooks/use-keyboard-height.tsx","../src/v2/components/chat/normalize-auto-scroll.ts","../src/v2/components/chat/last-user-message-context.ts","../src/v2/hooks/use-pin-to-send.ts","../src/v2/components/chat/CopilotChatView.tsx","../src/v2/lib/transcription-client.ts","../src/v2/components/chat/CopilotChat.tsx","../src/v2/components/chat/CopilotChatToggleButton.tsx","../src/v2/components/chat/CopilotModalHeader.tsx","../src/v2/components/chat/CopilotSidebarView.tsx","../src/v2/components/chat/CopilotPopupView.tsx","../src/v2/components/chat/CopilotSidebar.tsx","../src/v2/components/chat/CopilotPopup.tsx","../src/v2/components/WildcardToolCallRender.tsx","../src/context/copilot-context.tsx","../src/hooks/use-tree.ts","../src/hooks/use-flat-category-store.ts","../src/context/copilot-messages-context.tsx","../src/components/toast/toast-provider.tsx","../src/utils/dev-console.ts","../src/components/copilot-provider/copilot-messages.tsx","../src/components/usage-banner.tsx","../src/lib/status-checker.ts","../src/components/toast/exclamation-mark-icon.tsx","../src/components/error-boundary/error-utils.tsx","../src/components/error-boundary/error-boundary.tsx","../src/context/coagent-state-renders-context.tsx","../src/context/threads-context.tsx","../src/hooks/use-coagent-state-render-bridge.helpers.ts","../src/hooks/use-coagent-state-render-registry.ts","../src/hooks/use-coagent-state-render-bridge.tsx","../src/components/CopilotListeners.tsx","../src/components/copilot-provider/copilotkit.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\n/** Existing union (unchanged) */\nexport type SlotValue<C extends React.ComponentType<any>> =\n  | C\n  | string\n  | Partial<React.ComponentProps<C>>;\n\n/**\n * Shallow equality comparison for objects.\n */\nexport function shallowEqual<T extends Record<string, unknown>>(\n  obj1: T,\n  obj2: T,\n): boolean {\n  const keys1 = Object.keys(obj1);\n  const keys2 = Object.keys(obj2);\n\n  if (keys1.length !== keys2.length) return false;\n\n  for (const key of keys1) {\n    if (obj1[key] !== obj2[key]) return false;\n  }\n\n  return true;\n}\n\n/**\n * Returns true only for plain JS objects (`{}`), excluding arrays, Dates,\n * class instances, and other exotic objects that happen to have typeof \"object\".\n */\nfunction isPlainObject(obj: unknown): obj is Record<string, unknown> {\n  return (\n    obj !== null &&\n    typeof obj === \"object\" &&\n    Object.prototype.toString.call(obj) === \"[object Object]\"\n  );\n}\n\n/**\n * Returns the same reference as long as the value is shallowly equal to the\n * previous render's value.\n *\n * - Identical references bail out immediately (O(1)).\n * - Plain objects ({}) are shallow-compared key-by-key.\n * - Arrays, Dates, class instances, functions, and primitives are compared by\n *   reference only — shallowEqual is never called on non-plain objects, which\n *   avoids incorrect equality for e.g. [1,2] vs [1,2] (different arrays).\n *\n * Typical use: stabilize inline slot props so MemoizedSlotWrapper's shallow\n * equality check isn't defeated by a new object reference on every render.\n */\nexport function useShallowStableRef<T>(value: T): T {\n  const ref = useRef(value);\n\n  // 1. Identical reference — bail early, no comparison needed.\n  if (ref.current === value) return ref.current;\n\n  // 2. Both are plain objects — shallow-compare to detect structural equality.\n  if (isPlainObject(ref.current) && isPlainObject(value)) {\n    if (shallowEqual(ref.current, value)) return ref.current;\n  }\n\n  // 3. Different values (or non-comparable types) — update the ref.\n  ref.current = value;\n  return ref.current;\n}\n\n/** Utility: concrete React elements for every slot */\ntype SlotElements<S> = { [K in keyof S]: React.ReactElement };\n\nexport type WithSlots<\n  S extends Record<string, React.ComponentType<any>>,\n  Rest = {},\n> = {\n  /** Per‑slot overrides */\n  [K in keyof S]?: SlotValue<S[K]>;\n} & {\n  children?: (props: SlotElements<S> & Rest) => React.ReactNode;\n} & Omit<Rest, \"children\">;\n\n/**\n * Check if a value is a React component type (function, class, forwardRef, memo, etc.)\n */\nexport function isReactComponentType(\n  value: unknown,\n): value is React.ComponentType<any> {\n  if (typeof value === \"function\") {\n    return true;\n  }\n  // forwardRef, memo, lazy have $$typeof but are not valid elements\n  if (\n    value &&\n    typeof value === \"object\" &&\n    \"$$typeof\" in value &&\n    !React.isValidElement(value)\n  ) {\n    return true;\n  }\n  return false;\n}\n\n/**\n * Internal function to render a slot value as a React element (non-memoized).\n */\nfunction renderSlotElement(\n  slot: SlotValue<React.ComponentType<any>> | undefined,\n  DefaultComponent: React.ComponentType<any>,\n  props: Record<string, unknown>,\n): React.ReactElement {\n  if (typeof slot === \"string\") {\n    // When slot is a string, treat it as a className and merge with existing className\n    const existingClassName = props.className as string | undefined;\n    return React.createElement(DefaultComponent, {\n      ...props,\n      className: twMerge(existingClassName, slot),\n    });\n  }\n\n  // Check if slot is a React component type (function, forwardRef, memo, etc.)\n  if (isReactComponentType(slot)) {\n    return React.createElement(slot, props);\n  }\n\n  // If slot is a plain object (not a React element), treat it as props override\n  if (slot && typeof slot === \"object\" && !React.isValidElement(slot)) {\n    return React.createElement(DefaultComponent, {\n      ...props,\n      ...slot,\n    });\n  }\n\n  return React.createElement(DefaultComponent, props);\n}\n\n/**\n * Internal memoized wrapper component for renderSlot.\n * Uses forwardRef to support ref forwarding.\n */\nconst MemoizedSlotWrapper = React.memo(\n  React.forwardRef<unknown, any>(function MemoizedSlotWrapper(props, ref) {\n    const { $slot, $component, ...rest } = props;\n    const propsWithRef: Record<string, unknown> =\n      ref !== null ? { ...rest, ref } : rest;\n    return renderSlotElement($slot, $component, propsWithRef);\n  }),\n  (prev: any, next: any) => {\n    // Compare slot and component references\n    if (prev.$slot !== next.$slot) return false;\n    if (prev.$component !== next.$component) return false;\n\n    // Shallow compare remaining props (ref is handled separately by React)\n    const { $slot: _ps, $component: _pc, ...prevRest } = prev;\n    const { $slot: _ns, $component: _nc, ...nextRest } = next;\n    return shallowEqual(\n      prevRest as Record<string, unknown>,\n      nextRest as Record<string, unknown>,\n    );\n  },\n);\n\n/**\n * Renders a slot value as a memoized React element.\n * Automatically prevents unnecessary re-renders using shallow prop comparison.\n * Supports ref forwarding.\n *\n * @example\n * renderSlot(customInput, CopilotChatInput, { onSubmit: handleSubmit })\n */\nexport function renderSlot<\n  C extends React.ComponentType<any>,\n  P = React.ComponentProps<C>,\n>(\n  slot: SlotValue<C> | undefined,\n  DefaultComponent: C,\n  props: P,\n): React.ReactElement {\n  return React.createElement(MemoizedSlotWrapper, {\n    ...props,\n    $slot: slot,\n    $component: DefaultComponent,\n  } as any);\n}\n","import React, {\n  createContext,\n  useCallback,\n  useContext,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { DEFAULT_AGENT_ID, randomUUID } from \"@copilotkit/shared\";\nimport { useShallowStableRef } from \"../lib/slots\";\n\n// Default labels\nexport const CopilotChatDefaultLabels = {\n  chatInputPlaceholder: \"Type a message...\",\n  chatInputToolbarStartTranscribeButtonLabel: \"Transcribe\",\n  chatInputToolbarCancelTranscribeButtonLabel: \"Cancel\",\n  chatInputToolbarFinishTranscribeButtonLabel: \"Finish\",\n  chatInputToolbarAddButtonLabel: \"Add attachments\",\n  chatInputToolbarToolsButtonLabel: \"Tools\",\n  assistantMessageToolbarCopyCodeLabel: \"Copy\",\n  assistantMessageToolbarCopyCodeCopiedLabel: \"Copied\",\n  assistantMessageToolbarCopyMessageLabel: \"Copy\",\n  assistantMessageToolbarThumbsUpLabel: \"Good response\",\n  assistantMessageToolbarThumbsDownLabel: \"Bad response\",\n  assistantMessageToolbarReadAloudLabel: \"Read aloud\",\n  assistantMessageToolbarRegenerateLabel: \"Regenerate\",\n  userMessageToolbarCopyMessageLabel: \"Copy\",\n  userMessageToolbarEditMessageLabel: \"Edit\",\n  chatDisclaimerText:\n    \"AI can make mistakes. Please verify important information.\",\n  chatToggleOpenLabel: \"Open chat\",\n  chatToggleCloseLabel: \"Close chat\",\n  modalHeaderTitle: \"CopilotKit Chat\",\n  welcomeMessageText: \"How can I help you today?\",\n};\n\nexport type CopilotChatLabels = typeof CopilotChatDefaultLabels;\n\n// Define the full configuration interface\nexport interface CopilotChatConfigurationValue {\n  labels: CopilotChatLabels;\n  agentId: string;\n  threadId: string;\n  isModalOpen: boolean;\n  setModalOpen: (open: boolean) => void;\n  // True when the current threadId was chosen by the caller rather than\n  // silently minted inside the provider chain. Consumers that only make\n  // sense against a real backend thread (e.g. /connect, suppressing the\n  // welcome screen on switch) gate on this instead of `!!threadId`.\n  hasExplicitThreadId: boolean;\n}\n\n// Create the configuration context\nconst CopilotChatConfiguration =\n  createContext<CopilotChatConfigurationValue | null>(null);\n\n// Provider props interface\nexport interface CopilotChatConfigurationProviderProps {\n  children: ReactNode;\n  labels?: Partial<CopilotChatLabels>;\n  agentId?: string;\n  threadId?: string;\n  // Lets internal wrappers (e.g. the v1 CopilotKit bridge, which pipes a\n  // ThreadsProvider-minted UUID through as `threadId`) declare that the\n  // threadId they are supplying is NOT a caller choice. When omitted, the\n  // provider infers explicitness from whether the `threadId` prop itself\n  // was supplied.\n  hasExplicitThreadId?: boolean;\n  isModalDefaultOpen?: boolean;\n}\n\n// Provider component\nexport const CopilotChatConfigurationProvider: React.FC<\n  CopilotChatConfigurationProviderProps\n> = ({\n  children,\n  labels,\n  agentId,\n  threadId,\n  hasExplicitThreadId,\n  isModalDefaultOpen,\n}) => {\n  const parentConfig = useContext(CopilotChatConfiguration);\n\n  // Stabilize labels references so that inline objects (new reference on every\n  // parent render) don't invalidate mergedLabels and churn the context value.\n  // parentConfig?.labels is already stabilized by the parent provider's own\n  // useShallowStableRef, so we only need to stabilize the local labels prop.\n  const stableLabels = useShallowStableRef(labels);\n  const mergedLabels: CopilotChatLabels = useMemo(\n    () => ({\n      ...CopilotChatDefaultLabels,\n      ...parentConfig?.labels,\n      ...stableLabels,\n    }),\n    [stableLabels, parentConfig?.labels],\n  );\n\n  const resolvedAgentId = agentId ?? parentConfig?.agentId ?? DEFAULT_AGENT_ID;\n\n  const resolvedThreadId = useMemo(() => {\n    if (threadId) {\n      return threadId;\n    }\n    if (parentConfig?.threadId) {\n      return parentConfig.threadId;\n    }\n    return randomUUID();\n  }, [threadId, parentConfig?.threadId]);\n\n  // If a caller passed `hasExplicitThreadId`, trust it verbatim (lets the v1\n  // bridge mark an auto-minted UUID as non-explicit). Otherwise infer: a\n  // threadId supplied as a prop here is by definition a caller choice.\n  const ownHasExplicitThreadId =\n    hasExplicitThreadId !== undefined ? hasExplicitThreadId : !!threadId;\n  const resolvedHasExplicitThreadId =\n    ownHasExplicitThreadId || !!parentConfig?.hasExplicitThreadId;\n\n  const resolvedDefaultOpen = isModalDefaultOpen ?? true;\n\n  const [internalModalOpen, setInternalModalOpen] =\n    useState<boolean>(resolvedDefaultOpen);\n\n  const hasExplicitDefault = isModalDefaultOpen !== undefined;\n\n  // When this provider owns its modal state, wrap the setter so that changes\n  // propagate upward to any ancestor provider. This allows an outer\n  // CopilotChatConfigurationProvider (e.g. a user's layout-level provider) to\n  // observe open/close events that originate deep in the tree — fixing the\n  // \"outer hook always returns true\" regression (CPK-7152 Behavior B).\n  const setAndSync = useCallback(\n    (open: boolean) => {\n      setInternalModalOpen(open);\n      parentConfig?.setModalOpen(open);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentConfig?.setModalOpen],\n  );\n\n  // Sync parent → child: when an ancestor's modal state is changed externally\n  // (e.g. the user calls setModalOpen from an outer hook), reflect that change\n  // in our own state so the sidebar/popup responds accordingly.\n  // Skip the initial mount so that our own isModalDefaultOpen is respected and\n  // not immediately overwritten by the parent's current value.\n  const isMounted = useRef(false);\n  useEffect(() => {\n    if (!hasExplicitDefault) return;\n    if (!isMounted.current) {\n      isMounted.current = true;\n      return;\n    }\n    if (parentConfig?.isModalOpen === undefined) return;\n    setInternalModalOpen(parentConfig.isModalOpen);\n  }, [parentConfig?.isModalOpen, hasExplicitDefault]);\n\n  const resolvedIsModalOpen = hasExplicitDefault\n    ? internalModalOpen\n    : (parentConfig?.isModalOpen ?? internalModalOpen);\n  const resolvedSetModalOpen = hasExplicitDefault\n    ? setAndSync\n    : (parentConfig?.setModalOpen ?? setInternalModalOpen);\n\n  const configurationValue: CopilotChatConfigurationValue = useMemo(\n    () => ({\n      labels: mergedLabels,\n      agentId: resolvedAgentId,\n      threadId: resolvedThreadId,\n      hasExplicitThreadId: resolvedHasExplicitThreadId,\n      isModalOpen: resolvedIsModalOpen,\n      setModalOpen: resolvedSetModalOpen,\n    }),\n    [\n      mergedLabels,\n      resolvedAgentId,\n      resolvedThreadId,\n      resolvedHasExplicitThreadId,\n      resolvedIsModalOpen,\n      resolvedSetModalOpen,\n    ],\n  );\n\n  return (\n    <CopilotChatConfiguration.Provider value={configurationValue}>\n      {children}\n    </CopilotChatConfiguration.Provider>\n  );\n};\n\n// Hook to use the full configuration\nexport const useCopilotChatConfiguration =\n  (): CopilotChatConfigurationValue | null => {\n    const configuration = useContext(CopilotChatConfiguration);\n    return configuration;\n  };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({ prefix: \"cpk\" });\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"cpk:inline-flex cpk:items-center cpk:justify-center cpk:gap-2 cpk:whitespace-nowrap cpk:rounded-md cpk:text-sm cpk:font-medium cpk:transition-all cpk:disabled:pointer-events-none cpk:disabled:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg:not([class*='size-'])]:size-4 cpk:shrink-0 cpk:[&_svg]:shrink-0 cpk:outline-none cpk:focus-visible:border-ring cpk:focus-visible:ring-ring/50 cpk:focus-visible:ring-[3px] cpk:aria-invalid:ring-destructive/20 cpk:dark:aria-invalid:ring-destructive/40 cpk:aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"cpk:bg-primary cpk:text-primary-foreground cpk:shadow-xs cpk:hover:bg-primary/90\",\n        destructive:\n          \"cpk:bg-destructive cpk:text-white cpk:shadow-xs cpk:hover:bg-destructive/90 cpk:focus-visible:ring-destructive/20 cpk:dark:focus-visible:ring-destructive/40 cpk:dark:bg-destructive/60\",\n        outline:\n          \"cpk:border cpk:bg-background cpk:shadow-xs cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:bg-input/30 cpk:dark:border-input cpk:dark:hover:bg-input/50\",\n        secondary:\n          \"cpk:bg-secondary cpk:text-secondary-foreground cpk:shadow-xs cpk:hover:bg-secondary/80\",\n        ghost:\n          \"cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:hover:bg-accent/50 cpk:cursor-pointer\",\n        link: \"cpk:text-primary cpk:underline-offset-4 cpk:hover:underline\",\n        assistantMessageToolbarButton: [\n          \"cpk:cursor-pointer\",\n          // Background and text\n          \"cpk:p-0 cpk:text-[rgb(93,93,93)] cpk:hover:bg-[#E8E8E8]\",\n          // Dark mode - lighter gray for better contrast\n          \"cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]\",\n          // Shape and sizing\n          \"cpk:h-8 cpk:w-8\",\n          // Interactions\n          \"cpk:transition-colors\",\n          // Hover states\n          \"cpk:hover:text-[rgb(93,93,93)]\",\n          \"cpk:dark:hover:text-[rgb(243,243,243)]\",\n        ],\n        chatInputToolbarPrimary: [\n          \"cpk:cursor-pointer\",\n          // Background and text\n          \"cpk:bg-black cpk:text-white\",\n          // Dark mode\n          \"cpk:dark:bg-white cpk:dark:text-black cpk:dark:focus-visible:outline-white\",\n          // Shape and sizing\n          \"cpk:rounded-full\",\n          // Interactions\n          \"cpk:transition-colors\",\n          // Focus states\n          \"cpk:focus:outline-none\",\n          // Hover states\n          \"cpk:hover:opacity-70 cpk:disabled:hover:opacity-100\",\n          // Disabled states\n          \"cpk:disabled:cursor-not-allowed cpk:disabled:bg-[#00000014] cpk:disabled:text-[rgb(13,13,13)]\",\n          \"cpk:dark:disabled:bg-[#454545] cpk:dark:disabled:text-white \",\n        ],\n        chatInputToolbarSecondary: [\n          \"cpk:cursor-pointer\",\n          // Background and text\n          \"cpk:bg-transparent cpk:text-[#444444]\",\n          // Dark mode\n          \"cpk:dark:text-white cpk:dark:border-[#404040]\",\n          // Shape and sizing\n          \"cpk:rounded-full\",\n          // Interactions\n          \"cpk:transition-colors\",\n          // Focus states\n          \"cpk:focus:outline-none\",\n          // Hover states\n          \"cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333]\",\n          \"cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF]\",\n          // Disabled states\n          \"cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50\",\n          \"cpk:disabled:hover:bg-transparent cpk:disabled:hover:text-[#444444]\",\n          \"cpk:dark:disabled:hover:bg-transparent cpk:dark:disabled:hover:text-[#CCCCCC]\",\n        ],\n      },\n      size: {\n        default: \"cpk:h-9 cpk:px-4 cpk:py-2 cpk:has-[>svg]:px-3\",\n        sm: \"cpk:h-8 cpk:rounded-md cpk:gap-1.5 cpk:px-3 cpk:has-[>svg]:px-2.5\",\n        lg: \"cpk:h-10 cpk:rounded-md cpk:px-6 cpk:has-[>svg]:px-4\",\n        icon: \"cpk:size-9\",\n        chatInputToolbarIcon: [\n          // Shape and sizing\n          \"cpk:h-9 cpk:w-9 cpk:rounded-full\",\n        ],\n        chatInputToolbarIconLabel: [\n          // Shape and sizing\n          \"cpk:h-9 cpk:px-3 cpk:rounded-full\",\n          // Layout\n          \"cpk:gap-2\",\n          // Typography\n          \"cpk:font-normal\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nconst Button = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> &\n    VariantProps<typeof buttonVariants> & {\n      asChild?: boolean;\n    }\n>(function Button(\n  { className, variant, size, asChild = false, ...props },\n  ref,\n) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n});\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-copilotkit\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"cpk:bg-primary cpk:text-primary-foreground cpk:animate-in cpk:fade-in-0 cpk:zoom-in-95 cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:w-fit cpk:origin-(--radix-tooltip-content-transform-origin) cpk:rounded-md cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:text-balance\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"cpk:bg-primary cpk:fill-primary cpk:z-50 cpk:size-2.5 cpk:translate-y-[calc(-50%_-_2px)] cpk:rotate-45 cpk:rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-copilotkit\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:max-h-(--radix-dropdown-menu-content-available-height) cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-x-hidden cpk:overflow-y-auto cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-md\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[variant=destructive]:text-destructive cpk:data-[variant=destructive]:focus:bg-destructive/10 cpk:dark:data-[variant=destructive]:focus:bg-destructive/20 cpk:data-[variant=destructive]:focus:text-destructive cpk:data-[variant=destructive]:*:[svg]:!text-destructive cpk:[&_svg:not([class*='text-'])]:text-muted-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:data-[inset]:pl-8 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:py-1.5 cpk:pr-2 cpk:pl-8 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"cpk:pointer-events-none cpk:absolute cpk:left-2 cpk:flex cpk:size-3.5 cpk:items-center cpk:justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"cpk:size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:py-1.5 cpk:pr-2 cpk:pl-8 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"cpk:pointer-events-none cpk:absolute cpk:left-2 cpk:flex cpk:size-3.5 cpk:items-center cpk:justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"cpk:size-2 cpk:fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:font-medium cpk:data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"cpk:bg-border cpk:-mx-1 cpk:my-1 cpk:h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"cpk:text-muted-foreground cpk:ml-auto cpk:text-xs cpk:tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[state=open]:bg-accent cpk:data-[state=open]:text-accent-foreground cpk:flex cpk:cursor-default cpk:items-center cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"cpk:ml-auto cpk:size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-hidden cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-lg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n","import {\n  useRef,\n  useEffect,\n  useImperativeHandle,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\n/** Finite-state machine for every recorder implementation */\nexport type AudioRecorderState = \"idle\" | \"recording\" | \"processing\";\n\n/** Error subclass so callers can `instanceof`-guard recorder failures */\nexport class AudioRecorderError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = \"AudioRecorderError\";\n  }\n}\n\nexport interface AudioRecorderRef {\n  state: AudioRecorderState;\n  start: () => Promise<void>;\n  stop: () => Promise<Blob>;\n  dispose: () => void;\n}\n\nexport const CopilotChatAudioRecorder = forwardRef<\n  AudioRecorderRef,\n  React.HTMLAttributes<HTMLDivElement>\n>((props, ref) => {\n  const { className, ...divProps } = props;\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  // Recording state\n  const [recorderState, setRecorderState] =\n    useState<AudioRecorderState>(\"idle\");\n  const mediaRecorderRef = useRef<MediaRecorder | null>(null);\n  const audioChunksRef = useRef<Blob[]>([]);\n  const streamRef = useRef<MediaStream | null>(null);\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const audioContextRef = useRef<AudioContext | null>(null);\n  const animationIdRef = useRef<number | null>(null);\n\n  // Amplitude history buffer for scrolling waveform\n  const amplitudeHistoryRef = useRef<number[]>([]);\n  const frameCountRef = useRef<number>(0);\n  const scrollOffsetRef = useRef<number>(0);\n  const smoothedAmplitudeRef = useRef<number>(0);\n  const fadeOpacityRef = useRef<number>(0);\n\n  // Clean up all resources\n  const cleanup = useCallback(() => {\n    if (animationIdRef.current) {\n      cancelAnimationFrame(animationIdRef.current);\n      animationIdRef.current = null;\n    }\n    if (\n      mediaRecorderRef.current &&\n      mediaRecorderRef.current.state !== \"inactive\"\n    ) {\n      try {\n        mediaRecorderRef.current.stop();\n      } catch {\n        // Ignore errors during cleanup\n      }\n    }\n    if (streamRef.current) {\n      streamRef.current.getTracks().forEach((track) => track.stop());\n      streamRef.current = null;\n    }\n    if (audioContextRef.current && audioContextRef.current.state !== \"closed\") {\n      audioContextRef.current.close().catch(() => {\n        // Ignore close errors\n      });\n      audioContextRef.current = null;\n    }\n    mediaRecorderRef.current = null;\n    analyserRef.current = null;\n    audioChunksRef.current = [];\n    amplitudeHistoryRef.current = [];\n    frameCountRef.current = 0;\n    scrollOffsetRef.current = 0;\n    smoothedAmplitudeRef.current = 0;\n    fadeOpacityRef.current = 0;\n  }, []);\n\n  // Start recording\n  const start = useCallback(async () => {\n    if (recorderState !== \"idle\") {\n      throw new AudioRecorderError(\"Recorder is already active\");\n    }\n\n    try {\n      // Request microphone access\n      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n      streamRef.current = stream;\n\n      // Set up audio context for visualization\n      const audioContext = new AudioContext();\n      audioContextRef.current = audioContext;\n      const source = audioContext.createMediaStreamSource(stream);\n      const analyser = audioContext.createAnalyser();\n      analyser.fftSize = 2048; // Higher resolution for time-domain waveform\n      source.connect(analyser);\n      analyserRef.current = analyser;\n\n      // Determine best MIME type for recording\n      const mimeType = MediaRecorder.isTypeSupported(\"audio/webm;codecs=opus\")\n        ? \"audio/webm;codecs=opus\"\n        : MediaRecorder.isTypeSupported(\"audio/webm\")\n          ? \"audio/webm\"\n          : MediaRecorder.isTypeSupported(\"audio/mp4\")\n            ? \"audio/mp4\"\n            : \"\";\n\n      const options: MediaRecorderOptions = mimeType ? { mimeType } : {};\n      const mediaRecorder = new MediaRecorder(stream, options);\n      mediaRecorderRef.current = mediaRecorder;\n      audioChunksRef.current = [];\n\n      mediaRecorder.ondataavailable = (event) => {\n        if (event.data.size > 0) {\n          audioChunksRef.current.push(event.data);\n        }\n      };\n\n      // Start recording with timeslice to collect data periodically\n      mediaRecorder.start(100);\n      setRecorderState(\"recording\");\n    } catch (error) {\n      cleanup();\n      if (error instanceof Error && error.name === \"NotAllowedError\") {\n        throw new AudioRecorderError(\"Microphone permission denied\");\n      }\n      if (error instanceof Error && error.name === \"NotFoundError\") {\n        throw new AudioRecorderError(\"No microphone found\");\n      }\n      throw new AudioRecorderError(\n        error instanceof Error ? error.message : \"Failed to start recording\",\n      );\n    }\n  }, [recorderState, cleanup]);\n\n  // Stop recording and return audio blob\n  const stop = useCallback((): Promise<Blob> => {\n    return new Promise((resolve, reject) => {\n      const mediaRecorder = mediaRecorderRef.current;\n      if (!mediaRecorder || recorderState !== \"recording\") {\n        reject(new AudioRecorderError(\"No active recording\"));\n        return;\n      }\n\n      setRecorderState(\"processing\");\n\n      mediaRecorder.onstop = () => {\n        const mimeType = mediaRecorder.mimeType || \"audio/webm\";\n        const audioBlob = new Blob(audioChunksRef.current, { type: mimeType });\n\n        // Clean up but keep the blob\n        cleanup();\n        setRecorderState(\"idle\");\n        resolve(audioBlob);\n      };\n\n      mediaRecorder.onerror = () => {\n        cleanup();\n        setRecorderState(\"idle\");\n        reject(new AudioRecorderError(\"Recording failed\"));\n      };\n\n      mediaRecorder.stop();\n    });\n  }, [recorderState, cleanup]);\n\n  // Calculate RMS amplitude from time-domain data\n  const calculateAmplitude = (dataArray: Uint8Array): number => {\n    let sum = 0;\n    for (let i = 0; i < dataArray.length; i++) {\n      // Normalize to -1 to 1 range (128 is center/silence)\n      const sample = (dataArray[i] ?? 128) / 128 - 1;\n      sum += sample * sample;\n    }\n    return Math.sqrt(sum / dataArray.length);\n  };\n\n  // Canvas rendering with animation\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    // Configuration\n    const barWidth = 2;\n    const barGap = 1;\n    const barSpacing = barWidth + barGap;\n    const scrollSpeed = 1 / 3; // Pixels per frame\n\n    const draw = () => {\n      const rect = canvas.getBoundingClientRect();\n      const dpr = window.devicePixelRatio || 1;\n\n      // Update canvas dimensions if container resized\n      if (\n        canvas.width !== rect.width * dpr ||\n        canvas.height !== rect.height * dpr\n      ) {\n        canvas.width = rect.width * dpr;\n        canvas.height = rect.height * dpr;\n        ctx.scale(dpr, dpr);\n      }\n\n      // Calculate how many bars fit in the canvas (plus extra for smooth scrolling)\n      const maxBars = Math.floor(rect.width / barSpacing) + 2;\n\n      // Get current amplitude if recording\n      if (analyserRef.current && recorderState === \"recording\") {\n        // Pre-fill history with zeros on first frame so line is visible immediately\n        if (amplitudeHistoryRef.current.length === 0) {\n          amplitudeHistoryRef.current = new Array(maxBars).fill(0);\n        }\n\n        // Fade in the waveform smoothly\n        if (fadeOpacityRef.current < 1) {\n          fadeOpacityRef.current = Math.min(1, fadeOpacityRef.current + 0.03);\n        }\n\n        // Smooth scrolling - increment offset every frame\n        scrollOffsetRef.current += scrollSpeed;\n\n        // Sample amplitude every frame for smoothing\n        const bufferLength = analyserRef.current.fftSize;\n        const dataArray = new Uint8Array(bufferLength);\n        analyserRef.current.getByteTimeDomainData(dataArray);\n        const rawAmplitude = calculateAmplitude(dataArray);\n\n        // Smoothing: gradual attack and decay\n        const attackSpeed = 0.12; // Smooth rise\n        const decaySpeed = 0.08; // Smooth fade out\n        const speed =\n          rawAmplitude > smoothedAmplitudeRef.current\n            ? attackSpeed\n            : decaySpeed;\n        smoothedAmplitudeRef.current +=\n          (rawAmplitude - smoothedAmplitudeRef.current) * speed;\n\n        // When offset reaches a full bar width, add a new sample and reset offset\n        if (scrollOffsetRef.current >= barSpacing) {\n          scrollOffsetRef.current -= barSpacing;\n          amplitudeHistoryRef.current.push(smoothedAmplitudeRef.current);\n\n          // Trim history to fit canvas\n          if (amplitudeHistoryRef.current.length > maxBars) {\n            amplitudeHistoryRef.current =\n              amplitudeHistoryRef.current.slice(-maxBars);\n          }\n        }\n      }\n\n      // Clear canvas\n      ctx.clearRect(0, 0, rect.width, rect.height);\n\n      // Get current foreground color\n      const computedStyle = getComputedStyle(canvas);\n      ctx.fillStyle = computedStyle.color;\n      ctx.globalAlpha = fadeOpacityRef.current;\n\n      const centerY = rect.height / 2;\n      const maxAmplitude = rect.height / 2 - 2; // Leave some padding\n\n      const history = amplitudeHistoryRef.current;\n\n      // Only draw when recording (history has data)\n      if (history.length > 0) {\n        const offset = scrollOffsetRef.current;\n        const edgeFadeWidth = 12; // Pixels to fade at each edge\n\n        for (let i = 0; i < history.length; i++) {\n          const amplitude = history[i] ?? 0;\n          // Scale amplitude (RMS is typically 0-0.5 for normal speech)\n          const scaledAmplitude = Math.min(amplitude * 4, 1);\n          const barHeight = Math.max(2, scaledAmplitude * maxAmplitude * 2);\n\n          // Position: right-aligned with smooth scroll offset\n          const x = rect.width - (history.length - i) * barSpacing - offset;\n          const y = centerY - barHeight / 2;\n\n          // Only draw if visible\n          if (x + barWidth > 0 && x < rect.width) {\n            // Calculate edge fade opacity\n            let edgeOpacity = 1;\n            if (x < edgeFadeWidth) {\n              // Fade out on left edge\n              edgeOpacity = Math.max(0, x / edgeFadeWidth);\n            } else if (x > rect.width - edgeFadeWidth) {\n              // Fade in on right edge\n              edgeOpacity = Math.max(0, (rect.width - x) / edgeFadeWidth);\n            }\n\n            ctx.globalAlpha = fadeOpacityRef.current * edgeOpacity;\n            ctx.fillRect(x, y, barWidth, barHeight);\n          }\n        }\n      }\n\n      animationIdRef.current = requestAnimationFrame(draw);\n    };\n\n    draw();\n\n    return () => {\n      if (animationIdRef.current) {\n        cancelAnimationFrame(animationIdRef.current);\n      }\n    };\n  }, [recorderState]);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return cleanup;\n  }, [cleanup]);\n\n  // Expose AudioRecorder API via ref\n  useImperativeHandle(\n    ref,\n    () => ({\n      get state() {\n        return recorderState;\n      },\n      start,\n      stop,\n      dispose: cleanup,\n    }),\n    [recorderState, start, stop, cleanup],\n  );\n\n  return (\n    <div\n      className={twMerge(\"cpk:w-full cpk:py-3 cpk:px-5\", className)}\n      {...divProps}\n    >\n      <canvas ref={canvasRef} className=\"cpk:block cpk:w-full cpk:h-[26px]\" />\n    </div>\n  );\n});\n\nCopilotChatAudioRecorder.displayName = \"CopilotChatAudioRecorder\";\n","import React, {\n  useState,\n  useRef,\n  KeyboardEvent,\n  ChangeEvent,\n  useEffect,\n  useLayoutEffect,\n  forwardRef,\n  useImperativeHandle,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Plus, Mic, ArrowUp, X, Check, Square, Loader2 } from \"lucide-react\";\n\nimport {\n  CopilotChatLabels,\n  useCopilotChatConfiguration,\n  CopilotChatDefaultLabels,\n} from \"../../providers/CopilotChatConfigurationProvider\";\nimport { Button } from \"../../components/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"../../components/ui/tooltip\";\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  DropdownMenuSeparator,\n} from \"../../components/ui/dropdown-menu\";\n\nimport { CopilotChatAudioRecorder } from \"./CopilotChatAudioRecorder\";\nimport { renderSlot, WithSlots } from \"../../lib/slots\";\nimport { cn } from \"../../lib/utils\";\n\nexport type CopilotChatInputMode = \"input\" | \"transcribe\" | \"processing\";\n\nexport type ToolsMenuItem = {\n  label: string;\n} & (\n  | {\n      action: () => void;\n      items?: never;\n    }\n  | {\n      action?: never;\n      items: (ToolsMenuItem | \"-\")[];\n    }\n);\n\ntype CopilotChatInputSlots = {\n  textArea: typeof CopilotChatInput.TextArea;\n  sendButton: typeof CopilotChatInput.SendButton;\n  startTranscribeButton: typeof CopilotChatInput.StartTranscribeButton;\n  cancelTranscribeButton: typeof CopilotChatInput.CancelTranscribeButton;\n  finishTranscribeButton: typeof CopilotChatInput.FinishTranscribeButton;\n  addMenuButton: typeof CopilotChatInput.AddMenuButton;\n  audioRecorder: typeof CopilotChatAudioRecorder;\n  disclaimer: typeof CopilotChatInput.Disclaimer;\n};\n\ntype CopilotChatInputRestProps = {\n  mode?: CopilotChatInputMode;\n  toolsMenu?: (ToolsMenuItem | \"-\")[];\n  autoFocus?: boolean;\n  onSubmitMessage?: (value: string) => void;\n  onStop?: () => void;\n  isRunning?: boolean;\n  onStartTranscribe?: () => void;\n  onCancelTranscribe?: () => void;\n  onFinishTranscribe?: () => void;\n  onFinishTranscribeWithAudio?: (audioBlob: Blob) => Promise<void>;\n  onAddFile?: () => void;\n  value?: string;\n  onChange?: (value: string) => void;\n  /** Positioning mode for the input container. Default: 'static' */\n  positioning?: \"static\" | \"absolute\";\n  /** Keyboard height in pixels for mobile keyboard handling */\n  keyboardHeight?: number;\n  /** Ref for the outer positioning container */\n  containerRef?: React.Ref<HTMLDivElement>;\n  /** Whether to show the disclaimer. Default: true for absolute positioning, false for static */\n  showDisclaimer?: boolean;\n  /**\n   * Set to `true` when the input sits at the bottom of its container as a\n   * flex-last-child (visible position is driven by layout, not CSS\n   * positioning). Triggers reservation of bottom space for the fixed\n   * CopilotKit license banner via the\n   * `--copilotkit-license-banner-offset` CSS var so the two don't overlap.\n   *\n   * Not needed when `positioning === \"absolute\"`; that mode already pins the\n   * input to the bottom and picks up the same reservation automatically.\n   * Leave unset (default `false`) for inputs rendered mid-layout such as the\n   * welcome screen, where the banner offset would push the input off-center.\n   */\n  bottomAnchored?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">;\n\ntype CopilotChatInputBaseProps = WithSlots<\n  CopilotChatInputSlots,\n  CopilotChatInputRestProps\n>;\n\ntype CopilotChatInputChildrenArgs = CopilotChatInputBaseProps extends {\n  children?: infer C;\n}\n  ? C extends (props: infer P) => React.ReactNode\n    ? P\n    : never\n  : never;\n\nexport type CopilotChatInputProps = Omit<\n  CopilotChatInputBaseProps,\n  \"children\"\n> & {\n  children?: (props: CopilotChatInputChildrenArgs) => React.ReactNode;\n};\n\nconst SLASH_MENU_MAX_VISIBLE_ITEMS = 5;\nconst SLASH_MENU_ITEM_HEIGHT_PX = 40;\n\nexport function CopilotChatIn