@copilotkit/react-ui 1.8.0-next.3 → 1.8.0-next.5

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # ui
 
+## 1.8.0-next.5
+
+### Patch Changes
+
+- a50f4c1: - move default components out of ui
+- Updated dependencies [a50f4c1]
+  - @copilotkit/react-core@1.8.0-next.5
+  - @copilotkit/runtime-client-gql@1.8.0-next.5
+  - @copilotkit/shared@1.8.0-next.5
+
+## 1.8.0-next.4
+
+### Patch Changes
+
+- d8e354b: - fix: re-align customization variable names and usage
+  - @copilotkit/react-core@1.8.0-next.4
+  - @copilotkit/runtime-client-gql@1.8.0-next.4
+  - @copilotkit/shared@1.8.0-next.4
+
 ## 1.8.0-next.3
 
 ### Minor Changes

package/dist/{chunk-LXCH2BIB.mjs → chunk-6H7IQRIU.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-KG6DW6R2.mjs";
+} from "./chunk-DFHFPZQD.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -18,4 +18,4 @@ function CopilotPopup(props) {
 export {
   CopilotPopup
 };
-//# sourceMappingURL=chunk-LXCH2BIB.mjs.map
+//# sourceMappingURL=chunk-6H7IQRIU.mjs.map

package/dist/{chunk-KG6DW6R2.mjs → chunk-DFHFPZQD.mjs}

@@ -3,22 +3,22 @@ import {
 } from "./chunk-CGVOCLHN.mjs";
 import {
   Header
-} from "./chunk-GDJAAFIK.mjs";
+} from "./chunk-QS7UFQFD.mjs";
 import {
   Button
 } from "./chunk-VC4NO5QZ.mjs";
 import {
   CopilotChat
-} from "./chunk-5GNYGURH.mjs";
-import {
-  AssistantMessage
-} from "./chunk-FBYETUFL.mjs";
+} from "./chunk-Z6YOBQUJ.mjs";
 import {
   UserMessage
 } from "./chunk-HEIDCT7I.mjs";
+import {
+  AssistantMessage
+} from "./chunk-FBYETUFL.mjs";
 import {
   Input
-} from "./chunk-2LRE4W6A.mjs";
+} from "./chunk-LYHZXHTJ.mjs";
 import {
   Messages
 } from "./chunk-GJME6MK4.mjs";
@@ -102,4 +102,4 @@ var CopilotModal = ({
 export {
   CopilotModal
 };
-//# sourceMappingURL=chunk-KG6DW6R2.mjs.map
+//# sourceMappingURL=chunk-DFHFPZQD.mjs.map

package/dist/{chunk-LKCAF2HG.mjs → chunk-FFNESJSG.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-KG6DW6R2.mjs";
+} from "./chunk-DFHFPZQD.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -27,4 +27,4 @@ function CopilotSidebar(props) {
 export {
   CopilotSidebar
 };
-//# sourceMappingURL=chunk-LKCAF2HG.mjs.map
+//# sourceMappingURL=chunk-FFNESJSG.mjs.map

package/dist/{chunk-QGK5GOSC.mjs → chunk-GBXUOB6L.mjs}

@@ -1,3 +1,10 @@
+import {
+  getPublishedCopilotKitVersion,
+  logActions,
+  logMessages,
+  logReadables,
+  shouldShowDevConsole
+} from "./chunk-6TCUJ3B7.mjs";
 import {
   CopilotKitHelpModal
 } from "./chunk-YC4NBUGE.mjs";
@@ -7,13 +14,6 @@ import {
   ExclamationMarkIcon,
   ExclamationMarkTriangleIcon
 } from "./chunk-OTPAZXVR.mjs";
-import {
-  getPublishedCopilotKitVersion,
-  logActions,
-  logMessages,
-  logReadables,
-  shouldShowDevConsole
-} from "./chunk-6TCUJ3B7.mjs";
 import {
   SmallSpinnerIcon
 } from "./chunk-ORSMX3SE.mjs";
@@ -201,4 +201,4 @@ export {
   CopilotDevConsole,
   DebugMenuButton
 };
-//# sourceMappingURL=chunk-QGK5GOSC.mjs.map
+//# sourceMappingURL=chunk-GBXUOB6L.mjs.map

package/dist/{chunk-2LRE4W6A.mjs → chunk-LYHZXHTJ.mjs}

@@ -78,7 +78,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
         "button",
         {
           onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
-          className: pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : "",
+          className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
           children: context.icons.pushToTalkIcon
         }
       ),
@@ -89,6 +89,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
           onClick: isInProgress ? onStop : send,
           "data-copilotkit-in-progress": inProgress,
           "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
+          className: "copilotKitInputControlButton",
           children: buttonIcon
         }
       )
@@ -99,4 +100,4 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
 export {
   Input
 };
