@copilotkit/react-ui 1.5.0-tyler-reset-chat.0 → 1.5.1-custom-tag-pre.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +203 -5
  2. package/dist/{chunk-Z2RXDT7O.mjs → chunk-375NVWZM.mjs} +2 -2
  3. package/dist/{chunk-OMTPWC7T.mjs → chunk-3E7HY2UN.mjs} +5 -4
  4. package/dist/chunk-3E7HY2UN.mjs.map +1 -0
  5. package/dist/{chunk-RKPANT3F.mjs → chunk-7II4YL7R.mjs} +2 -6
  6. package/dist/chunk-7II4YL7R.mjs.map +1 -0
  7. package/dist/{chunk-4T3TMQNJ.mjs → chunk-BH6PCAAL.mjs} +38 -2
  8. package/dist/chunk-BH6PCAAL.mjs.map +1 -0
  9. package/dist/{chunk-OI5EKZPO.mjs → chunk-DCNCY2PL.mjs} +13 -6
  10. package/dist/{chunk-OI5EKZPO.mjs.map → chunk-DCNCY2PL.mjs.map} +1 -1
  11. package/dist/{chunk-4LUMV4YO.mjs → chunk-EMQEEXUB.mjs} +8 -3
  12. package/dist/chunk-EMQEEXUB.mjs.map +1 -0
  13. package/dist/{chunk-2B57NCBA.mjs → chunk-F2W5FD7L.mjs} +3 -3
  14. package/dist/{chunk-4FIGRRFS.mjs → chunk-PNQVKBPN.mjs} +2 -2
  15. package/dist/{chunk-4FIGRRFS.mjs.map → chunk-PNQVKBPN.mjs.map} +1 -1
  16. package/dist/chunk-TI7SY2RI.mjs +164 -0
  17. package/dist/chunk-TI7SY2RI.mjs.map +1 -0
  18. package/dist/{chunk-B6A6OMIG.mjs → chunk-UWVGLGFQ.mjs} +4 -4
  19. package/dist/{chunk-RQRK6DEW.mjs → chunk-WSMMTZCM.mjs} +2 -2
  20. package/dist/components/chat/Chat.js +149 -36
  21. package/dist/components/chat/Chat.js.map +1 -1
  22. package/dist/components/chat/Chat.mjs +8 -8
  23. package/dist/components/chat/Input.js +7 -2
  24. package/dist/components/chat/Input.js.map +1 -1
  25. package/dist/components/chat/Input.mjs +1 -1
  26. package/dist/components/chat/Messages.d.ts +3 -3
  27. package/dist/components/chat/Messages.js.map +1 -1
  28. package/dist/components/chat/Messages.mjs +1 -1
  29. package/dist/components/chat/Modal.js +149 -36
  30. package/dist/components/chat/Modal.js.map +1 -1
  31. package/dist/components/chat/Modal.mjs +9 -9
  32. package/dist/components/chat/Popup.js +149 -36
  33. package/dist/components/chat/Popup.js.map +1 -1
  34. package/dist/components/chat/Popup.mjs +10 -10
  35. package/dist/components/chat/Sidebar.js +149 -36
  36. package/dist/components/chat/Sidebar.js.map +1 -1
  37. package/dist/components/chat/Sidebar.mjs +10 -10
  38. package/dist/components/chat/index.js +149 -36
  39. package/dist/components/chat/index.js.map +1 -1
  40. package/dist/components/chat/index.mjs +11 -11
  41. package/dist/components/chat/messages/RenderActionExecutionMessage.js +4 -3
  42. package/dist/components/chat/messages/RenderActionExecutionMessage.js.map +1 -1
  43. package/dist/components/chat/messages/RenderActionExecutionMessage.mjs +1 -1
  44. package/dist/components/dev-console/console.js +128 -28
  45. package/dist/components/dev-console/console.js.map +1 -1
  46. package/dist/components/dev-console/console.mjs +4 -4
  47. package/dist/components/dev-console/index.js +128 -28
  48. package/dist/components/dev-console/index.js.map +1 -1
  49. package/dist/components/dev-console/index.mjs +4 -4
  50. package/dist/components/dev-console/utils.js +1 -1
  51. package/dist/components/dev-console/utils.js.map +1 -1
  52. package/dist/components/dev-console/utils.mjs +1 -1
  53. package/dist/components/help-modal/icons.d.ts +4 -1
  54. package/dist/components/help-modal/icons.js +39 -2
  55. package/dist/components/help-modal/icons.js.map +1 -1
  56. package/dist/components/help-modal/icons.mjs +5 -3
  57. package/dist/components/help-modal/index.js +147 -27
  58. package/dist/components/help-modal/index.js.map +1 -1
  59. package/dist/components/help-modal/index.mjs +2 -2
  60. package/dist/components/help-modal/modal.js +147 -27
  61. package/dist/components/help-modal/modal.js.map +1 -1
  62. package/dist/components/help-modal/modal.mjs +2 -2
  63. package/dist/components/index.js +149 -36
  64. package/dist/components/index.js.map +1 -1
  65. package/dist/components/index.mjs +11 -11
  66. package/dist/index.js +149 -36
  67. package/dist/index.js.map +1 -1
  68. package/dist/index.mjs +11 -11
  69. package/package.json +7 -7
  70. package/src/components/chat/Chat.tsx +9 -2
  71. package/src/components/chat/Input.tsx +9 -2
  72. package/src/components/chat/Messages.tsx +2 -9
  73. package/src/components/chat/messages/RenderActionExecutionMessage.tsx +10 -3
  74. package/src/components/dev-console/utils.ts +1 -1
  75. package/src/components/help-modal/icons.tsx +28 -0
  76. package/src/components/help-modal/modal.tsx +102 -29
  77. package/dist/chunk-4LUMV4YO.mjs.map +0 -1
  78. package/dist/chunk-4T3TMQNJ.mjs.map +0 -1
  79. package/dist/chunk-OMTPWC7T.mjs.map +0 -1
  80. package/dist/chunk-RKPANT3F.mjs.map +0 -1
  81. package/dist/chunk-WOUWNTAV.mjs +0 -72
  82. package/dist/chunk-WOUWNTAV.mjs.map +0 -1
  83. /package/dist/{chunk-Z2RXDT7O.mjs.map → chunk-375NVWZM.mjs.map} +0 -0
  84. /package/dist/{chunk-2B57NCBA.mjs.map → chunk-F2W5FD7L.mjs.map} +0 -0
  85. /package/dist/{chunk-B6A6OMIG.mjs.map → chunk-UWVGLGFQ.mjs.map} +0 -0
  86. /package/dist/{chunk-RQRK6DEW.mjs.map → chunk-WSMMTZCM.mjs.map} +0 -0
@@ -2,23 +2,23 @@ import {
2
2
  CopilotChat,
3
3
  WrappedCopilotChat,
4
4
  useCopilotChatLogic
5
- } from "../../chunk-OI5EKZPO.mjs";
5
+ } from "../../chunk-DCNCY2PL.mjs";
6
6
  import "../../chunk-6INMITFA.mjs";
7
7
  import "../../chunk-RU73BEZM.mjs";
8
8
  import "../../chunk-V7W6IM2V.mjs";
9
- import "../../chunk-OMTPWC7T.mjs";
9
+ import "../../chunk-3E7HY2UN.mjs";
10
10
  import "../../chunk-ZABXREBH.mjs";
11
11
  import "../../chunk-RJCZRKTV.mjs";
12
- import "../../chunk-2B57NCBA.mjs";
13
- import "../../chunk-4FIGRRFS.mjs";
12
+ import "../../chunk-F2W5FD7L.mjs";
13
+ import "../../chunk-PNQVKBPN.mjs";
14
14
  import "../../chunk-KXE2JCUH.mjs";
15
- import "../../chunk-WOUWNTAV.mjs";
16
- import "../../chunk-4T3TMQNJ.mjs";
15
+ import "../../chunk-TI7SY2RI.mjs";
16
+ import "../../chunk-BH6PCAAL.mjs";
17
17
  import "../../chunk-OTPAZXVR.mjs";
18
- import "../../chunk-4LUMV4YO.mjs";
18
+ import "../../chunk-EMQEEXUB.mjs";
19
19
  import "../../chunk-YQFVRDNC.mjs";
20
20
  import "../../chunk-YQ3D5IQV.mjs";
21
- import "../../chunk-RKPANT3F.mjs";
21
+ import "../../chunk-7II4YL7R.mjs";
22
22
  import "../../chunk-3XAXY2Z3.mjs";
23
23
  import "../../chunk-CBBFRI3Q.mjs";
24
24
  import "../../chunk-UPTB2MVO.mjs";
@@ -271,7 +271,10 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
271
271
  });
272
272
  const sendIcon = inProgress || pushToTalkState === "transcribing" ? context.icons.activityIcon : context.icons.sendIcon;
273
273
  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
274
- const sendDisabled = inProgress || text.length === 0 || pushToTalkState !== "idle";
274
+ const canSend = () => {
275
+ return !inProgress && text.trim().length > 0 && pushToTalkState === "idle";
276
+ };
277
+ const sendDisabled = !canSend();
275
278
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
276
279
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
277
280
  Textarea_default,
