@copilotkit/react-ui 1.8.6 → 1.8.7

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # ui
 
+## 1.8.7
+
+### Patch Changes
+
+- 8b8474f: - feat: add image input support with multi-model compatibility, pasting, and UX improvements
+- Updated dependencies [8b8474f]
+  - @copilotkit/runtime-client-gql@1.8.7
+  - @copilotkit/react-core@1.8.7
+  - @copilotkit/shared@1.8.7
+
+## 1.8.7-next.0
+
+### Patch Changes
+
+- 8b8474f: - feat: add image input support with multi-model compatibility, pasting, and UX improvements
+- Updated dependencies [8b8474f]
+  - @copilotkit/runtime-client-gql@1.8.7-next.0
+  - @copilotkit/react-core@1.8.7-next.0
+  - @copilotkit/shared@1.8.7-next.0
+
 ## 1.8.6
 
 ### Patch Changes

package/dist/{chunk-Q2YY2NX3.mjs → chunk-24TDU7MY.mjs}

@@ -1,6 +1,6 @@
 import {
   AssistantMessage
-} from "./chunk-5M7ODWKH.mjs";
+} from "./chunk-OZXUB3V7.mjs";
 import {
   __objRest
 } from "./chunk-MRXNTQOX.mjs";
@@ -109,4 +109,4 @@ function RenderAgentStateMessage(_a) {
 export {
   RenderAgentStateMessage
 };
-//# sourceMappingURL=chunk-Q2YY2NX3.mjs.map
+//# sourceMappingURL=chunk-24TDU7MY.mjs.map

package/dist/{chunk-XNQO5AZZ.mjs → chunk-ABHUX6T6.mjs}

@@ -1,6 +1,6 @@
 import {
   CodeBlock
-} from "./chunk-PCTCOQK2.mjs";
+} from "./chunk-KENCH7RN.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -69,4 +69,4 @@ var components = {
 export {
   Markdown
 };
-//# sourceMappingURL=chunk-XNQO5AZZ.mjs.map
+//# sourceMappingURL=chunk-ABHUX6T6.mjs.map

package/dist/{chunk-QJKMOGWN.mjs → chunk-BDNHZ3GW.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-YQFVRDNC.mjs";
 import {
   useChatContext
-} from "./chunk-UN2E3HCK.mjs";
+} from "./chunk-IEMQ2SQW.mjs";
 import {
   usePushToTalk
 } from "./chunk-S5MBUNGN.mjs";