-//# sourceMappingURL=chunk-2LRE4W6A.mjs.map
+//# sourceMappingURL=chunk-LYHZXHTJ.mjs.map

package/dist/{chunk-2LRE4W6A.mjs.map → chunk-LYHZXHTJ.mjs.map}

@@ -1 +1 @@
-{"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 }: 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 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          <div style={{ flexGrow: 1 }} />\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={isInProgress ? onStop : send}\n            data-copilotkit-in-progress={inProgress}\n            data-test-id={inProgress ? \"copilot-chat-request-in-progress\" : \"copilot-chat-ready\"}\n          >\n            {buttonIcon}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA,SAAgB,WAAW,QAAQ,gBAAgB;AAKnD,SAAS,yBAAyB;AA+D1B,cAgBA,YAhBA;AA7DD,IAAM,QAAQ,CAAC,EAAE,YAAY,QAAQ,YAAY,OAAO,OAAO,MAAkB;AACtF,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;AAmBI,QAAI,MAAM,WAAW,MAAM;AAAe;AAE1C,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,OAAO,MAAM;AAzBrB;AA0BI,QAAI;AAAY;AAChB,WAAO,IAAI;AACX,YAAQ,EAAE;AAEV,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,YAAU,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,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;AAnDxB;AAoDI,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,2BACb;AAAA,0BAAC,SAAI,OAAO,EAAE,UAAU,EAAE,GAAG;AAAA,MAC5B,kBACC;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,eAAe,SAAS;AAAA,UACjC,+BAA6B;AAAA,UAC7B,gBAAc,aAAa,qCAAqC;AAAA,UAE/D;AAAA;AAAA,MACH;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"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 }: 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 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          <div style={{ flexGrow: 1 }} />\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;AA+D1B,cAgBA,YAhBA;AA7DD,IAAM,QAAQ,CAAC,EAAE,YAAY,QAAQ,YAAY,OAAO,OAAO,MAAkB;AACtF,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;AAmBI,QAAI,MAAM,WAAW,MAAM;AAAe;AAE1C,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,OAAO,MAAM;AAzBrB;AA0BI,QAAI;AAAY;AAChB,WAAO,IAAI;AACX,YAAQ,EAAE;AAEV,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,YAAU,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,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;AAnDxB;AAoDI,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,2BACb;AAAA,0BAAC,SAAI,OAAO,EAAE,UAAU,EAAE,GAAG;AAAA,MAC5B,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":[]}

package/dist/chunk-MMVDU6DF.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-MMVDU6DF.mjs.map

package/dist/{chunk-GDJAAFIK.mjs → chunk-QS7UFQFD.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotDevConsole
-} from "./chunk-QGK5GOSC.mjs";
+} from "./chunk-GBXUOB6L.mjs";
 import {
   useChatContext
 } from "./chunk-5JY5QJ2W.mjs";
@@ -21,4 +21,4 @@ var Header = ({}) => {
 export {
   Header
 };
-//# sourceMappingURL=chunk-GDJAAFIK.mjs.map
+//# sourceMappingURL=chunk-QS7UFQFD.mjs.map

package/dist/{chunk-5GNYGURH.mjs → chunk-Z6YOBQUJ.mjs}

@@ -1,9 +1,3 @@
-import {
-  AssistantMessage
-} from "./chunk-FBYETUFL.mjs";
-import {
-  RenderActionExecutionMessage
-} from "./chunk-XB6QCUPB.mjs";
 import {
   RenderAgentStateMessage
 } from "./chunk-UWWMAJ7R.mjs";
@@ -16,13 +10,19 @@ import {
 import {
   UserMessage
 } from "./chunk-HEIDCT7I.mjs";
+import {
+  AssistantMessage
+} from "./chunk-FBYETUFL.mjs";
+import {
+  RenderActionExecutionMessage
+} from "./chunk-XB6QCUPB.mjs";
 import {
   Suggestion,
   reloadSuggestions
 } from "./chunk-TOQ7P4DO.mjs";
 import {
   Input
-} from "./chunk-2LRE4W6A.mjs";
+} from "./chunk-LYHZXHTJ.mjs";
 import {
   Messages
 } from "./chunk-GJME6MK4.mjs";
@@ -332,4 +332,4 @@ export {
   WrappedCopilotChat,
   useCopilotChatLogic
 };
-//# sourceMappingURL=chunk-5GNYGURH.mjs.map
+//# sourceMappingURL=chunk-Z6YOBQUJ.mjs.map

package/dist/components/chat/Chat.js

@@ -786,7 +786,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
         "button",
         {
           onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
-          className: pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : "",
+          className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
           children: context.icons.pushToTalkIcon
         }
       ),
@@ -797,6 +797,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
           onClick: isInProgress ? onStop : send,
           "data-copilotkit-in-progress": inProgress,
           "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
+          className: "copilotKitInputControlButton",
           children: buttonIcon
         }
       )