@@ -285,7 +288,9 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
285
288
  onKeyDown: (event) => {
286
289
  if (event.key === "Enter" && !event.shiftKey) {
287
290
  event.preventDefault();
288
- send();
291
+ if (canSend()) {
292
+ send();
293
+ }
289
294
  }
290
295
  }
291
296
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/chat/Input.tsx","../../../src/components/chat/ChatContext.tsx","../../../src/components/chat/Textarea.tsx","../../../src/hooks/use-push-to-talk.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { InputProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport AutoResizingTextarea from \"./Textarea\";\nimport { usePushToTalk } from \"../../hooks/use-push-to-talk\";\nimport { useCopilotContext } from \"@copilotkit/react-core\";\n\nexport const Input = ({ inProgress, onSend, isVisible = false }: InputProps) => {\n const context = useChatContext();\n const copilotContext = useCopilotContext();\n\n const pushToTalkConfigured =\n copilotContext.copilotApiConfig.textToSpeechUrl !== undefined &&\n copilotContext.copilotApiConfig.transcribeAudioUrl !== undefined;\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const handleDivClick = (event: React.MouseEvent<HTMLDivElement>) => {\n // Check if the clicked element is not the textarea itself\n if (event.target !== event.currentTarget) return;\n\n textareaRef.current?.focus();\n };\n\n const [text, setText] = useState(\"\");\n const send = () => {\n if (inProgress) return;\n onSend(text);\n setText(\"\");\n\n textareaRef.current?.focus();\n };\n\n useEffect(() => {\n if (isVisible) {\n textareaRef.current?.focus();\n }\n }, [isVisible]);\n\n const { pushToTalkState, setPushToTalkState } = usePushToTalk({\n sendFunction: onSend,\n inProgress,\n });\n\n const sendIcon =\n inProgress || pushToTalkState === \"transcribing\"\n ? context.icons.activityIcon\n : context.icons.sendIcon;\n const showPushToTalk =\n pushToTalkConfigured &&\n (pushToTalkState === \"idle\" || pushToTalkState === \"recording\") &&\n !inProgress;\n const sendDisabled = inProgress || text.length === 0 || pushToTalkState !== \"idle\";\n\n return (\n <div className=\"copilotKitInput\" onClick={handleDivClick}>\n <AutoResizingTextarea\n ref={textareaRef}\n placeholder={context.labels.placeholder}\n autoFocus={true}\n maxRows={5}\n value={text}\n onChange={(event) => setText(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n send();\n }\n }}\n />\n <div className=\"copilotKitInputControls\">\n {showPushToTalk && (\n <button\n onClick={() =>\n setPushToTalkState(pushToTalkState === \"idle\" ? \"recording\" : \"transcribing\")\n }\n className={pushToTalkState === \"recording\" ? \"copilotKitPushToTalkRecording\" : \"\"}\n >\n {context.icons.pushToTalkIcon}\n </button>\n )}\n <button\n disabled={sendDisabled}\n onClick={send}\n data-copilotkit-in-progress={!!inProgress}\n data-testid={inProgress ? \"copilot-chat-request-in-progress\" : undefined}\n >\n {sendIcon}\n </button>\n </div>\n </div>\n );\n};\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n /**\n * The icon to use for the open chat button.\n * @default <OpenIcon />\n */\n openIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button.\n * @default <CloseIcon />\n */\n closeIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button in the header.\n * @default <HeaderCloseIcon />\n */\n headerCloseIcon?: React.ReactNode;\n\n /**\n * The icon to use for the send button.\n * @default <SendIcon />\n */\n sendIcon?: React.ReactNode;\n\n /**\n * The icon to use for the activity indicator.\n * @default <ActivityIcon />\n */\n activityIcon?: React.ReactNode;\n\n /**\n * The icon to use for the spinner.\n * @default <SpinnerIcon />\n */\n spinnerIcon?: React.ReactNode;\n\n /**\n * The icon to use for the stop button.\n * @default <StopIcon />\n */\n stopIcon?: React.ReactNode;\n\n /**\n * The icon to use for the regenerate button.\n * @default <RegenerateIcon />\n */\n regenerateIcon?: React.ReactNode;\n\n /**\n * The icons to use for push to talk.\n * @default <PushToTalkIcon />\n */\n\n pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n /**\n * The initial message(s) to display in the chat window.\n */\n initial?: string | string[];\n\n /**\n * The title to display in the header.\n * @default \"CopilotKit\"\n */\n title?: string;\n\n /**\n * The placeholder to display in the input.\n * @default \"Type a message...\"\n */\n placeholder?: string;\n\n /**\n * The message to display when an error occurs.\n * @default \"❌ An error occurred. Please try again.\"\n */\n error?: string;\n\n /**\n * The label to display on the stop button.\n * @default \"Stop generating\"\n */\n stopGenerating?: string;\n\n /**\n * The label to display on the regenerate button.\n * @default \"Regenerate response\"\n */\n regenerateResponse?: string;\n}\n\ninterface ChatContext {\n labels: Required<CopilotChatLabels>;\n icons: Required<CopilotChatIcons>;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n const context = React.useContext(ChatContext);\n if (context === undefined) {\n throw new Error(\n \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n );\n }\n return context;\n}\n\ninterface ChatContextProps {\n // temperature?: number;\n // instructions?: string;\n // maxFeedback?: number;\n labels?: CopilotChatLabels;\n icons?: CopilotChatIcons;\n children?: React.ReactNode;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n // temperature,\n // instructions,\n // maxFeedback,\n labels,\n icons,\n children,\n open,\n setOpen,\n}: ChatContextProps) => {\n const memoizedLabels = useMemo(\n () => ({\n ...{\n initial: \"\",\n title: \"CopilotKit\",\n placeholder: \"Type a message...\",\n error: \"❌ An error occurred. Please try again.\",\n stopGenerating: \"Stop generating\",\n regenerateResponse: \"Regenerate response\",\n },\n ...labels,\n }),\n [labels],\n );\n\n const memoizedIcons = useMemo(\n () => ({\n ...{\n openIcon: DefaultIcons.OpenIcon,\n closeIcon: DefaultIcons.CloseIcon,\n headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n sendIcon: DefaultIcons.SendIcon,\n activityIcon: DefaultIcons.ActivityIcon,\n spinnerIcon: DefaultIcons.SpinnerIcon,\n stopIcon: DefaultIcons.StopIcon,\n regenerateIcon: DefaultIcons.RegenerateIcon,\n pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n },\n ...icons,\n }),\n [icons],\n );\n\n const context = useMemo(\n () => ({\n labels: memoizedLabels,\n icons: memoizedIcons,\n open,\n setOpen,\n }),\n [memoizedLabels, memoizedIcons, open, setOpen],\n );\n\n return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n","import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from \"react\";\n\ninterface AutoResizingTextareaProps {\n maxRows?: number;\n placeholder?: string;\n value: string;\n onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n autoFocus?: boolean;\n}\n\nconst AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(\n ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {\n const internalTextareaRef = useRef<HTMLTextAreaElement>(null);\n const [maxHeight, setMaxHeight] = useState<number>(0);\n\n useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);\n\n useEffect(() => {\n const calculateMaxHeight = () => {\n const textarea = internalTextareaRef.current;\n if (textarea) {\n textarea.style.height = \"auto\";\n const singleRowHeight = textarea.scrollHeight;\n setMaxHeight(singleRowHeight * maxRows);\n if (autoFocus) {\n textarea.focus();\n }\n }\n };\n\n calculateMaxHeight();\n }, [maxRows]);\n\n useEffect(() => {\n const textarea = internalTextareaRef.current;\n if (textarea) {\n textarea.style.height = \"auto\";\n textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;\n }\n }, [value, maxHeight]);\n\n return (\n <textarea\n ref={internalTextareaRef}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n style={{\n overflow: \"auto\",\n resize: \"none\",\n maxHeight: `${maxHeight}px`,\n }}\n rows={1}\n />\n );\n },\n);\n\nexport default AutoResizingTextarea;\n","import { useCopilotContext, useCopilotMessagesContext } from \"@copilotkit/react-core\";\nimport { Message, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport { MutableRefObject, useEffect, useRef, useState } from \"react\";\n\nexport const checkMicrophonePermission = async () => {\n try {\n const permissionStatus = await navigator.permissions.query({\n name: \"microphone\" as PermissionName,\n });\n if (permissionStatus.state === \"granted\") {\n return true;\n } else {\n return false;\n }\n } catch (err) {\n console.error(\"Error checking microphone permission\", err);\n }\n};\n\nexport const requestMicAndPlaybackPermission = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n const audioContext = new window.AudioContext();\n await audioContext.resume();\n return { stream, audioContext };\n } catch (err) {\n console.error(\"Error requesting microphone and playback permissions\", err);\n return null;\n }\n};\n\nconst startRecording = async (\n mediaStreamRef: MutableRefObject<MediaStream | null>,\n mediaRecorderRef: MutableRefObject<MediaRecorder | null>,\n audioContextRef: MutableRefObject<AudioContext | null>,\n recordedChunks: Blob[],\n onStop: () => void,\n) => {\n if (!mediaStreamRef.current || !audioContextRef.current) {\n mediaStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true });\n audioContextRef.current = new window.AudioContext();\n await audioContextRef.current.resume();\n }\n\n mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current!);\n mediaRecorderRef.current.start(1000);\n mediaRecorderRef.current.ondataavailable = (event) => {\n recordedChunks.push(event.data);\n };\n mediaRecorderRef.current.onstop = onStop;\n};\n\nconst stopRecording = (mediaRecorderRef: MutableRefObject<MediaRecorder | null>) => {\n if (mediaRecorderRef.current && mediaRecorderRef.current.state !== \"inactive\") {\n mediaRecorderRef.current.stop();\n }\n};\n\nconst transcribeAudio = async (recordedChunks: Blob[], transcribeAudioUrl: string) => {\n const completeBlob = new Blob(recordedChunks, { type: \"audio/mp4\" });\n const formData = new FormData();\n formData.append(\"file\", completeBlob, \"recording.mp4\");\n\n const response = await fetch(transcribeAudioUrl, {\n method: \"POST\",\n body: formData,\n });\n\n if (!response.ok) {\n throw new Error(`Error: ${response.statusText}`);\n }\n\n const transcription = await response.json();\n return transcription.text;\n};\n\nconst playAudioResponse = (text: string, textToSpeechUrl: string, audioContext: AudioContext) => {\n const encodedText = encodeURIComponent(text);\n const url = `${textToSpeechUrl}?text=${encodedText}`;\n\n fetch(url)\n .then((response) => response.arrayBuffer())\n .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))\n .then((audioBuffer) => {\n const source = audioContext.createBufferSource();\n source.buffer = audioBuffer;\n source.connect(audioContext.destination);\n source.start(0);\n })\n .catch((error) => {\n console.error(\"Error with decoding audio data\", error);\n });\n};\n\nexport type PushToTalkState = \"idle\" | \"recording\" | \"transcribing\";\n\nexport type SendFunction = (text: string) => Promise<Message>;\n\nexport const usePushToTalk = ({\n sendFunction,\n inProgress,\n}: {\n sendFunction: SendFunction;\n inProgress: boolean;\n}) => {\n const [pushToTalkState, setPushToTalkState] = useState<PushToTalkState>(\"idle\");\n const mediaStreamRef = useRef<MediaStream | null>(null);\n const audioContextRef = useRef<AudioContext | null>(null);\n const mediaRecorderRef = useRef<MediaRecorder | null>(null);\n const recordedChunks = useRef<Blob[]>([]);\n const generalContext = useCopilotContext();\n const messagesContext = useCopilotMessagesContext();\n const context = { ...generalContext, ...messagesContext };\n const [startReadingFromMessageId, setStartReadingFromMessageId] = useState<string | null>(null);\n\n useEffect(() => {\n if (pushToTalkState === \"recording\") {\n startRecording(\n mediaStreamRef,\n mediaRecorderRef,\n audioContextRef,\n recordedChunks.current,\n () => {\n setPushToTalkState(\"transcribing\");\n },\n );\n } else {\n stopRecording(mediaRecorderRef);\n if (pushToTalkState === \"transcribing\") {\n transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl!).then(\n async (transcription) => {\n recordedChunks.current = [];\n setPushToTalkState(\"idle\");\n const message = await sendFunction(transcription);\n setStartReadingFromMessageId(message.id);\n },\n );\n }\n }\n\n return () => {\n stopRecording(mediaRecorderRef);\n };\n }, [pushToTalkState]);\n\n useEffect(() => {\n if (inProgress === false && startReadingFromMessageId) {\n const lastMessageIndex = context.messages.findIndex(\n (message) => message.id === startReadingFromMessageId,\n );\n\n const messagesAfterLast = context.messages\n .slice(lastMessageIndex + 1)\n .filter(\n (message) => message.isTextMessage() && message.role === \"assistant\",\n ) as TextMessage[];\n\n const text = messagesAfterLast.map((message) => message.content).join(\"\\n\");\n playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl!, audioContextRef.current!);\n\n setStartReadingFromMessageId(null);\n }\n }, [startReadingFromMessageId, inProgress]);\n\n return { pushToTalkState, setPushToTalkState };\n};\n"],"mappings":"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","names":["import_react","React","import_react","import_jsx_runtime","import_react","import_react_core","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../../src/components/chat/Input.tsx","../../../src/components/chat/ChatContext.tsx","../../../src/components/chat/Textarea.tsx","../../../src/hooks/use-push-to-talk.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { InputProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport AutoResizingTextarea from \"./Textarea\";\nimport { usePushToTalk } from \"../../hooks/use-push-to-talk\";\nimport { useCopilotContext } from \"@copilotkit/react-core\";\n\nexport const Input = ({ inProgress, onSend, isVisible = false }: InputProps) => {\n const context = useChatContext();\n const copilotContext = useCopilotContext();\n\n const pushToTalkConfigured =\n copilotContext.copilotApiConfig.textToSpeechUrl !== undefined &&\n copilotContext.copilotApiConfig.transcribeAudioUrl !== undefined;\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const handleDivClick = (event: React.MouseEvent<HTMLDivElement>) => {\n // Check if the clicked element is not the textarea itself\n if (event.target !== event.currentTarget) return;\n\n textareaRef.current?.focus();\n };\n\n const [text, setText] = useState(\"\");\n const send = () => {\n if (inProgress) return;\n onSend(text);\n setText(\"\");\n\n textareaRef.current?.focus();\n };\n\n useEffect(() => {\n if (isVisible) {\n textareaRef.current?.focus();\n }\n }, [isVisible]);\n\n const { pushToTalkState, setPushToTalkState } = usePushToTalk({\n sendFunction: onSend,\n inProgress,\n });\n\n const sendIcon =\n inProgress || pushToTalkState === \"transcribing\"\n ? context.icons.activityIcon\n : context.icons.sendIcon;\n const showPushToTalk =\n pushToTalkConfigured &&\n (pushToTalkState === \"idle\" || pushToTalkState === \"recording\") &&\n !inProgress;\n\n const canSend = () => {\n return !inProgress && text.trim().length > 0 && pushToTalkState === \"idle\";\n };\n\n const sendDisabled = !canSend();\n\n return (\n <div className=\"copilotKitInput\" onClick={handleDivClick}>\n <AutoResizingTextarea\n ref={textareaRef}\n placeholder={context.labels.placeholder}\n autoFocus={true}\n maxRows={5}\n value={text}\n onChange={(event) => setText(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n if (canSend()) {\n send();\n }\n }\n }}\n />\n <div className=\"copilotKitInputControls\">\n {showPushToTalk && (\n <button\n onClick={() =>\n setPushToTalkState(pushToTalkState === \"idle\" ? \"recording\" : \"transcribing\")\n }\n className={pushToTalkState === \"recording\" ? \"copilotKitPushToTalkRecording\" : \"\"}\n >\n {context.icons.pushToTalkIcon}\n </button>\n )}\n <button\n disabled={sendDisabled}\n onClick={send}\n data-copilotkit-in-progress={!!inProgress}\n data-testid={inProgress ? \"copilot-chat-request-in-progress\" : undefined}\n >\n {sendIcon}\n </button>\n </div>\n </div>\n );\n};\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n /**\n * The icon to use for the open chat button.\n * @default <OpenIcon />\n */\n openIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button.\n * @default <CloseIcon />\n */\n closeIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button in the header.\n * @default <HeaderCloseIcon />\n */\n headerCloseIcon?: React.ReactNode;\n\n /**\n * The icon to use for the send button.\n * @default <SendIcon />\n */\n sendIcon?: React.ReactNode;\n\n /**\n * The icon to use for the activity indicator.\n * @default <ActivityIcon />\n */\n activityIcon?: React.ReactNode;\n\n /**\n * The icon to use for the spinner.\n * @default <SpinnerIcon />\n */\n spinnerIcon?: React.ReactNode;\n\n /**\n * The icon to use for the stop button.\n * @default <StopIcon />\n */\n stopIcon?: React.ReactNode;\n\n /**\n * The icon to use for the regenerate button.\n * @default <RegenerateIcon />\n */\n regenerateIcon?: React.ReactNode;\n\n /**\n * The icons to use for push to talk.\n * @default <PushToTalkIcon />\n */\n\n pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n /**\n * The initial message(s) to display in the chat window.\n */\n initial?: string | string[];\n\n /**\n * The title to display in the header.\n * @default \"CopilotKit\"\n */\n title?: string;\n\n /**\n * The placeholder to display in the input.\n * @default \"Type a message...\"\n */\n placeholder?: string;\n\n /**\n * The message to display when an error occurs.\n * @default \"❌ An error occurred. Please try again.\"\n */\n error?: string;\n\n /**\n * The label to display on the stop button.\n * @default \"Stop generating\"\n */\n stopGenerating?: string;\n\n /**\n * The label to display on the regenerate button.\n * @default \"Regenerate response\"\n */\n regenerateResponse?: string;\n}\n\ninterface ChatContext {\n labels: Required<CopilotChatLabels>;\n icons: Required<CopilotChatIcons>;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n const context = React.useContext(ChatContext);\n if (context === undefined) {\n throw new Error(\n \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n );\n }\n return context;\n}\n\ninterface ChatContextProps {\n // temperature?: number;\n // instructions?: string;\n // maxFeedback?: number;\n labels?: CopilotChatLabels;\n icons?: CopilotChatIcons;\n children?: React.ReactNode;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n // temperature,\n // instructions,\n // maxFeedback,\n labels,\n icons,\n children,\n open,\n setOpen,\n}: ChatContextProps) => {\n const memoizedLabels = useMemo(\n () => ({\n ...{\n initial: \"\",\n title: \"CopilotKit\",\n placeholder: \"Type a message...\",\n error: \"❌ An error occurred. Please try again.\",\n stopGenerating: \"Stop generating\",\n regenerateResponse: \"Regenerate response\",\n },\n ...labels,\n }),\n [labels],\n );\n\n const memoizedIcons = useMemo(\n () => ({\n ...{\n openIcon: DefaultIcons.OpenIcon,\n closeIcon: DefaultIcons.CloseIcon,\n headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n sendIcon: DefaultIcons.SendIcon,\n activityIcon: DefaultIcons.ActivityIcon,\n spinnerIcon: DefaultIcons.SpinnerIcon,\n stopIcon: DefaultIcons.StopIcon,\n regenerateIcon: DefaultIcons.RegenerateIcon,\n pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n },\n ...icons,\n }),\n [icons],\n );\n\n const context = useMemo(\n () => ({\n labels: memoizedLabels,\n icons: memoizedIcons,\n open,\n setOpen,\n }),\n [memoizedLabels, memoizedIcons, open, setOpen],\n );\n\n return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n","import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from \"react\";\n\ninterface AutoResizingTextareaProps {\n maxRows?: number;\n placeholder?: string;\n value: string;\n onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n autoFocus?: boolean;\n}\n\nconst AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(\n ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {\n const internalTextareaRef = useRef<HTMLTextAreaElement>(null);\n const [maxHeight, setMaxHeight] = useState<number>(0);\n\n useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);\n\n useEffect(() => {\n const calculateMaxHeight = () => {\n const textarea = internalTextareaRef.current;\n if (textarea) {\n textarea.style.height = \"auto\";\n const singleRowHeight = textarea.scrollHeight;\n setMaxHeight(singleRowHeight * maxRows);\n if (autoFocus) {\n textarea.focus();\n }\n }\n };\n\n calculateMaxHeight();\n }, [maxRows]);\n\n useEffect(() => {\n const textarea = internalTextareaRef.current;\n if (textarea) {\n textarea.style.height = \"auto\";\n textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;\n }\n }, [value, maxHeight]);\n\n return (\n <textarea\n ref={internalTextareaRef}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n style={{\n overflow: \"auto\",\n resize: \"none\",\n maxHeight: `${maxHeight}px`,\n }}\n rows={1}\n />\n );\n },\n);\n\nexport default AutoResizingTextarea;\n","import { useCopilotContext, useCopilotMessagesContext } from \"@copilotkit/react-core\";\nimport { Message, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport { MutableRefObject, useEffect, useRef, useState } from \"react\";\n\nexport const checkMicrophonePermission = async () => {\n try {\n const permissionStatus = await navigator.permissions.query({\n name: \"microphone\" as PermissionName,\n });\n if (permissionStatus.state === \"granted\") {\n return true;\n } else {\n return false;\n }\n } catch (err) {\n console.error(\"Error checking microphone permission\", err);\n }\n};\n\nexport const requestMicAndPlaybackPermission = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n const audioContext = new window.AudioContext();\n await audioContext.resume();\n return { stream, audioContext };\n } catch (err) {\n console.error(\"Error requesting microphone and playback permissions\", err);\n return null;\n }\n};\n\nconst startRecording = async (\n mediaStreamRef: MutableRefObject<MediaStream | null>,\n mediaRecorderRef: MutableRefObject<MediaRecorder | null>,\n audioContextRef: MutableRefObject<AudioContext | null>,\n recordedChunks: Blob[],\n onStop: () => void,\n) => {\n if (!mediaStreamRef.current || !audioContextRef.current) {\n mediaStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true });\n audioContextRef.current = new window.AudioContext();\n await audioContextRef.current.resume();\n }\n\n mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current!);\n mediaRecorderRef.current.start(1000);\n mediaRecorderRef.current.ondataavailable = (event) => {\n recordedChunks.push(event.data);\n };\n mediaRecorderRef.current.onstop = onStop;\n};\n\nconst stopRecording = (mediaRecorderRef: MutableRefObject<MediaRecorder | null>) => {\n if (mediaRecorderRef.current && mediaRecorderRef.current.state !== \"inactive\") {\n mediaRecorderRef.current.stop();\n }\n};\n\nconst transcribeAudio = async (recordedChunks: Blob[], transcribeAudioUrl: string) => {\n const completeBlob = new Blob(recordedChunks, { type: \"audio/mp4\" });\n const formData = new FormData();\n formData.append(\"file\", completeBlob, \"recording.mp4\");\n\n const response = await fetch(transcribeAudioUrl, {\n method: \"POST\",\n body: formData,\n });\n\n if (!response.ok) {\n throw new Error(`Error: ${response.statusText}`);\n }\n\n const transcription = await response.json();\n return transcription.text;\n};\n\nconst playAudioResponse = (text: string, textToSpeechUrl: string, audioContext: AudioContext) => {\n const encodedText = encodeURIComponent(text);\n const url = `${textToSpeechUrl}?text=${encodedText}`;\n\n fetch(url)\n .then((response) => response.arrayBuffer())\n .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))\n .then((audioBuffer) => {\n const source = audioContext.createBufferSource();\n source.buffer = audioBuffer;\n source.connect(audioContext.destination);\n source.start(0);\n })\n .catch((error) => {\n console.error(\"Error with decoding audio data\", error);\n });\n};\n\nexport type PushToTalkState = \"idle\" | \"recording\" | \"transcribing\";\n\nexport type SendFunction = (text: string) => Promise<Message>;\n\nexport const usePushToTalk = ({\n sendFunction,\n inProgress,\n}: {\n sendFunction: SendFunction;\n inProgress: boolean;\n}) => {\n const [pushToTalkState, setPushToTalkState] = useState<PushToTalkState>(\"idle\");\n const mediaStreamRef = useRef<MediaStream | null>(null);\n const audioContextRef = useRef<AudioContext | null>(null);\n const mediaRecorderRef = useRef<MediaRecorder | null>(null);\n const recordedChunks = useRef<Blob[]>([]);\n const generalContext = useCopilotContext();\n const messagesContext = useCopilotMessagesContext();\n const context = { ...generalContext, ...messagesContext };\n const [startReadingFromMessageId, setStartReadingFromMessageId] = useState<string | null>(null);\n\n useEffect(() => {\n if (pushToTalkState === \"recording\") {\n startRecording(\n mediaStreamRef,\n mediaRecorderRef,\n audioContextRef,\n recordedChunks.current,\n () => {\n setPushToTalkState(\"transcribing\");\n },\n );\n } else {\n stopRecording(mediaRecorderRef);\n if (pushToTalkState === \"transcribing\") {\n transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl!).then(\n async (transcription) => {\n recordedChunks.current = [];\n setPushToTalkState(\"idle\");\n const message = await sendFunction(transcription);\n setStartReadingFromMessageId(message.id);\n },\n );\n }\n }\n\n return () => {\n stopRecording(mediaRecorderRef);\n };\n }, [pushToTalkState]);\n\n useEffect(() => {\n if (inProgress === false && startReadingFromMessageId) {\n const lastMessageIndex = context.messages.findIndex(\n (message) => message.id === startReadingFromMessageId,\n );\n\n const messagesAfterLast = context.messages\n .slice(lastMessageIndex + 1)\n .filter(\n (message) => message.isTextMessage() && message.role === \"assistant\",\n ) as TextMessage[];\n\n const text = messagesAfterLast.map((message) => message.content).join(\"\\n\");\n playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl!, audioContextRef.current!);\n\n setStartReadingFromMessageId(null);\n }\n }, [startReadingFromMessageId, inProgress]);\n\n return { pushToTalkState, setPushToTalkState };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAAmD;;;ACAnD,mBAAyC;AA0LhC;AA5EF,IAAM,cAAc,aAAAC,QAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,aAAAA,QAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;;;ACxHA,IAAAC,gBAAoF;AA2C9E,IAAAC,sBAAA;AAhCN,IAAM,2BAAuB;AAAA,EAC3B,CAAC,EAAE,UAAU,GAAG,aAAa,OAAO,UAAU,WAAW,UAAU,GAAG,QAAQ;AAC5E,UAAM,0BAAsB,sBAA4B,IAAI;AAC5D,UAAM,CAAC,WAAW,YAAY,QAAI,wBAAiB,CAAC;AAEpD,2CAAoB,KAAK,MAAM,oBAAoB,OAA8B;AAEjF,iCAAU,MAAM;AACd,YAAM,qBAAqB,MAAM;AAC/B,cAAM,WAAW,oBAAoB;AACrC,YAAI,UAAU;AACZ,mBAAS,MAAM,SAAS;AACxB,gBAAM,kBAAkB,SAAS;AACjC,uBAAa,kBAAkB,OAAO;AACtC,cAAI,WAAW;AACb,qBAAS,MAAM;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAEA,yBAAmB;AAAA,IACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,iCAAU,MAAM;AACd,YAAM,WAAW,oBAAoB;AACrC,UAAI,UAAU;AACZ,iBAAS,MAAM,SAAS;AACxB,iBAAS,MAAM,SAAS,GAAG,KAAK,IAAI,SAAS,cAAc,SAAS;AAAA,MACtE;AAAA,IACF,GAAG,CAAC,OAAO,SAAS,CAAC;AAErB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAW,GAAG;AAAA,QAChB;AAAA,QACA,MAAM;AAAA;AAAA,IACR;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;;;AC5Df,wBAA6D;AAE7D,IAAAC,gBAA8D;AA6B9D,IAAM,iBAAiB,CACrB,gBACA,kBACA,iBACA,gBACA,WACG;AACH,MAAI,CAAC,eAAe,WAAW,CAAC,gBAAgB,SAAS;AACvD,mBAAe,UAAU,MAAM,UAAU,aAAa,aAAa,EAAE,OAAO,KAAK,CAAC;AAClF,oBAAgB,UAAU,IAAI,OAAO,aAAa;AAClD,UAAM,gBAAgB,QAAQ,OAAO;AAAA,EACvC;AAEA,mBAAiB,UAAU,IAAI,cAAc,eAAe,OAAQ;AACpE,mBAAiB,QAAQ,MAAM,GAAI;AACnC,mBAAiB,QAAQ,kBAAkB,CAAC,UAAU;AACpD,mBAAe,KAAK,MAAM,IAAI;AAAA,EAChC;AACA,mBAAiB,QAAQ,SAAS;AACpC;AAEA,IAAM,gBAAgB,CAAC,qBAA6D;AAClF,MAAI,iBAAiB,WAAW,iBAAiB,QAAQ,UAAU,YAAY;AAC7E,qBAAiB,QAAQ,KAAK;AAAA,EAChC;AACF;AAEA,IAAM,kBAAkB,CAAO,gBAAwB,uBAA+B;AACpF,QAAM,eAAe,IAAI,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnE,QAAM,WAAW,IAAI,SAAS;AAC9B,WAAS,OAAO,QAAQ,cAAc,eAAe;AAErD,QAAM,WAAW,MAAM,MAAM,oBAAoB;AAAA,IAC/C,QAAQ;AAAA,IACR,MAAM;AAAA,EACR,CAAC;AAED,MAAI,CAAC,SAAS,IAAI;AAChB,UAAM,IAAI,MAAM,UAAU,SAAS,YAAY;AAAA,EACjD;AAEA,QAAM,gBAAgB,MAAM,SAAS,KAAK;AAC1C,SAAO,cAAc;AACvB;AAEA,IAAM,oBAAoB,CAAC,MAAc,iBAAyB,iBAA+B;AAC/F,QAAM,cAAc,mBAAmB,IAAI;AAC3C,QAAM,MAAM,GAAG,wBAAwB;AAEvC,QAAM,GAAG,EACN,KAAK,CAAC,aAAa,SAAS,YAAY,CAAC,EACzC,KAAK,CAAC,gBAAgB,aAAa,gBAAgB,WAAW,CAAC,EAC/D,KAAK,CAAC,gBAAgB;AACrB,UAAM,SAAS,aAAa,mBAAmB;AAC/C,WAAO,SAAS;AAChB,WAAO,QAAQ,aAAa,WAAW;AACvC,WAAO,MAAM,CAAC;AAAA,EAChB,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,YAAQ,MAAM,kCAAkC,KAAK;AAAA,EACvD,CAAC;AACL;AAMO,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,wBAA0B,MAAM;AAC9E,QAAM,qBAAiB,sBAA2B,IAAI;AACtD,QAAM,sBAAkB,sBAA4B,IAAI;AACxD,QAAM,uBAAmB,sBAA6B,IAAI;AAC1D,QAAM,qBAAiB,sBAAe,CAAC,CAAC;AACxC,QAAM,qBAAiB,qCAAkB;AACzC,QAAM,sBAAkB,6CAA0B;AAClD,QAAM,UAAU,kCAAK,iBAAmB;AACxC,QAAM,CAAC,2BAA2B,4BAA4B,QAAI,wBAAwB,IAAI;AAE9F,+BAAU,MAAM;AACd,QAAI,oBAAoB,aAAa;AACnC;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf,MAAM;AACJ,6BAAmB,cAAc;AAAA,QACnC;AAAA,MACF;AAAA,IACF,OAAO;AACL,oBAAc,gBAAgB;AAC9B,UAAI,oBAAoB,gBAAgB;AACtC,wBAAgB,eAAe,SAAS,QAAQ,iBAAiB,kBAAmB,EAAE;AAAA,UACpF,CAAO,kBAAkB;AACvB,2BAAe,UAAU,CAAC;AAC1B,+BAAmB,MAAM;AACzB,kBAAM,UAAU,MAAM,aAAa,aAAa;AAChD,yCAA6B,QAAQ,EAAE;AAAA,UACzC;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,WAAO,MAAM;AACX,oBAAc,gBAAgB;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,+BAAU,MAAM;AACd,QAAI,eAAe,SAAS,2BAA2B;AACrD,YAAM,mBAAmB,QAAQ,SAAS;AAAA,QACxC,CAAC,YAAY,QAAQ,OAAO;AAAA,MAC9B;AAEA,YAAM,oBAAoB,QAAQ,SAC/B,MAAM,mBAAmB,CAAC,EAC1B;AAAA,QACC,CAAC,YAAY,QAAQ,cAAc,KAAK,QAAQ,SAAS;AAAA,MAC3D;AAEF,YAAM,OAAO,kBAAkB,IAAI,CAAC,YAAY,QAAQ,OAAO,EAAE,KAAK,IAAI;AAC1E,wBAAkB,MAAM,QAAQ,iBAAiB,iBAAkB,gBAAgB,OAAQ;AAE3F,mCAA6B,IAAI;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,2BAA2B,UAAU,CAAC;AAE1C,SAAO,EAAE,iBAAiB,mBAAmB;AAC/C;;;AHhKA,IAAAC,qBAAkC;AAwD5B,IAAAC,sBAAA;AAtDC,IAAM,QAAQ,CAAC,EAAE,YAAY,QAAQ,YAAY,MAAM,MAAkB;AAC9E,QAAM,UAAU,eAAe;AAC/B,QAAM,qBAAiB,sCAAkB;AAEzC,QAAM,uBACJ,eAAe,iBAAiB,oBAAoB,UACpD,eAAe,iBAAiB,uBAAuB;AAEzD,QAAM,kBAAc,sBAA4B,IAAI;AAEpD,QAAM,iBAAiB,CAAC,UAA4C;AAjBtE;AAmBI,QAAI,MAAM,WAAW,MAAM;AAAe;AAE1C,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,EAAE;AACnC,QAAM,OAAO,MAAM;AAzBrB;AA0BI,QAAI;AAAY;AAChB,WAAO,IAAI;AACX,YAAQ,EAAE;AAEV,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,+BAAU,MAAM;AAjClB;AAkCI,QAAI,WAAW;AACb,wBAAY,YAAZ,mBAAqB;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,EAAE,iBAAiB,mBAAmB,IAAI,cAAc;AAAA,IAC5D,cAAc;AAAA,IACd;AAAA,EACF,CAAC;AAED,QAAM,WACJ,cAAc,oBAAoB,iBAC9B,QAAQ,MAAM,eACd,QAAQ,MAAM;AACpB,QAAM,iBACJ,yBACC,oBAAoB,UAAU,oBAAoB,gBACnD,CAAC;AAEH,QAAM,UAAU,MAAM;AACpB,WAAO,CAAC,cAAc,KAAK,KAAK,EAAE,SAAS,KAAK,oBAAoB;AAAA,EACtE;AAEA,QAAM,eAAe,CAAC,QAAQ;AAE9B,SACE,8CAAC,SAAI,WAAU,mBAAkB,SAAS,gBACxC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,aAAa,QAAQ,OAAO;AAAA,QAC5B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU,CAAC,UAAU,QAAQ,MAAM,OAAO,KAAK;AAAA,QAC/C,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,WAAW,CAAC,MAAM,UAAU;AAC5C,kBAAM,eAAe;AACrB,gBAAI,QAAQ,GAAG;AACb,mBAAK;AAAA,YACP;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA,8CAAC,SAAI,WAAU,2BACZ;AAAA,wBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MACP,mBAAmB,oBAAoB,SAAS,cAAc,cAAc;AAAA,UAE9E,WAAW,oBAAoB,cAAc,kCAAkC;AAAA,UAE9E,kBAAQ,MAAM;AAAA;AAAA,MACjB;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,SAAS;AAAA,UACT,+BAA6B,CAAC,CAAC;AAAA,UAC/B,eAAa,aAAa,qCAAqC;AAAA,UAE9D;AAAA;AAAA,MACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":["import_react","React","import_react","import_jsx_runtime","import_react","import_react_core","import_jsx_runtime"]}
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Input
3
- } from "../../chunk-4LUMV4YO.mjs";
3
+ } from "../../chunk-EMQEEXUB.mjs";
4
4
  import "../../chunk-YQFVRDNC.mjs";
