@copilotkit/react-ui

Version:

github.com/CopilotKit/CopilotKit

CopilotKit/CopilotKit

1 lines • 8.26 kB

Source Map (JSON)

View Raw

{"version":3,"sources":["../src/components/chat/Input.tsx"],"sourcesContent":["import React, { useMemo, 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, useCopilotChatInternal } from \"@copilotkit/react-core\";\nimport { PoweredByTag } from \"./PoweredByTag\";\n\nconst MAX_NEWLINES = 6;\n\nexport const Input = ({\n inProgress,\n onSend,\n chatReady = false,\n onStop,\n onUpload,\n hideStopButton = false,\n}: InputProps) => {\n const context = useChatContext();\n const copilotContext = useCopilotContext();\n\n const showPoweredBy = !copilotContext.copilotApiConfig?.publicApiKey;\n\n const pushToTalkConfigured =\n copilotContext.copilotApiConfig.textToSpeechUrl !== undefined &&\n copilotContext.copilotApiConfig.transcribeAudioUrl !== undefined;\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const [isComposing, setIsComposing] = useState(false);\n\n const handleDivClick = (event: React.MouseEvent<HTMLDivElement>) => {\n const target = event.target as HTMLElement;\n\n // If the user clicked a button or inside a button, don't focus the textarea\n if (target.closest(\"button\")) return;\n\n // If the user clicked the textarea, do nothing (it's already focused)\n if (target.tagName === \"TEXTAREA\") return;\n\n // Otherwise, focus the textarea\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 // tylerslaton:\n //\n // This scrolls CopilotKit into view always. Reading the commit history, it was likely\n // added to fix a bug but it is causing issues now.\n //\n // For the future, if we want this behavior again, we will need to find a way to do it without\n // forcing CopilotKit to always be in view. This code causes this because focusing an element\n // in most browsers will scroll that element into view.\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 isInProgress = inProgress || pushToTalkState === \"transcribing\";\n const { buttonIcon, buttonAlt } = useMemo(() => {\n if (!chatReady) return { buttonIcon: context.icons.spinnerIcon, buttonAlt: \"Loading\" };\n return isInProgress && !hideStopButton && chatReady\n ? { buttonIcon: context.icons.stopIcon, buttonAlt: \"Stop\" }\n : { buttonIcon: context.icons.sendIcon, buttonAlt: \"Send\" };\n }, [isInProgress, chatReady, hideStopButton, context.icons.stopIcon, context.icons.sendIcon]);\n const showPushToTalk =\n pushToTalkConfigured &&\n (pushToTalkState === \"idle\" || pushToTalkState === \"recording\") &&\n !inProgress;\n\n const { interrupt } = useCopilotChatInternal();\n\n const canSend = useMemo(() => {\n return !isInProgress && text.trim().length > 0 && pushToTalkState === \"idle\" && !interrupt;\n }, [interrupt, isInProgress, text, pushToTalkState]);\n\n const canStop = useMemo(() => {\n return isInProgress && !hideStopButton;\n }, [isInProgress, hideStopButton]);\n\n const sendDisabled = !canSend && !canStop;\n\n return (\n <div className={`copilotKitInputContainer ${showPoweredBy ? \"poweredByContainer\" : \"\"}`}>\n <div className=\"copilotKitInput\" onClick={handleDivClick}>\n <AutoResizingTextarea\n ref={textareaRef}\n placeholder={context.labels.placeholder}\n autoFocus={false}\n maxRows={MAX_NEWLINES}\n value={text}\n onChange={(event) => setText(event.target.value)}\n onCompositionStart={() => setIsComposing(true)}\n onCompositionEnd={() => setIsComposing(false)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" && !event.shiftKey && !isComposing) {\n event.preventDefault();\n if (canSend) {\n send();\n }\n }\n }}\n />\n <div className=\"copilotKitInputControls\">\n {onUpload && (\n <button onClick={onUpload} className=\"copilotKitInputControlButton\">\n {context.icons.uploadIcon}\n </button>\n )}\n\n <div style={{ flexGrow: 1 }} />\n\n {showPushToTalk && (\n <button\n onClick={() =>\n setPushToTalkState(pushToTalkState === \"idle\" ? \"recording\" : \"transcribing\")\n }\n className={\n pushToTalkState === \"recording\"\n ? \"copilotKitInputControlButton copilotKitPushToTalkRecording\"\n : \"copilotKitInputControlButton\"\n }\n >\n {context.icons.pushToTalkIcon}\n </button>\n )}\n <button\n disabled={sendDisabled}\n onClick={isInProgress && !hideStopButton ? onStop : send}\n data-copilotkit-in-progress={inProgress}\n data-test-id={inProgress ? \"copilot-chat-request-in-progress\" : \"copilot-chat-ready\"}\n className=\"copilotKitInputControlButton\"\n aria-label={buttonAlt}\n >\n {buttonIcon}\n </button>\n </div>\n </div>\n <PoweredByTag showPoweredBy={showPoweredBy} />\n </div>\n );\n};\n"],"mappings":"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","names":["_a"]}