@copilotkit/react-ui 1.9.3-next.1 → 1.9.3-next.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # ui
 
+## 1.9.3-next.3
+
+### Patch Changes
+
+- Updated dependencies [1bda332]
+  - @copilotkit/shared@1.9.3-next.3
+  - @copilotkit/runtime-client-gql@1.9.3-next.3
+  - @copilotkit/react-core@1.9.3-next.3
+
+## 1.9.3-next.2
+
+### Patch Changes
+
+- @copilotkit/runtime-client-gql@1.9.3-next.2
+- @copilotkit/react-core@1.9.3-next.2
+- @copilotkit/shared@1.9.3-next.2
+
 ## 1.9.3-next.1
 
 ### Patch Changes

package/dist/{chunk-X3LV7OXQ.mjs → chunk-4HUXYD3B.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-CGEAG65D.mjs";
 import {
   Textarea_default
-} from "./chunk-YQFVRDNC.mjs";
+} from "./chunk-QIOJXTIQ.mjs";
 import {
   useChatContext
 } from "./chunk-IEMQ2SQW.mjs";
@@ -30,6 +30,7 @@ var Input = ({
   const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
   const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
   const textareaRef = useRef(null);
+  const [isComposing, setIsComposing] = useState(false);
   const handleDivClick = (event) => {
     var _a2;
     const target = event.target;
@@ -76,8 +77,10 @@ var Input = ({
           maxRows: MAX_NEWLINES,
           value: text,
           onChange: (event) => setText(event.target.value),
+          onCompositionStart: () => setIsComposing(true),
+          onCompositionEnd: () => setIsComposing(false),
           onKeyDown: (event) => {
-            if (event.key === "Enter" && !event.shiftKey) {
+            if (event.key === "Enter" && !event.shiftKey && !isComposing) {
               event.preventDefault();
               if (canSend) {
                 send();
@@ -117,4 +120,4 @@ var Input = ({
 export {
   Input
 };
-//# sourceMappingURL=chunk-X3LV7OXQ.mjs.map
+//# sourceMappingURL=chunk-4HUXYD3B.mjs.map

package/dist/chunk-4HUXYD3B.mjs.map

@@ -0,0 +1 @@
+{"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 } from \"@copilotkit/react-core\";\nimport { PoweredByTag } from \"./PoweredByTag\";\n\nconst MAX_NEWLINES = 6;\n\nexport const Input = ({\n  inProgress,\n  onSend,\n  isVisible = 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 =\n    isInProgress && !hideStopButton ? context.icons.stopIcon : context.icons.sendIcon;\n  const showPushToTalk =\n    pushToTalkConfigured &&\n    (pushToTalkState === \"idle\" || pushToTalkState === \"recording\") &&\n    !inProgress;\n\n  const canSend = useMemo(() => {\n    const interruptEvent = copilotContext.langGraphInterruptAction?.event;\n    const interruptInProgress =\n      interruptEvent?.name === \"LangGraphInterruptEvent\" && !interruptEvent?.response;\n\n    return (\n      !isInProgress && text.trim().length > 0 && pushToTalkState === \"idle\" && !interruptInProgress\n    );\n  }, [copilotContext.langGraphInterruptAction?.event, 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          >\n            {buttonIcon}\n          </button>\n        </div>\n      </div>\n      <PoweredByTag showPoweredBy={showPoweredBy} />\n    </div>\n  );\n};\n"],"mappings":"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","names":["_a"]}

package/dist/{chunk-TSDSBNOS.mjs → chunk-ALIBUJML.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-EQUUN7ZM.mjs";
+} from "./chunk-KN2GCKBE.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -27,4 +27,4 @@ function CopilotSidebar(props) {
 export {
   CopilotSidebar
 };
-//# sourceMappingURL=chunk-TSDSBNOS.mjs.map
+//# sourceMappingURL=chunk-ALIBUJML.mjs.map

package/dist/{chunk-BP3RN6OE.mjs → chunk-H3EM63WS.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-EQUUN7ZM.mjs";
+} from "./chunk-KN2GCKBE.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -18,4 +18,4 @@ function CopilotPopup(props) {
 export {
   CopilotPopup
 };
-//# sourceMappingURL=chunk-BP3RN6OE.mjs.map
+//# sourceMappingURL=chunk-H3EM63WS.mjs.map

package/dist/{chunk-4RAYX7ZX.mjs → chunk-HKTWKCPS.mjs}

@@ -30,7 +30,7 @@ import {
 } from "./chunk-PLHTVHUW.mjs";
 import {
   Input
-} from "./chunk-X3LV7OXQ.mjs";
+} from "./chunk-4HUXYD3B.mjs";
 import {
   Messages
 } from "./chunk-B3D7U7TJ.mjs";
@@ -471,4 +471,4 @@ export {
   WrappedCopilotChat,
   useCopilotChatLogic
 };
-//# sourceMappingURL=chunk-4RAYX7ZX.mjs.map
+//# sourceMappingURL=chunk-HKTWKCPS.mjs.map

package/dist/{chunk-EQUUN7ZM.mjs → chunk-KN2GCKBE.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-4RAYX7ZX.mjs";
+} from "./chunk-HKTWKCPS.mjs";
 import {
   AssistantMessage
 } from "./chunk-L3GZ7TXC.mjs";
@@ -18,7 +18,7 @@ import {
 } from "./chunk-HWMFMBJC.mjs";
 import {
   Input
-} from "./chunk-X3LV7OXQ.mjs";
+} from "./chunk-4HUXYD3B.mjs";
 import {
   Messages
 } from "./chunk-B3D7U7TJ.mjs";
@@ -141,4 +141,4 @@ var CopilotModal = (_a) => {
 export {
   CopilotModal
 };
-//# sourceMappingURL=chunk-EQUUN7ZM.mjs.map
+//# sourceMappingURL=chunk-KN2GCKBE.mjs.map

package/dist/{chunk-YQFVRDNC.mjs → chunk-QIOJXTIQ.mjs}

@@ -2,7 +2,16 @@
 import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import { jsx } from "react/jsx-runtime";
 var AutoResizingTextarea = forwardRef(
-  ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
+  ({
+    maxRows = 1,
+    placeholder,
+    value,
+    onChange,
+    onKeyDown,
+    onCompositionStart,
+    onCompositionEnd,
+    autoFocus
+  }, ref) => {
     const internalTextareaRef = useRef(null);
     const [maxHeight, setMaxHeight] = useState(0);
     useImperativeHandle(ref, () => internalTextareaRef.current);
@@ -34,6 +43,8 @@ var AutoResizingTextarea = forwardRef(
         value,
         onChange,
         onKeyDown,
+        onCompositionStart,
+        onCompositionEnd,
         placeholder,
         style: {
           overflow: "auto",
@@ -50,4 +61,4 @@ var Textarea_default = AutoResizingTextarea;
 export {
   Textarea_default
 };
-//# sourceMappingURL=chunk-YQFVRDNC.mjs.map
+//# sourceMappingURL=chunk-QIOJXTIQ.mjs.map

package/dist/chunk-QIOJXTIQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Textarea.tsx"],"sourcesContent":["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  onCompositionStart?: () => void;\n  onCompositionEnd?: () => void;\n  autoFocus?: boolean;\n}\n\nconst AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(\n  (\n    {\n      maxRows = 1,\n      placeholder,\n      value,\n      onChange,\n      onKeyDown,\n      onCompositionStart,\n      onCompositionEnd,\n      autoFocus,\n    },\n    ref,\n  ) => {\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        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\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"],"mappings":";AAAA,SAAgB,UAAU,QAAQ,WAAW,YAAY,2BAA2B;AAyD9E;AA5CN,IAAM,uBAAuB;AAAA,EAC3B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,sBAAsB,OAA4B,IAAI;AAC5D,UAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,CAAC;AAEpD,wBAAoB,KAAK,MAAM,oBAAoB,OAA8B;AAEjF,cAAU,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,cAAU,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;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;","names":[]}

package/dist/components/chat/Chat.js

@@ -603,7 +603,16 @@ var import_react5 = require("react");
 var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var AutoResizingTextarea = (0, import_react3.forwardRef)(
-  ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
+  ({
+    maxRows = 1,
+    placeholder,
+    value,
+    onChange,
+    onKeyDown,
+    onCompositionStart,
+    onCompositionEnd,
+    autoFocus
+  }, ref) => {
     const internalTextareaRef = (0, import_react3.useRef)(null);
     const [maxHeight, setMaxHeight] = (0, import_react3.useState)(0);
     (0, import_react3.useImperativeHandle)(ref, () => internalTextareaRef.current);
@@ -635,6 +644,8 @@ var AutoResizingTextarea = (0, import_react3.forwardRef)(
         value,
         onChange,
         onKeyDown,
+        onCompositionStart,
+        onCompositionEnd,
         placeholder,
         style: {
           overflow: "auto",
@@ -798,6 +809,7 @@ var Input = ({
   const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
   const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
   const textareaRef = (0, import_react5.useRef)(null);
+  const [isComposing, setIsComposing] = (0, import_react5.useState)(false);
   const handleDivClick = (event) => {
     var _a2;
     const target = event.target;
@@ -844,8 +856,10 @@ var Input = ({
           maxRows: MAX_NEWLINES,
           value: text,
           onChange: (event) => setText(event.target.value),
+          onCompositionStart: () => setIsComposing(true),
+          onCompositionEnd: () => setIsComposing(false),
           onKeyDown: (event) => {
-            if (event.key === "Enter" && !event.shiftKey) {
+            if (event.key === "Enter" && !event.shiftKey && !isComposing) {
               event.preventDefault();
               if (canSend) {
                 send();