5
5
  import "../../chunk-CBBFRI3Q.mjs";
6
6
  import "../../chunk-FZC7X5PK.mjs";
@@ -1,12 +1,12 @@
1
+ import * as React from 'react';
1
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import React__default from 'react';
3
3
  import { MessagesProps } from './props.js';
4
4
  import '@copilotkit/runtime-client-gql';
5
5
 
6
6
  declare const Messages: ({ messages, inProgress, children, RenderTextMessage, RenderActionExecutionMessage, RenderAgentStateMessage, RenderResultMessage, }: MessagesProps) => react_jsx_runtime.JSX.Element;
7
7
  declare function useScrollToBottom(messages: any[]): {
8
- messagesEndRef: React__default.RefObject<HTMLDivElement>;
9
- messagesContainerRef: React__default.MutableRefObject<HTMLDivElement | null>;
8
+ messagesEndRef: React.RefObject<HTMLDivElement>;
9
+ messagesContainerRef: React.MutableRefObject<HTMLDivElement | null>;
10
10
  };
11
11
 
12
12
  export { Messages, useScrollToBottom };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/chat/Messages.tsx","../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport {\n ActionExecutionMessage,\n Message,\n ResultMessage,\n TextMessage,\n Role,\n AgentStateMessage,\n} from \"@copilotkit/runtime-client-gql\";\n\nexport const Messages = ({\n messages,\n inProgress,\n children,\n RenderTextMessage,\n RenderActionExecutionMessage,\n RenderAgentStateMessage,\n RenderResultMessage,\n}: MessagesProps) => {\n const context = useChatContext();\n const initialMessages = useMemo(\n () => makeInitialMessages(context.labels.initial),\n [context.labels.initial],\n );\n messages = [...initialMessages, ...messages];\n\n const actionResults: Record<string, string> = {};\n\n for (let i = 0; i < messages.length; i++) {\n if (messages[i].isActionExecutionMessage()) {\n const id = messages[i].id;\n const resultMessage: ResultMessage | undefined = messages.find(\n (message) => message.isResultMessage() && message.actionExecutionId === id,\n ) as ResultMessage | undefined;\n\n if (resultMessage) {\n actionResults[id] = ResultMessage.decodeResult(resultMessage.result || \"\");\n }\n }\n }\n\n const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);\n\n return (\n <div className=\"copilotKitMessages\" ref={messagesContainerRef}>\n {messages.map((message, index) => {\n const isCurrentMessage = index === messages.length - 1;\n\n if (message.isTextMessage()) {\n return (\n <RenderTextMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n />\n );\n } else if (message.isActionExecutionMessage()) {\n return (\n <RenderActionExecutionMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n actionResult={actionResults[message.id]}\n />\n );\n } else if (message.isAgentStateMessage()) {\n return (\n <RenderAgentStateMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n />\n );\n } else if (message.isResultMessage()) {\n return (\n <RenderResultMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n />\n );\n }\n })}\n <footer ref={messagesEndRef}>{children}</footer>\n </div>\n );\n};\n\nfunction makeInitialMessages(initial?: string | string[]): Message[] {\n let initialArray: string[] = [];\n if (initial) {\n if (Array.isArray(initial)) {\n initialArray.push(...initial);\n } else {\n initialArray.push(initial);\n }\n }\n\n return initialArray.map(\n (message) =>\n new TextMessage({\n role: Role.Assistant,\n content: message,\n }),\n );\n}\nexport function useScrollToBottom(messages: any[]) {\n const messagesEndRef = useRef<HTMLDivElement>(null);\n const messagesContainerRef = useRef<HTMLDivElement | null>(null);\n const isProgrammaticScrollRef = useRef(false);\n const isUserScrollUpRef = useRef(false);\n\n const scrollToBottom = () => {\n if (messagesEndRef.current) {\n isProgrammaticScrollRef.current = true;\n messagesEndRef.current.scrollIntoView({\n behavior: \"auto\",\n });\n }\n };\n\n const handleScroll = () => {\n if (isProgrammaticScrollRef.current) {\n isProgrammaticScrollRef.current = false;\n return;\n }\n\n if (messagesContainerRef.current) {\n const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;\n isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;\n }\n };\n\n useEffect(() => {\n const container = messagesContainerRef.current;\n if (container) {\n container.addEventListener(\"scroll\", handleScroll);\n }\n return () => {\n if (container) {\n container.removeEventListener(\"scroll\", handleScroll);\n }\n };\n }, []);\n\n useEffect(() => {\n const container = messagesContainerRef.current;\n if (!container) {\n return;\n }\n\n const mutationObserver = new MutationObserver(() => {\n if (!isUserScrollUpRef.current) {\n scrollToBottom();\n }\n });\n\n mutationObserver.observe(container, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n\n return () => {\n mutationObserver.disconnect();\n };\n }, []);\n\n useEffect(() => {\n isUserScrollUpRef.current = false;\n scrollToBottom();\n }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);\n\n return { messagesEndRef, messagesContainerRef };\n}\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n /**\n * The icon to use for the open chat button.\n * @default <OpenIcon />\n */\n openIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button.\n * @default <CloseIcon />\n */\n closeIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button in the header.\n * @default <HeaderCloseIcon />\n */\n headerCloseIcon?: React.ReactNode;\n\n /**\n * The icon to use for the send button.\n * @default <SendIcon />\n */\n sendIcon?: React.ReactNode;\n\n /**\n * The icon to use for the activity indicator.\n * @default <ActivityIcon />\n */\n activityIcon?: React.ReactNode;\n\n /**\n * The icon to use for the spinner.\n * @default <SpinnerIcon />\n */\n spinnerIcon?: React.ReactNode;\n\n /**\n * The icon to use for the stop button.\n * @default <StopIcon />\n */\n stopIcon?: React.ReactNode;\n\n /**\n * The icon to use for the regenerate button.\n * @default <RegenerateIcon />\n */\n regenerateIcon?: React.ReactNode;\n\n /**\n * The icons to use for push to talk.\n * @default <PushToTalkIcon />\n */\n\n pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n /**\n * The initial message(s) to display in the chat window.\n */\n initial?: string | string[];\n\n /**\n * The title to display in the header.\n * @default \"CopilotKit\"\n */\n title?: string;\n\n /**\n * The placeholder to display in the input.\n * @default \"Type a message...\"\n */\n placeholder?: string;\n\n /**\n * The message to display when an error occurs.\n * @default \"❌ An error occurred. Please try again.\"\n */\n error?: string;\n\n /**\n * The label to display on the stop button.\n * @default \"Stop generating\"\n */\n stopGenerating?: string;\n\n /**\n * The label to display on the regenerate button.\n * @default \"Regenerate response\"\n */\n regenerateResponse?: string;\n}\n\ninterface ChatContext {\n labels: Required<CopilotChatLabels>;\n icons: Required<CopilotChatIcons>;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n const context = React.useContext(ChatContext);\n if (context === undefined) {\n throw new Error(\n \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n );\n }\n return context;\n}\n\ninterface ChatContextProps {\n // temperature?: number;\n // instructions?: string;\n // maxFeedback?: number;\n labels?: CopilotChatLabels;\n icons?: CopilotChatIcons;\n children?: React.ReactNode;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n // temperature,\n // instructions,\n // maxFeedback,\n labels,\n icons,\n children,\n open,\n setOpen,\n}: ChatContextProps) => {\n const memoizedLabels = useMemo(\n () => ({\n ...{\n initial: \"\",\n title: \"CopilotKit\",\n placeholder: \"Type a message...\",\n error: \"❌ An error occurred. Please try again.\",\n stopGenerating: \"Stop generating\",\n regenerateResponse: \"Regenerate response\",\n },\n ...labels,\n }),\n [labels],\n );\n\n const memoizedIcons = useMemo(\n () => ({\n ...{\n openIcon: DefaultIcons.OpenIcon,\n closeIcon: DefaultIcons.CloseIcon,\n headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n sendIcon: DefaultIcons.SendIcon,\n activityIcon: DefaultIcons.ActivityIcon,\n spinnerIcon: DefaultIcons.SpinnerIcon,\n stopIcon: DefaultIcons.StopIcon,\n regenerateIcon: DefaultIcons.RegenerateIcon,\n pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n },\n ...icons,\n }),\n [icons],\n );\n\n const context = useMemo(\n () => ({\n labels: memoizedLabels,\n icons: memoizedIcons,\n open,\n setOpen,\n }),\n [memoizedLabels, memoizedIcons, open, setOpen],\n );\n\n return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":"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","names":["import_react","React","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../../src/components/chat/Messages.tsx","../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport { Message, ResultMessage, TextMessage, Role } from \"@copilotkit/runtime-client-gql\";\n\nexport const Messages = ({\n messages,\n inProgress,\n children,\n RenderTextMessage,\n RenderActionExecutionMessage,\n RenderAgentStateMessage,\n RenderResultMessage,\n}: MessagesProps) => {\n const context = useChatContext();\n const initialMessages = useMemo(\n () => makeInitialMessages(context.labels.initial),\n [context.labels.initial],\n );\n messages = [...initialMessages, ...messages];\n\n const actionResults: Record<string, string> = {};\n\n for (let i = 0; i < messages.length; i++) {\n if (messages[i].isActionExecutionMessage()) {\n const id = messages[i].id;\n const resultMessage: ResultMessage | undefined = messages.find(\n (message) => message.isResultMessage() && message.actionExecutionId === id,\n ) as ResultMessage | undefined;\n\n if (resultMessage) {\n actionResults[id] = ResultMessage.decodeResult(resultMessage.result || \"\");\n }\n }\n }\n\n const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);\n\n return (\n <div className=\"copilotKitMessages\" ref={messagesContainerRef}>\n {messages.map((message, index) => {\n const isCurrentMessage = index === messages.length - 1;\n\n if (message.isTextMessage()) {\n return (\n <RenderTextMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n />\n );\n } else if (message.isActionExecutionMessage()) {\n return (\n <RenderActionExecutionMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n actionResult={actionResults[message.id]}\n />\n );\n } else if (message.isAgentStateMessage()) {\n return (\n <RenderAgentStateMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n />\n );\n } else if (message.isResultMessage()) {\n return (\n <RenderResultMessage\n key={index}\n message={message}\n inProgress={inProgress}\n index={index}\n isCurrentMessage={isCurrentMessage}\n />\n );\n }\n })}\n <footer ref={messagesEndRef}>{children}</footer>\n </div>\n );\n};\n\nfunction makeInitialMessages(initial?: string | string[]): Message[] {\n let initialArray: string[] = [];\n if (initial) {\n if (Array.isArray(initial)) {\n initialArray.push(...initial);\n } else {\n initialArray.push(initial);\n }\n }\n\n return initialArray.map(\n (message) =>\n new TextMessage({\n role: Role.Assistant,\n content: message,\n }),\n );\n}\nexport function useScrollToBottom(messages: any[]) {\n const messagesEndRef = useRef<HTMLDivElement>(null);\n const messagesContainerRef = useRef<HTMLDivElement | null>(null);\n const isProgrammaticScrollRef = useRef(false);\n const isUserScrollUpRef = useRef(false);\n\n const scrollToBottom = () => {\n if (messagesEndRef.current) {\n isProgrammaticScrollRef.current = true;\n messagesEndRef.current.scrollIntoView({\n behavior: \"auto\",\n });\n }\n };\n\n const handleScroll = () => {\n if (isProgrammaticScrollRef.current) {\n isProgrammaticScrollRef.current = false;\n return;\n }\n\n if (messagesContainerRef.current) {\n const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;\n isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;\n }\n };\n\n useEffect(() => {\n const container = messagesContainerRef.current;\n if (container) {\n container.addEventListener(\"scroll\", handleScroll);\n }\n return () => {\n if (container) {\n container.removeEventListener(\"scroll\", handleScroll);\n }\n };\n }, []);\n\n useEffect(() => {\n const container = messagesContainerRef.current;\n if (!container) {\n return;\n }\n\n const mutationObserver = new MutationObserver(() => {\n if (!isUserScrollUpRef.current) {\n scrollToBottom();\n }\n });\n\n mutationObserver.observe(container, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n\n return () => {\n mutationObserver.disconnect();\n };\n }, []);\n\n useEffect(() => {\n isUserScrollUpRef.current = false;\n scrollToBottom();\n }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);\n\n return { messagesEndRef, messagesContainerRef };\n}\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n /**\n * The icon to use for the open chat button.\n * @default <OpenIcon />\n */\n openIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button.\n * @default <CloseIcon />\n */\n closeIcon?: React.ReactNode;\n\n /**\n * The icon to use for the close chat button in the header.\n * @default <HeaderCloseIcon />\n */\n headerCloseIcon?: React.ReactNode;\n\n /**\n * The icon to use for the send button.\n * @default <SendIcon />\n */\n sendIcon?: React.ReactNode;\n\n /**\n * The icon to use for the activity indicator.\n * @default <ActivityIcon />\n */\n activityIcon?: React.ReactNode;\n\n /**\n * The icon to use for the spinner.\n * @default <SpinnerIcon />\n */\n spinnerIcon?: React.ReactNode;\n\n /**\n * The icon to use for the stop button.\n * @default <StopIcon />\n */\n stopIcon?: React.ReactNode;\n\n /**\n * The icon to use for the regenerate button.\n * @default <RegenerateIcon />\n */\n regenerateIcon?: React.ReactNode;\n\n /**\n * The icons to use for push to talk.\n * @default <PushToTalkIcon />\n */\n\n pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n /**\n * The initial message(s) to display in the chat window.\n */\n initial?: string | string[];\n\n /**\n * The title to display in the header.\n * @default \"CopilotKit\"\n */\n title?: string;\n\n /**\n * The placeholder to display in the input.\n * @default \"Type a message...\"\n */\n placeholder?: string;\n\n /**\n * The message to display when an error occurs.\n * @default \"❌ An error occurred. Please try again.\"\n */\n error?: string;\n\n /**\n * The label to display on the stop button.\n * @default \"Stop generating\"\n */\n stopGenerating?: string;\n\n /**\n * The label to display on the regenerate button.\n * @default \"Regenerate response\"\n */\n regenerateResponse?: string;\n}\n\ninterface ChatContext {\n labels: Required<CopilotChatLabels>;\n icons: Required<CopilotChatIcons>;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n const context = React.useContext(ChatContext);\n if (context === undefined) {\n throw new Error(\n \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n );\n }\n return context;\n}\n\ninterface ChatContextProps {\n // temperature?: number;\n // instructions?: string;\n // maxFeedback?: number;\n labels?: CopilotChatLabels;\n icons?: CopilotChatIcons;\n children?: React.ReactNode;\n open: boolean;\n setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n // temperature,\n // instructions,\n // maxFeedback,\n labels,\n icons,\n children,\n open,\n setOpen,\n}: ChatContextProps) => {\n const memoizedLabels = useMemo(\n () => ({\n ...{\n initial: \"\",\n title: \"CopilotKit\",\n placeholder: \"Type a message...\",\n error: \"❌ An error occurred. Please try again.\",\n stopGenerating: \"Stop generating\",\n regenerateResponse: \"Regenerate response\",\n },\n ...labels,\n }),\n [labels],\n );\n\n const memoizedIcons = useMemo(\n () => ({\n ...{\n openIcon: DefaultIcons.OpenIcon,\n closeIcon: DefaultIcons.CloseIcon,\n headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n sendIcon: DefaultIcons.SendIcon,\n activityIcon: DefaultIcons.ActivityIcon,\n spinnerIcon: DefaultIcons.SpinnerIcon,\n stopIcon: DefaultIcons.StopIcon,\n regenerateIcon: DefaultIcons.RegenerateIcon,\n pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n },\n ...icons,\n }),\n [icons],\n );\n\n const context = useMemo(\n () => ({\n labels: memoizedLabels,\n icons: memoizedIcons,\n open,\n setOpen,\n }),\n [memoizedLabels, memoizedIcons, open, setOpen],\n );\n\n return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":"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","names":["import_react","React","import_jsx_runtime"]}
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Messages,
3
3
  useScrollToBottom
