@copilotkit/react-ui 1.8.10-next.0 → 1.8.10-next.2

package/dist/index.mjs

@@ -4,12 +4,12 @@ import "./chunk-MMVDU6DF.mjs";
 import "./chunk-PXEVB7IK.mjs";
 import {
   CopilotPopup
-} from "./chunk-T7N77F5Y.mjs";
+} from "./chunk-T4ETOM63.mjs";
 import {
   CopilotSidebar
-} from "./chunk-JOL7NS2W.mjs";
+} from "./chunk-DP6QC6LJ.mjs";
 import "./chunk-WB3YULQ4.mjs";
-import "./chunk-Y7UO3RPW.mjs";
+import "./chunk-IJDF7C64.mjs";
 import "./chunk-Q2NFQTCQ.mjs";
 import "./chunk-UH2UFL5W.mjs";
 import "./chunk-V7W6IM2V.mjs";
@@ -26,7 +26,7 @@ import "./chunk-BH6PCAAL.mjs";
 import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-O34Z4XM2.mjs";
+} from "./chunk-FHVERB23.mjs";
 import "./chunk-DSQGQJI4.mjs";
 import "./chunk-24TDU7MY.mjs";
 import {
@@ -42,7 +42,7 @@ import {
 } from "./chunk-OZXUB3V7.mjs";
 import "./chunk-XZNY26GH.mjs";
 import "./chunk-PLHTVHUW.mjs";
-import "./chunk-BDNHZ3GW.mjs";
+import "./chunk-B4N2T3V3.mjs";
 import "./chunk-YQFVRDNC.mjs";
 import {
   Markdown

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.10-next.0",
+  "version": "1.8.10-next.2",
   "sideEffects": [
     "**/*.css"
   ],
@@ -50,9 +50,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.8.10-next.0",
-    "@copilotkit/runtime-client-gql": "1.8.10-next.0",
-    "@copilotkit/shared": "1.8.10-next.0"
+    "@copilotkit/react-core": "1.8.10-next.2",
+    "@copilotkit/runtime-client-gql": "1.8.10-next.2",
+    "@copilotkit/shared": "1.8.10-next.2"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Input.tsx

@@ -5,6 +5,8 @@ import AutoResizingTextarea from "./Textarea";
 import { usePushToTalk } from "../../hooks/use-push-to-talk";
 import { useCopilotContext } from "@copilotkit/react-core";
 
+const MAX_NEWLINES = 6;
+
 export const Input = ({ inProgress, onSend, isVisible = false, onStop, onUpload }: InputProps) => {
   const context = useChatContext();
   const copilotContext = useCopilotContext();
@@ -76,7 +78,7 @@ export const Input = ({ inProgress, onSend, isVisible = false, onStop, onUpload
           ref={textareaRef}
           placeholder={context.labels.placeholder}
           autoFocus={true}
-          maxRows={5}
+          maxRows={MAX_NEWLINES}
           value={text}
           onChange={(event) => setText(event.target.value)}
           onKeyDown={(event) => {

package/src/css/input.css

@@ -1,13 +1,11 @@
 .copilotKitInput {
-  display: flex;
-  flex-direction: column;
   cursor: text;
   position: relative;
   background-color: var(--copilot-kit-input-background-color);
   border-radius: 20px;
   border: 1px solid var(--copilot-kit-separator-color);
   padding: 12px 14px;
-  height: 75px;
+  min-height: 75px;
   margin: 0 auto;
   width: 95%;
 }
@@ -90,6 +88,7 @@
   color: var(--copilot-kit-secondary-contrast-color);
   border: 0px;
   background-color: transparent;
+  width: 100%;
 }
 
 .copilotKitInput > textarea::placeholder {
@@ -103,3 +102,24 @@
   border-radius: 50%;
   animation: copilotKitPulseAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+
+/* Scrollbar styles */
+.copilotKitInput textarea::-webkit-scrollbar {
+  width: 9px; /* Width of the entire scrollbar */
+}
+
+.copilotKitInput textarea::-webkit-scrollbar-track {
+  background: transparent; /* Color of the tracking area */
+}
+
+.copilotKitInput textarea::-webkit-scrollbar-thumb {
+  background-color: rgb(200 200 200); /* Color of the scroll thumb */
+  border-radius: 10px; /* Roundness of the scroll thumb */
+  border: 2px solid transparent; /* Creates padding around scroll thumb */
+  background-clip: content-box;
+  cursor: pointer;
+}
+
+.copilotKitInput textarea::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, rgb(200 200 200) 80%, black); /* Darker color on hover */
+}

package/dist/chunk-BDNHZ3GW.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat/Input.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, onStop, onUpload }: 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    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  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 = isInProgress ? context.icons.stopIcon : context.icons.sendIcon;\n  const showPushToTalk =\n    pushToTalkConfigured &&\n    (pushToTalkState === \"idle\" || pushToTalkState === \"recording\") &&\n    !inProgress;\n\n  const canSend = () => {\n    const interruptEvent = copilotContext.langGraphInterruptAction?.event;\n    const interruptInProgress =\n      interruptEvent?.name === \"LangGraphInterruptEvent\" && !interruptEvent?.response;\n\n    return (\n      (isInProgress || (!isInProgress && text.trim().length > 0)) &&\n      pushToTalkState === \"idle\" &&\n      !interruptInProgress\n    );\n  };\n\n  const sendDisabled = !canSend();\n\n  return (\n    <div className=\"copilotKitInputContainer\">\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          {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 ? 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    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA,SAAgB,WAAW,QAAQ,gBAAgB;AAKnD,SAAS,yBAAyB;AAqE1B,cAgBA,YAhBA;AAnED,IAAM,QAAQ,CAAC,EAAE,YAAY,QAAQ,YAAY,OAAO,QAAQ,SAAS,MAAkB;AAChG,QAAM,UAAU,eAAe;AAC/B,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,uBACJ,eAAe,iBAAiB,oBAAoB,UACpD,eAAe,iBAAiB,uBAAuB;AAEzD,QAAM,cAAc,OAA4B,IAAI;AAEpD,QAAM,iBAAiB,CAAC,UAA4C;AAjBtE;AAkBI,UAAM,SAAS,MAAM;AAGrB,QAAI,OAAO,QAAQ,QAAQ;AAAG;AAG9B,QAAI,OAAO,YAAY;AAAY;AAGnC,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,OAAO,MAAM;AA/BrB;AAgCI,QAAI;AAAY;AAChB,WAAO,IAAI;AACX,YAAQ,EAAE;AAEV,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,YAAU,MAAM;AAvClB;AAwCI,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,eAAe,cAAc,oBAAoB;AACvD,QAAM,aAAa,eAAe,QAAQ,MAAM,WAAW,QAAQ,MAAM;AACzE,QAAM,iBACJ,yBACC,oBAAoB,UAAU,oBAAoB,gBACnD,CAAC;AAEH,QAAM,UAAU,MAAM;AAzDxB;AA0DI,UAAM,kBAAiB,oBAAe,6BAAf,mBAAyC;AAChE,UAAM,uBACJ,iDAAgB,UAAS,6BAA6B,EAAC,iDAAgB;AAEzE,YACG,gBAAiB,CAAC,gBAAgB,KAAK,KAAK,EAAE,SAAS,MACxD,oBAAoB,UACpB,CAAC;AAAA,EAEL;AAEA,QAAM,eAAe,CAAC,QAAQ;AAE9B,SACE,oBAAC,SAAI,WAAU,4BACb,+BAAC,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,qBAAC,SAAI,WAAU,2BACZ;AAAA,kBACC,oBAAC,YAAO,SAAS,UAAU,WAAU,gCAClC,kBAAQ,MAAM,YACjB;AAAA,MAGF,oBAAC,SAAI,OAAO,EAAE,UAAU,EAAE,GAAG;AAAA,MAE5B,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MACP,mBAAmB,oBAAoB,SAAS,cAAc,cAAc;AAAA,UAE9E,WACE,oBAAoB,cAChB,+DACA;AAAA,UAGL,kBAAQ,MAAM;AAAA;AAAA,MACjB;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,SAAS,eAAe,SAAS;AAAA,UACjC,+BAA6B;AAAA,UAC7B,gBAAc,aAAa,qCAAqC;AAAA,UAChE,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}