@@ -12,7 +12,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { useCopilotContext } from "@copilotkit/react-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
+var Input = ({ inProgress, onSend, isVisible = false, onStop, onUpload }) => {
   const context = useChatContext();
   const copilotContext = useCopilotContext();
   const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
@@ -76,6 +76,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "copilotKitInputControls", children: [
+      onUpload && /* @__PURE__ */ jsx("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
       /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
       showPushToTalk && /* @__PURE__ */ jsx(
         "button",
@@ -103,4 +104,4 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
 export {
   Input
 };
-//# sourceMappingURL=chunk-QJKMOGWN.mjs.map
+//# sourceMappingURL=chunk-BDNHZ3GW.mjs.map

package/dist/chunk-BDNHZ3GW.mjs.map

@@ -0,0 +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, 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":[]}

package/dist/{chunk-NMNC4ROZ.mjs → chunk-DSQGQJI4.mjs}

@@ -1,6 +1,6 @@
 import {
   AssistantMessage
-} from "./chunk-5M7ODWKH.mjs";
+} from "./chunk-OZXUB3V7.mjs";
 import {
   __objRest
 } from "./chunk-MRXNTQOX.mjs";
@@ -121,4 +121,4 @@ function RenderActionExecutionMessage(_a) {
 export {
   RenderActionExecutionMessage
 };
-//# sourceMappingURL=chunk-NMNC4ROZ.mjs.map
+//# sourceMappingURL=chunk-DSQGQJI4.mjs.map

package/dist/{chunk-HEIDCT7I.mjs → chunk-HWMFMBJC.mjs}

@@ -1,10 +1,10 @@
 // src/components/chat/messages/UserMessage.tsx
 import { jsx } from "react/jsx-runtime";
 var UserMessage = (props) => {
-  return /* @__PURE__ */ jsx("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.message });
+  return /* @__PURE__ */ jsx("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.subComponent || props.message });
 };
 
 export {
   UserMessage
 };
-//# sourceMappingURL=chunk-HEIDCT7I.mjs.map
+//# sourceMappingURL=chunk-HWMFMBJC.mjs.map

package/dist/chunk-HWMFMBJC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/messages/UserMessage.tsx"],"sourcesContent":["import { UserMessageProps } from \"../props\";\n\nexport const UserMessage = (props: UserMessageProps) => {\n  return (\n    <div className=\"copilotKitMessage copilotKitUserMessage\">\n      {props.subComponent || props.message}\n    </div>\n  );\n};\n"],"mappings":";AAII;AAFG,IAAM,cAAc,CAAC,UAA4B;AACtD,SACE,oBAAC,SAAI,WAAU,2CACZ,gBAAM,gBAAgB,MAAM,SAC/B;AAEJ;","names":[]}

package/dist/{chunk-UN2E3HCK.mjs → chunk-IEMQ2SQW.mjs}

@@ -10,8 +10,9 @@ import {
   SpinnerIcon,
   StopIcon,
   ThumbsDownIcon,
-  ThumbsUpIcon
-} from "./chunk-ORSMX3SE.mjs";
+  ThumbsUpIcon,
+  UploadIcon
+} from "./chunk-XWG3L6QC.mjs";
 import {
   __spreadValues
 } from "./chunk-MRXNTQOX.mjs";
@@ -67,7 +68,8 @@ var ChatContextProvider = ({
       pushToTalkIcon: MicrophoneIcon,
       copyIcon: CopyIcon,
       thumbsUpIcon: ThumbsUpIcon,
-      thumbsDownIcon: ThumbsDownIcon
+      thumbsDownIcon: ThumbsDownIcon,
+      uploadIcon: UploadIcon
     }), icons),
     [icons]
   );
@@ -88,4 +90,4 @@ export {
   useChatContext,
   ChatContextProvider
 };
-//# sourceMappingURL=chunk-UN2E3HCK.mjs.map
+//# sourceMappingURL=chunk-IEMQ2SQW.mjs.map

package/dist/chunk-IEMQ2SQW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/ChatContext.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\nimport { ThumbsDownIcon, ThumbsUpIcon } 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   * The icons to use for copy assistant response\n   * @default <CopyIcon />\n   */\n\n  copyIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs up/response approval.\n   * @default <ThumbsUpIcon />\n   */\n\n  thumbsUpIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs down/response rejection.\n   * @default <ThumbsDownIcon />\n   */\n\n  thumbsDownIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the upload button.\n   * @default <UploadIcon />\n   */\n  uploadIcon?: 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  /**\n   * The label for the copy button.\n   * @default \"Copy to clipboard\"\n   */\n  copyToClipboard?: string;\n\n  /**\n   * The label for the thumbs up button.\n   * @default \"Thumbs up\"\n   */\n  thumbsUp?: string;\n\n  /**\n   * The label for the thumbs down button.\n   * @default \"Thumbs down\"\n   */\n  thumbsDown?: string;\n\n  /**\n   * The text to display when content is copied.\n   * @default \"Copied!\"\n   */\n  copied?: 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        copyToClipboard: \"Copy to clipboard\",\n        thumbsUp: \"Thumbs up\",\n        thumbsDown: \"Thumbs down\",\n        copied: \"Copied!\",\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.MicrophoneIcon,\n        copyIcon: DefaultIcons.CopyIcon,\n        thumbsUpIcon: DefaultIcons.ThumbsUpIcon,\n        thumbsDownIcon: DefaultIcons.ThumbsDownIcon,\n        uploadIcon: DefaultIcons.UploadIcon,\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":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS,eAAyB;AAsPhC;AApFF,IAAM,cAAc,MAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,MAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAaO,IAAM,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA,EAIlC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,QAAM,iBAAiB;AAAA,IACrB,MAAO,kCACF;AAAA,MACD,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV,IACG;AAAA,IAEL,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,gBAAgB;AAAA,IACpB,MAAO,kCACF;AAAA,MACD,UAAuB;AAAA,MACvB,WAAwB;AAAA,MACxB,iBAA8B;AAAA,MAC9B,UAAuB;AAAA,MACvB,cAA2B;AAAA,MAC3B,aAA0B;AAAA,MAC1B,UAAuB;AAAA,MACvB,gBAA6B;AAAA,MAC7B,gBAA6B;AAAA,MAC7B,UAAuB;AAAA,MACvB,cAA2B;AAAA,MAC3B,gBAA6B;AAAA,MAC7B,YAAyB;AAAA,IAC3B,IACG;AAAA,IAEL,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,eAAe,MAAM,OAAO;AAAA,EAC/C;AAEA,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAS;AACzD;","names":[]}

package/dist/{chunk-ZY25LVYR.mjs → chunk-IJADIQAR.mjs}

@@ -1,6 +1,6 @@
 import {
   useChatContext
-} from "./chunk-UN2E3HCK.mjs";
+} from "./chunk-IEMQ2SQW.mjs";
 
 // src/components/chat/Messages.tsx
 import { useEffect, useMemo, useRef } from "react";