4
- } from "../../chunk-RKPANT3F.mjs";
4
+ } from "../../chunk-7II4YL7R.mjs";
5
5
  import "../../chunk-CBBFRI3Q.mjs";
6
6
  import "../../chunk-FZC7X5PK.mjs";
7
7
  import "../../chunk-MRXNTQOX.mjs";
@@ -875,7 +875,10 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
875
875
  });
876
876
  const sendIcon = inProgress || pushToTalkState === "transcribing" ? context.icons.activityIcon : context.icons.sendIcon;
877
877
  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
878
- const sendDisabled = inProgress || text.length === 0 || pushToTalkState !== "idle";
878
+ const canSend = () => {
879
+ return !inProgress && text.trim().length > 0 && pushToTalkState === "idle";
880
+ };
881
+ const sendDisabled = !canSend();
879
882
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
880
883
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
881
884
  Textarea_default,
@@ -889,7 +892,9 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
889
892
  onKeyDown: (event) => {
890
893
  if (event.key === "Enter" && !event.shiftKey) {
891
894
  event.preventDefault();
892
- send();
895
+ if (canSend()) {
896
+ send();
897
+ }
893
898
  }
894
899
  }
895
900
  }
@@ -936,9 +941,9 @@ var import_react7 = require("react");
936
941
  var import_react_syntax_highlighter = require("react-syntax-highlighter");
937
942
 
938
943
  // src/hooks/use-copy-to-clipboard.tsx
939
- var React6 = __toESM(require("react"));
944
+ var React5 = __toESM(require("react"));
940
945
  function useCopyToClipboard({ timeout = 2e3 }) {
941
- const [isCopied, setIsCopied] = React6.useState(false);
946
+ const [isCopied, setIsCopied] = React5.useState(false);
942
947
  const copyToClipboard = (value) => {
943
948
  var _a;
944
949
  if (typeof window === "undefined" || !((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
@@ -1434,8 +1439,8 @@ function RenderActionExecutionMessage(props) {
1434
1439
  const { chatComponentsCache } = (0, import_react_core3.useCopilotContext)();
1435
1440
  const { icons } = useChatContext();
1436
1441
  if (message.isActionExecutionMessage()) {
1437
- if (chatComponentsCache.current !== null && chatComponentsCache.current.actions[message.name]) {
1438
- const render = chatComponentsCache.current.actions[message.name];
1442
+ if (chatComponentsCache.current !== null && (chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"])) {
1443
+ const render = chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"];
1439
1444
  if (typeof render === "string") {
1440
1445
  if (isCurrentMessage && inProgress) {
1441
1446
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
@@ -1458,7 +1463,8 @@ function RenderActionExecutionMessage(props) {
1458
1463
  const toRender = render({
1459
1464
  status,
1460
1465
  args,
1461
- result: actionResult
1466
+ result: actionResult,
1467
+ name: message.name
1462
1468
  });
1463
1469
  if (!toRender && status === "complete") {
1464
1470
  return null;
@@ -1772,7 +1778,7 @@ function logMessages(context) {
1772
1778
  type: "ActionExecutionMessage",
1773
1779
  role: void 0,
1774
1780
  name: message.name,
1775
- scope: message.scope,
1781
+ scope: message.parentMessageId,
1776
1782
  content: message.arguments
1777
1783
  };
1778
1784
  } else if (message.isResultMessage()) {
@@ -1895,41 +1901,52 @@ var import_react9 = require("react");
1895
1901
 
1896
1902
  // src/components/help-modal/icons.tsx
1897
1903
  var import_jsx_runtime18 = require("react/jsx-runtime");
1898
- var LifeBuoyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1904
+ var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1899
1905
  "svg",
1900
1906
  {
1901
1907
  xmlns: "http://www.w3.org/2000/svg",
1902
- width: "24",
1903
- height: "24",
1904
- viewBox: "0 0 24 24",
1905
1908
  fill: "none",
1909
+ viewBox: "0 0 24 24",
1910
+ strokeWidth: "1.5",
1906
1911
  stroke: "currentColor",
1907
- strokeWidth: "2",
1908
- strokeLinecap: "round",
1909
- strokeLinejoin: "round",
1910
- className: "icon icon-tabler icons-tabler-outline icon-tabler-lifebuoy",
1911
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { transform: "translate(0, -1)", children: [
1912
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
1913
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" }),
1914
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }),
1915
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M15 15l3.35 3.35" }),
1916
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M9 15l-3.35 3.35" }),
1917
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M5.65 5.65l3.35 3.35" }),
1918
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M18.35 5.65l-3.35 3.35" })
1919
- ] })
1912
+ width: "20",
1913
+ height: "20",
1914
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1920
1915
  }
1921
1916
  );
1922
- var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1917
+ var LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1923
1918
  "svg",
1924
1919
  {
1920
+ style: {
1921
+ animation: "copilotKitSpinAnimation 1s linear infinite",
1922
+ color
1923
+ },
1924
+ width: "24",
1925
+ height: "24",
1925
1926
  xmlns: "http://www.w3.org/2000/svg",
1926
1927
  fill: "none",
1927
1928
  viewBox: "0 0 24 24",
1928
- strokeWidth: "1.5",
1929
- stroke: "currentColor",
1930
- width: "20",
1931
- height: "20",
1932
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1929
+ children: [
1930
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1931
+ "circle",
1932
+ {
1933
+ style: { opacity: 0.25 },
1934
+ cx: "12",
1935
+ cy: "12",
1936
+ r: "10",
1937
+ stroke: "currentColor",
1938
+ strokeWidth: "4"
1939
+ }
1940
+ ),
1941
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1942
+ "path",
1943
+ {
1944
+ style: { opacity: 0.75 },
1945
+ fill: "currentColor",
1946
+ 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"
1947
+ }
1948
+ )
1949
+ ]
1933
1950
  }
1934
1951
  );
1935
1952
 
@@ -1938,18 +1955,52 @@ var import_jsx_runtime19 = require("react/jsx-runtime");
1938
1955
  function CopilotKitHelpModal() {
1939
1956
  const [showHelpModal, setShowHelpModal] = (0, import_react9.useState)(false);
1940
1957
  const [issueDescription, setIssueDescription] = (0, import_react9.useState)("");
1941
- const handleSubmit = () => {
1942
- setShowHelpModal(false);
1958
+ const [email, setEmail] = (0, import_react9.useState)("");
1959
+ const [emailError, setEmailError] = (0, import_react9.useState)("");
1960
+ const [submitting, setSubmitting] = (0, import_react9.useState)(false);
1961
+ const validateEmail = (email2) => {
1962
+ const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
1963
+ return re.test(email2);
1943
1964
  };
1965
+ const handleSubmit = (e) => __async(this, null, function* () {
1966
+ e.preventDefault();
1967
+ if ((email == null ? void 0 : email.length) > 0 && !validateEmail(email)) {
1968
+ setEmailError("Please enter a valid email address");
1969
+ return;
1970
+ }
1971
+ setSubmitting(true);
1972
+ yield fetch("https://api.segment.io/v1/track", {
1973
+ method: "POST",
1974
+ headers: {
1975
+ "Content-Type": "application/json"
1976
+ },
1977
+ body: JSON.stringify({
1978
+ event: "oss.dev-console.help",
1979
+ anonymousId: window.crypto.randomUUID(),
1980
+ properties: { email, text: issueDescription },
1981
+ writeKey: "q0gQqvGYyw9pNyhIocNzefSYKGO1aiwW"
1982
+ })
1983
+ });
1984
+ setEmailError("");
1985
+ setEmail("");
1986
+ setIssueDescription("");
1987
+ setSubmitting(false);
1988
+ setShowHelpModal(false);
1989
+ });
1944
1990
  const HelpButton = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1945
1991
  "button",
1946
1992
  {
1947
1993
  onClick: () => setShowHelpModal(true),
1948
- className: "p-2 bg-transparent rounded-full shadow-lg hover:shadow-xl transition-shadow duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500",
1994
+ style: { width: "50px", height: "30px", marginRight: "0.25rem" },
1995
+ className: "text-sm p-0 bg-transparent rounded border border-blue-500",
1949
1996
  "aria-label": "Open Help",
1950
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LifeBuoyIcon, {})
1997
+ children: "Help"
1951
1998
  }
1952
1999
  );
2000
+ const submitButtonDisabled = (0, import_react9.useMemo)(
2001
+ () => submitting || !!emailError || issueDescription == null || (issueDescription == null ? void 0 : issueDescription.length) == 0,
2002
+ [submitting, emailError, issueDescription]
2003
+ );
1953
2004
  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
1954
2005
  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HelpButton, {}),
1955
2006
  showHelpModal && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1970,6 +2021,15 @@ function CopilotKitHelpModal() {
1970
2021
  ),
1971
2022
  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-full flex mb-6 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-2xl font-bold", children: "Help Options" }) }),
1972
2023
  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-4 mb-4", children: [
2024
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2025
+ "a",
2026
+ {
2027
+ href: "https://docs.copilotkit.ai/coagents/troubleshooting/common-issues",
2028
+ target: "_blank",
2029
+ rel: "noopener noreferrer",
2030
+ children: "Visit the Troubleshooting and FAQ section in the docs"
2031
+ }
2032
+ ) }),
1973
2033
  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1974
2034
  "a",
1975
2035
  {
@@ -1988,6 +2048,52 @@ function CopilotKitHelpModal() {
1988
2048
  children: "Apply for Priority Direct Slack Support"
1989
2049
  }
1990
2050
  ) })
2051
+ ] }),
2052
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-2", children: [
2053
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
2054
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: "feedback", className: "block text-sm font-medium text-gray-700 mb-1", children: "Let us know what your issue is:" }),
2055
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2056
+ "textarea",
2057
+ {
2058
+ id: "feedback",
2059
+ rows: 4,
2060
+ className: "w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500",
2061
+ placeholder: "A Loom link / screen recording is always great!",
2062
+ onChange: (e) => setIssueDescription(e.target.value),
2063
+ value: issueDescription,
2064
+ required: true
2065
+ }
2066
+ )
2067
+ ] }),
2068
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
2069
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-1", children: "Email (optional):" }),
2070
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2071
+ "input",
2072
+ {
2073
+ type: "email",
2074
+ id: "email",
2075
+ className: `w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500 ${emailError ? "border-red-500" : ""}`,
2076
+ placeholder: "Enter your email for follow-up",
2077
+ onChange: (e) => {
2078
+ setEmail(e.target.value);
2079
+ setEmailError("");
2080
+ },
2081
+ value: email
2082
+ }
2083
+ ),
2084
+ emailError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-red-500 text-sm mt-1", children: emailError })
2085
+ ] }),
2086
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "bg-gray-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2087
+ "button",
2088
+ {
2089
+ type: "submit",
2090
+ onClick: handleSubmit,
2091
+ disabled: submitButtonDisabled,
2092
+ style: submitButtonDisabled ? { backgroundColor: "rgb(216, 216, 216)", color: "rgb(129, 129, 129)" } : void 0,
2093
+ 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",
2094
+ children: submitting ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoadingSpinnerIcon, { color: "white" }) : "Submit"
2095
+ }
2096
+ ) })
1991
2097
  ] })
1992
2098
  ] })
1993
2099
  }
@@ -2299,6 +2405,7 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
2299
2405
  appendMessage,
2300
2406
  reloadMessages: defaultReloadMessages,
2301
2407
  stopGeneration: defaultStopGeneration,
2408
+ runChatCompletion,
2302
2409
  isLoading
2303
2410
  } = (0, import_react_core8.useCopilotChat)({
2304
2411
  id: (0, import_shared3.randomId)(),
@@ -2381,7 +2488,13 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
2381
2488
  });
2382
2489
  const runCurrentAgent = (hint) => __async(void 0, null, function* () {
2383
2490
  if (generalContext.agentSession) {
2384
- yield (0, import_react_core9.runAgent)(generalContext.agentSession.agentName, context, appendMessage, hint);
2491
+ yield (0, import_react_core9.runAgent)(
2492
+ generalContext.agentSession.agentName,
2493
+ context,
2494
+ appendMessage,
2495
+ runChatCompletion,
2496
+ hint
2497
+ );
2385
2498
  }
2386
2499
  });
2387
2500
  const stopCurrentAgent = () => {