@@ -15,6 +15,7 @@ var Messages = ({
   RenderActionExecutionMessage,
   RenderAgentStateMessage,
   RenderResultMessage,
+  RenderImageMessage,
   AssistantMessage,
   UserMessage,
   onRegenerate,
@@ -103,6 +104,23 @@ var Messages = ({
             },
             index
           );
+        } else if (message.isImageMessage && message.isImageMessage()) {
+          return /* @__PURE__ */ jsx(
+            RenderImageMessage,
+            {
+              message,
+              inProgress,
+              index,
+              isCurrentMessage,
+              AssistantMessage,
+              UserMessage,
+              onRegenerate,
+              onCopy,
+              onThumbsUp,
+              onThumbsDown
+            },
+            index
+          );
         }
       }),
       interrupt
@@ -190,4 +208,4 @@ export {
   Messages,
   useScrollToBottom
 };
-//# sourceMappingURL=chunk-ZY25LVYR.mjs.map
+//# sourceMappingURL=chunk-IJADIQAR.mjs.map

package/dist/chunk-IJADIQAR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Messages.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport { Message, ResultMessage, TextMessage, Role } from \"@copilotkit/runtime-client-gql\";\nimport { useLangGraphInterruptRender } from \"@copilotkit/react-core\";\n\nexport const Messages = ({\n  messages,\n  inProgress,\n  children,\n  RenderTextMessage,\n  RenderActionExecutionMessage,\n  RenderAgentStateMessage,\n  RenderResultMessage,\n  RenderImageMessage,\n  AssistantMessage,\n  UserMessage,\n  onRegenerate,\n  onCopy,\n  onThumbsUp,\n  onThumbsDown,\n}: MessagesProps) => {\n  const context = useChatContext();\n  const initialMessages = useMemo(\n    () => makeInitialMessages(context.labels.initial),\n    [context.labels.initial],\n  );\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  const interrupt = useLangGraphInterruptRender();\n\n  return (\n    <div className=\"copilotKitMessages\" ref={messagesContainerRef}>\n      <div className=\"copilotKitMessagesContainer\">\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                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n                onRegenerate={onRegenerate}\n                onCopy={onCopy}\n                onThumbsUp={onThumbsUp}\n                onThumbsDown={onThumbsDown}\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                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\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                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\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                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n              />\n            );\n          } else if (message.isImageMessage && message.isImageMessage()) {\n            return (\n              <RenderImageMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n                onRegenerate={onRegenerate}\n                onCopy={onCopy}\n                onThumbsUp={onThumbsUp}\n                onThumbsDown={onThumbsDown}\n              />\n            );\n          }\n        })}\n        {interrupt}\n      </div>\n      <footer className=\"copilotKitMessagesFooter\" ref={messagesEndRef}>\n        {children}\n      </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"],"mappings":"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","names":[]}

package/dist/{chunk-X6EFGEBJ.mjs → chunk-JOL7NS2W.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-GOAED4H6.mjs";
+} from "./chunk-Y7UO3RPW.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -27,4 +27,4 @@ function CopilotSidebar(props) {
 export {
   CopilotSidebar
 };
-//# sourceMappingURL=chunk-X6EFGEBJ.mjs.map
+//# sourceMappingURL=chunk-JOL7NS2W.mjs.map

package/dist/{chunk-PCTCOQK2.mjs → chunk-KENCH7RN.mjs}

@@ -2,7 +2,7 @@ import {
   CheckIcon,
   CopyIcon,
   DownloadIcon
-} from "./chunk-ORSMX3SE.mjs";
+} from "./chunk-XWG3L6QC.mjs";
 import {
   useCopyToClipboard
 } from "./chunk-54JAUBUJ.mjs";
@@ -386,4 +386,4 @@ export {
   generateRandomString,
   CodeBlock
 };
-//# sourceMappingURL=chunk-PCTCOQK2.mjs.map
+//# sourceMappingURL=chunk-KENCH7RN.mjs.map

package/dist/{chunk-ZLRUNNS7.mjs → chunk-O34Z4XM2.mjs}

@@ -1,35 +1,41 @@
+import {
+  RenderActionExecutionMessage
+} from "./chunk-DSQGQJI4.mjs";
 import {
   RenderAgentStateMessage
-} from "./chunk-Q2YY2NX3.mjs";
+} from "./chunk-24TDU7MY.mjs";
+import {
+  RenderImageMessage
+} from "./chunk-SLTG4L62.mjs";
 import {
   RenderResultMessage
-} from "./chunk-WNC6OCIB.mjs";
+} from "./chunk-XFCMZH2H.mjs";
 import {
   RenderTextMessage
-} from "./chunk-62QMTKMJ.mjs";
+} from "./chunk-POWCBXRY.mjs";
 import {
   UserMessage
-} from "./chunk-HEIDCT7I.mjs";
-import {
-  RenderActionExecutionMessage
-} from "./chunk-NMNC4ROZ.mjs";
+} from "./chunk-HWMFMBJC.mjs";
 import {
   AssistantMessage
-} from "./chunk-5M7ODWKH.mjs";
+} from "./chunk-OZXUB3V7.mjs";
 import {
   Suggestion,
   reloadSuggestions
-} from "./chunk-TOQ7P4DO.mjs";
+} from "./chunk-XZNY26GH.mjs";
+import {
+  ImageUploadQueue
+} from "./chunk-PLHTVHUW.mjs";
 import {
   Input
-} from "./chunk-QJKMOGWN.mjs";
+} from "./chunk-BDNHZ3GW.mjs";
 import {
   Messages
-} from "./chunk-ZY25LVYR.mjs";
+} from "./chunk-IJADIQAR.mjs";
 import {
   ChatContext,
   ChatContextProvider
-} from "./chunk-UN2E3HCK.mjs";
+} from "./chunk-IEMQ2SQW.mjs";
 import {
   __async,
   __spreadProps,
@@ -43,7 +49,7 @@ import {
   useCopilotContext,
   useCopilotMessagesContext
 } from "@copilotkit/react-core";
-import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
+import { Role, TextMessage, ImageMessage } from "@copilotkit/runtime-client-gql";
 import { randomId } from "@copilotkit/shared";
 import { runAgent, stopAgent } from "@copilotkit/react-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -63,14 +69,64 @@ function CopilotChat({
   RenderActionExecutionMessage: RenderActionExecutionMessage2 = RenderActionExecutionMessage,
   RenderAgentStateMessage: RenderAgentStateMessage2 = RenderAgentStateMessage,
   RenderResultMessage: RenderResultMessage2 = RenderResultMessage,
+  RenderImageMessage: RenderImageMessage2 = RenderImageMessage,
   Input: Input2 = Input,
   className,
   icons,
   labels,
   AssistantMessage: AssistantMessage2 = AssistantMessage,
-  UserMessage: UserMessage2 = UserMessage
+  UserMessage: UserMessage2 = UserMessage,
+  imageUploadsEnabled,
+  inputFileAccept = "image/*"
 }) {
   const { additionalInstructions, setChatInstructions } = useCopilotContext();
+  const [selectedImages, setSelectedImages] = useState([]);
+  const fileInputRef = useRef(null);
+  useEffect(() => {
+    if (!imageUploadsEnabled)
+      return;
+    const handlePaste = (e) => __async(this, null, function* () {
+      var _a, _b;
+      const target = e.target;
+      if (!((_a = target.parentElement) == null ? void 0 : _a.classList.contains("copilotKitInput")))
+        return;
+      const items = Array.from(((_b = e.clipboardData) == null ? void 0 : _b.items) || []);
+      const imageItems = items.filter((item) => item.type.startsWith("image/"));
+      if (imageItems.length === 0)
+        return;
+      e.preventDefault();
+      const imagePromises = imageItems.map((item) => {
+        const file = item.getAsFile();
+        if (!file)
+          return Promise.resolve(null);
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = (e2) => {
+            var _a2, _b2;
+            const base64String = (_b2 = (_a2 = e2.target) == null ? void 0 : _a2.result) == null ? void 0 : _b2.split(",")[1];
+            if (base64String) {
+              resolve({
+                contentType: file.type,
+                bytes: base64String
+              });
+            } else {
+              resolve(null);
+            }
+          };
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        });
+      });
+      try {
+        const loadedImages = (yield Promise.all(imagePromises)).filter((img) => img !== null);
+        setSelectedImages((prev) => [...prev, ...loadedImages]);
+      } catch (error) {
+        console.error("Error processing pasted images:", error);
+      }
+    });
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [imageUploadsEnabled]);
   useEffect(() => {
     if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
       setChatInstructions(instructions || "");
@@ -98,6 +154,14 @@ function CopilotChat({
     onStopGeneration,
     onReloadMessages
   );
+  const handleSendMessage = (text) => {
+    const images = selectedImages;
+    setSelectedImages([]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    return sendMessage(text, images);
+  };
   const chatContext = React.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
   const handleRegenerate = (messageId) => {
@@ -111,6 +175,40 @@ function CopilotChat({
       onCopy(message);
     }
   };
+  const handleImageUpload = (event) => __async(this, null, function* () {
+    if (!event.target.files || event.target.files.length === 0) {
+      return;
+    }
+    const files = Array.from(event.target.files).filter((file) => file.type.startsWith("image/"));
+    if (files.length === 0)
+      return;
+    const fileReadPromises = files.map((file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          var _a, _b;
+          const base64String = ((_b = (_a = e.target) == null ? void 0 : _a.result) == null ? void 0 : _b.split(",")[1]) || "";
+          if (base64String) {
+            resolve({
+              contentType: file.type,
+              bytes: base64String
+            });
+          }
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    });
+    try {
+      const loadedImages = yield Promise.all(fileReadPromises);
+      setSelectedImages((prev) => [...prev, ...loadedImages]);
+    } catch (error) {
+      console.error("Error reading files:", error);
+    }
+  });
+  const removeSelectedImage = (index) => {
+    setSelectedImages((prev) => prev.filter((_, i) => i !== index));
+  };
   return /* @__PURE__ */ jsxs(WrappedCopilotChat, { icons, labels, className, children: [
     /* @__PURE__ */ jsx(
       Messages2,
@@ -121,6 +219,7 @@ function CopilotChat({
         RenderActionExecutionMessage: RenderActionExecutionMessage2,
         RenderAgentStateMessage: RenderAgentStateMessage2,
         RenderResultMessage: RenderResultMessage2,
+        RenderImageMessage: RenderImageMessage2,
         messages: visibleMessages,
         inProgress: isLoading,
         onRegenerate: handleRegenerate,
@@ -134,19 +233,37 @@ function CopilotChat({
             message: suggestion.message,
             partial: suggestion.partial,
             className: suggestion.className,
-            onClick: (message) => sendMessage(message)
+            onClick: (message) => handleSendMessage(message)
           },
           index
         )) })
       }
     ),
+    imageUploadsEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "file",
+          multiple: true,
+          ref: fileInputRef,
+          onChange: handleImageUpload,
+          accept: inputFileAccept,
+          style: { display: "none" }
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       Input2,
       {
         inProgress: isLoading,
-        onSend: sendMessage,
+        onSend: handleSendMessage,
         isVisible,
-        onStop: stopGeneration
+        onStop: stopGeneration,
+        onUpload: imageUploadsEnabled ? () => {
+          var _a;
+          return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+        } : void 0
       }
     )
   ] });
@@ -216,22 +333,45 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
     // global context
     visibleMessages.length == 0
   ]);
-  const sendMessage = (messageContent) => __async(void 0, null, function* () {
+  const sendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
+    const images = imagesToUse || [];
     abortSuggestions();
     setCurrentSuggestions([]);
-    const message = new TextMessage({
-      content: messageContent,
-      role: Role.User
-    });
-    if (onSubmitMessage) {
-      try {
-        yield onSubmitMessage(messageContent);
-      } catch (error) {
-        console.error("Error in onSubmitMessage:", error);
+    let firstMessage = null;
+    if (messageContent.trim().length > 0) {
+      const textMessage = new TextMessage({
+        content: messageContent,
+        role: Role.User
+      });
+      if (onSubmitMessage) {
+        try {
+          yield onSubmitMessage(messageContent);
+        } catch (error) {
+          console.error("Error in onSubmitMessage:", error);
+        }
       }
+      yield appendMessage(textMessage, { followUp: images.length === 0 });
+      if (!firstMessage) {
+        firstMessage = textMessage;
+      }
+    }
+    if (images.length > 0) {
+      for (let i = 0; i < images.length; i++) {
+        const imageMessage = new ImageMessage({
+          format: images[i].contentType.replace("image/", ""),
+          bytes: images[i].bytes,
+          role: Role.User
+        });
+        yield appendMessage(imageMessage, { followUp: i === images.length - 1 });
+        if (!firstMessage) {
+          firstMessage = imageMessage;
+        }
+      }
+    }
+    if (!firstMessage) {
+      return new TextMessage({ content: "", role: Role.User });
     }
-    appendMessage(message);
-    return message;
+    return firstMessage;
   });
   const messages = visibleMessages;
   const { setMessages } = messagesContext;
@@ -328,4 +468,4 @@ export {
   WrappedCopilotChat,
   useCopilotChatLogic
 };
-//# sourceMappingURL=chunk-ZLRUNNS7.mjs.map
+//# sourceMappingURL=chunk-O34Z4XM2.mjs.map