reachat 1.2.0 → 1.3.1

package/dist/{ChatInput.d.ts → ChatInput/ChatInput.d.ts}

@@ -1,4 +1,4 @@
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 
 interface ChatInputProps {
     /**
@@ -26,5 +26,11 @@ interface ChatInputProps {
      */
     attachIcon?: ReactElement;
 }
-export declare const ChatInput: FC<ChatInputProps>;
+export interface ChatInputRef {
+    /**
+     * Focus the input.
+     */
+    focus: () => void;
+}
+export declare const ChatInput: import('react').ForwardRefExoticComponent<ChatInputProps & import('react').RefAttributes<ChatInputRef>>;
 export {};

package/dist/ChatInput/FileInput.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode, ChangeEvent } from 'react';
+
+interface FileInputProps {
+    /**
+     * Array of allowed file extensions.
+     */
+    allowedFiles: string[];
+    /**
+     * Indicates whether a file upload is in progress.
+     */
+    isLoading: boolean;
+    /**
+     * Disables the file input when true.
+     */
+    disabled: boolean;
+    /**
+     * Custom icon for the attach button.
+     */
+    attachIcon: ReactNode;
+    /**
+     * Callback function triggered when a file is selected.
+     */
+    onFileUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const FileInput: FC<FileInputProps>;
+export {};

package/dist/ChatInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChatInput';
+export * from './FileInput';

package/dist/SessionMessages/SessionMessage/MessageQuestion.d.ts

@@ -1,9 +1,14 @@
 import { FC, PropsWithChildren } from 'react';
+import { ConversationFile } from '../../types';
 
 export interface MessageQuestionProps extends PropsWithChildren {
     /**
      * Question to render.
      */
     question: string;
+    /**
+     * Array of sources referenced in the conversation
+     */
+    files?: ConversationFile[];
 }
 export declare const MessageQuestion: FC<MessageQuestionProps>;

package/dist/docs.json

@@ -123,7 +123,9 @@
         }
       },
       "remarkPlugins": {
-        "defaultValue": null,
+        "defaultValue": {
+          "value": "[remarkGfm, remarkYoutube, remarkMath]"
+        },
         "description": "Remark plugins to apply to the request/response.",
         "name": "remarkPlugins",
         "parent": {
@@ -297,7 +299,7 @@
   },
   {
     "tags": {},
-    "filePath": "src/ChatInput.tsx",
+    "filePath": "src/ChatInput/ChatInput.tsx",
     "description": "",
     "displayName": "ChatInput",
     "methods": [],
@@ -307,12 +309,12 @@
         "description": "Default value for the input field.",
         "name": "defaultValue",
         "parent": {
-          "fileName": "src/ChatInput.tsx",
+          "fileName": "src/ChatInput/ChatInput.tsx",
           "name": "ChatInputProps"
         },
         "declarations": [
           {
-            "fileName": "src/ChatInput.tsx",
+            "fileName": "src/ChatInput/ChatInput.tsx",
             "name": "ChatInputProps"
           }
         ],
@@ -326,12 +328,12 @@
         "description": "Allowed file types for upload.",
         "name": "allowedFiles",
         "parent": {
-          "fileName": "src/ChatInput.tsx",
+          "fileName": "src/ChatInput/ChatInput.tsx",
           "name": "ChatInputProps"
         },
         "declarations": [
           {
-            "fileName": "src/ChatInput.tsx",
+            "fileName": "src/ChatInput/ChatInput.tsx",
             "name": "ChatInputProps"
           }
         ],
@@ -345,12 +347,12 @@
         "description": "Placeholder text for the input field.",
         "name": "placeholder",
         "parent": {
-          "fileName": "src/ChatInput.tsx",
+          "fileName": "src/ChatInput/ChatInput.tsx",
           "name": "ChatInputProps"
         },
         "declarations": [
           {
-            "fileName": "src/ChatInput.tsx",
+            "fileName": "src/ChatInput/ChatInput.tsx",
             "name": "ChatInputProps"
           }
         ],
@@ -366,12 +368,12 @@
         "description": "Icon to show for send.",
         "name": "sendIcon",
         "parent": {
-          "fileName": "src/ChatInput.tsx",
+          "fileName": "src/ChatInput/ChatInput.tsx",
           "name": "ChatInputProps"
         },
         "declarations": [
           {
-            "fileName": "src/ChatInput.tsx",
+            "fileName": "src/ChatInput/ChatInput.tsx",
             "name": "ChatInputProps"
           }
         ],
@@ -387,12 +389,12 @@
         "description": "Icon to show for send.",
         "name": "stopIcon",
         "parent": {
-          "fileName": "src/ChatInput.tsx",
+          "fileName": "src/ChatInput/ChatInput.tsx",
           "name": "ChatInputProps"
         },
         "declarations": [
           {
-            "fileName": "src/ChatInput.tsx",
+            "fileName": "src/ChatInput/ChatInput.tsx",
             "name": "ChatInputProps"
           }
         ],
@@ -402,18 +404,16 @@
         }
       },
       "attachIcon": {
-        "defaultValue": {
-          "value": "<AttachIcon />"
-        },
+        "defaultValue": null,
         "description": "Icon to show for attach.",
         "name": "attachIcon",
         "parent": {
-          "fileName": "src/ChatInput.tsx",
+          "fileName": "src/ChatInput/ChatInput.tsx",
           "name": "ChatInputProps"
         },
         "declarations": [
           {
-            "fileName": "src/ChatInput.tsx",
+            "fileName": "src/ChatInput/ChatInput.tsx",
             "name": "ChatInputProps"
           }
         ],
@@ -424,6 +424,112 @@
       }
     }
   },
+  {
+    "tags": {},
+    "filePath": "src/ChatInput/FileInput.tsx",
+    "description": "",
+    "displayName": "FileInput",
+    "methods": [],
+    "props": {
+      "allowedFiles": {
+        "defaultValue": null,
+        "description": "Array of allowed file extensions.",
+        "name": "allowedFiles",
+        "parent": {
+          "fileName": "src/ChatInput/FileInput.tsx",
+          "name": "FileInputProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ChatInput/FileInput.tsx",
+            "name": "FileInputProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "string[]"
+        }
+      },
+      "isLoading": {
+        "defaultValue": null,
+        "description": "Indicates whether a file upload is in progress.",
+        "name": "isLoading",
+        "parent": {
+          "fileName": "src/ChatInput/FileInput.tsx",
+          "name": "FileInputProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ChatInput/FileInput.tsx",
+            "name": "FileInputProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "disabled": {
+        "defaultValue": null,
+        "description": "Disables the file input when true.",
+        "name": "disabled",
+        "parent": {
+          "fileName": "src/ChatInput/FileInput.tsx",
+          "name": "FileInputProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ChatInput/FileInput.tsx",
+            "name": "FileInputProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "attachIcon": {
+        "defaultValue": {
+          "value": "<AttachIcon />"
+        },
+        "description": "Custom icon for the attach button.",
+        "name": "attachIcon",
+        "parent": {
+          "fileName": "src/ChatInput/FileInput.tsx",
+          "name": "FileInputProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ChatInput/FileInput.tsx",
+            "name": "FileInputProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "onFileUpload": {
+        "defaultValue": null,
+        "description": "Callback function triggered when a file is selected.",
+        "name": "onFileUpload",
+        "parent": {
+          "fileName": "src/ChatInput/FileInput.tsx",
+          "name": "FileInputProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ChatInput/FileInput.tsx",
+            "name": "FileInputProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "(event: ChangeEvent<HTMLInputElement>) => void"
+        }
+      }
+    }
+  },
   {
     "tags": {},
     "filePath": "src/Markdown/CodeHighlighter.tsx",
@@ -559,9 +665,7 @@
     "methods": [],
     "props": {
       "remarkPlugins": {
-        "defaultValue": {
-          "value": "[remarkGfm, remarkMath]"
-        },
+        "defaultValue": null,
         "description": "Remark plugins to apply to the markdown content.",
         "name": "remarkPlugins",
         "parent": {
@@ -1324,6 +1428,25 @@
         "type": {
           "name": "string"
         }
+      },
+      "files": {
+        "defaultValue": null,
+        "description": "Array of sources referenced in the conversation",
+        "name": "files",
+        "parent": {
+          "fileName": "src/SessionMessages/SessionMessage/MessageQuestion.tsx",
+          "name": "MessageQuestionProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/SessionMessages/SessionMessage/MessageQuestion.tsx",
+            "name": "MessageQuestionProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ConversationFile[]"
+        }
       }
     }
   },

package/dist/index.js

@@ -10,39 +10,81 @@
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, useContext, useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { cn, Textarea, Button, Ellipsis, DateFormat, IconButton, Card, Divider, useInfinityList, useComponentTheme, List, ListItem } from "reablocks";
+import { createContext, useContext, useRef, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useCallback } from "react";
+import { Button, cn, Textarea, Ellipsis, DateFormat, IconButton, Card, Divider, useInfinityList, useComponentTheme, List, ListItem } from "reablocks";
 import { Slot } from "@radix-ui/react-slot";
 import { motion, AnimatePresence } from "framer-motion";
 import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 import { Prism } from "react-syntax-highlighter";
 import rehypeKatex from "rehype-katex";
-import remarkMath from "remark-math";
 import { findAndReplace } from "mdast-util-find-and-replace";
-import remarkYoutube from "remark-youtube";
 import { useHotkeys } from "reakeys";
+import remarkGfm from "remark-gfm";
+import remarkYoutube from "remark-youtube";
+import remarkMath from "remark-math";
 import { isToday, isYesterday, isThisWeek, isThisMonth, isThisYear, format } from "date-fns";
 const SvgSend = (props) => /* @__PURE__ */ React.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { id: "send" }, /* @__PURE__ */ React.createElement("path", { id: "Vector", d: "M14.6111 2.33327C14.5349 2.3339 14.4598 2.35194 14.3917 2.386L2.39168 8.386C2.31456 8.42456 2.24872 8.4824 2.20055 8.55391C2.15238 8.62543 2.12352 8.70818 2.11677 8.79414C2.11002 8.88009 2.12561 8.96634 2.16203 9.04449C2.19845 9.12264 2.25446 9.19005 2.32462 9.24017L4.52514 10.8124L5.47371 13.6581C5.50257 13.7447 5.55457 13.8217 5.62406 13.8808C5.69355 13.9399 5.7779 13.9789 5.86796 13.9935C5.95802 14.0082 6.05036 13.9979 6.13499 13.9638C6.21962 13.9297 6.2933 13.873 6.34806 13.8001L7.05249 12.8606L10.3207 15.2376C10.3843 15.2839 10.4579 15.3146 10.5355 15.3271C10.6132 15.3396 10.6927 15.3336 10.7676 15.3097C10.8425 15.2857 10.9107 15.2444 10.9667 15.1891C11.0226 15.1338 11.0647 15.0661 11.0896 14.9915L15.0896 2.99147C15.1148 2.91597 15.1216 2.83555 15.1094 2.7569C15.0972 2.67825 15.0665 2.60363 15.0197 2.53926C14.9729 2.47488 14.9114 2.42261 14.8403 2.38678C14.7693 2.35096 14.6907 2.33261 14.6111 2.33327ZM13.2478 5.35345L10.3565 14.0266L7.67293 12.0755L13.2478 5.35345ZM10.684 5.35801L4.934 9.87559L3.58113 8.90879L10.684 5.35801ZM11.2784 6.16205L6.56746 11.843C6.56681 11.8437 6.56616 11.8443 6.56551 11.845L6.56355 11.8476C6.55841 11.8538 6.55342 11.8601 6.54858 11.8665C6.54319 11.8733 6.53798 11.8802 6.53295 11.8873L6.12085 12.4361L5.53426 10.6751L11.2784 6.16205Z", fill: "currentColor" })));
 const SvgStop = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-octagon-x", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m15 9-6 6" }), /* @__PURE__ */ React.createElement("path", { d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" }), /* @__PURE__ */ React.createElement("path", { d: "m9 9 6 6" }));
-const SvgPaperclip = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-paperclip", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }));
 const ChatContext = createContext({
   sessions: [],
   activeSessionId: null
 });
-const ChatInput = ({
+const SvgPaperclip = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-paperclip", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }));
+const FileInput = ({
+  allowedFiles,
+  onFileUpload,
+  isLoading,
+  disabled,
+  attachIcon = /* @__PURE__ */ jsx(SvgPaperclip, {})
+}) => {
+  const { theme } = useContext(ChatContext);
+  const fileInputRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        className: "hidden",
+        accept: allowedFiles.join(","),
+        onChange: onFileUpload
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        title: "Upload",
+        variant: "text",
+        disabled: isLoading || disabled,
+        className: cn(theme.input.upload),
+        onClick: () => {
+          var _a;
+          return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+        },
+        children: attachIcon
+      }
+    )
+  ] });
+};
+const ChatInput = forwardRef(({
   allowedFiles,
   placeholder,
   defaultValue,
   sendIcon = /* @__PURE__ */ jsx(SvgSend, {}),
   stopIcon = /* @__PURE__ */ jsx(SvgStop, {}),
-  attachIcon = /* @__PURE__ */ jsx(SvgPaperclip, {})
-}) => {
+  attachIcon
+}, ref) => {
   const { theme, isLoading, disabled, sendMessage, stopMessage, fileUpload } = useContext(ChatContext);
   const [message, setMessage] = useState("");
-  const fileInputRef = useRef(null);
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }));
   const handleSendMessage = () => {
     if (message.trim()) {
       sendMessage == null ? void 0 : sendMessage(message);
@@ -66,44 +108,29 @@ const ChatInput = ({
     /* @__PURE__ */ jsx(
       Textarea,
       {
+        inputRef,
         containerClassName: cn(theme.input.input),
         minRows: 1,
         autoFocus: true,
         value: message,
-        onChange: (e) => setMessage(e.target.value),
         defaultValue,
         onKeyPress: handleKeyPress,
         placeholder,
-        disabled: isLoading || disabled
+        disabled: isLoading || disabled,
+        onChange: (e) => setMessage(e.target.value)
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: cn(theme.input.actions.base), children: [
-      (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "file",
-            ref: fileInputRef,
-            className: "hidden",
-            accept: allowedFiles.join(","),
-            onChange: handleFileUpload
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            title: "Upload",
-            variant: "text",
-            disabled: isLoading || disabled,
-            className: cn(theme.input.upload),
-            onClick: () => {
-              var _a;
-              return (_a = fileInputRef.current) == null ? void 0 : _a.click();
-            },
-            children: attachIcon
-          }
-        )
-      ] }),
+      (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsx(
+        FileInput,
+        {
+          allowedFiles,
+          onFileUpload: handleFileUpload,
+          isLoading,
+          disabled,
+          attachIcon
+        }
+      ),
       isLoading && /* @__PURE__ */ jsx(
         Button,
         {
@@ -126,7 +153,7 @@ const ChatInput = ({
       )
     ] })
   ] });
-};
+});
 const SessionEmpty = ({
   children
 }) => {
@@ -1239,7 +1266,7 @@ const TableHeaderCell = ({ children, ...props }) => /* @__PURE__ */ jsx("th", {
 const TableDataCell = ({ children, ...props }) => /* @__PURE__ */ jsx("td", { ...props, children });
 const Markdown = ({
   children,
-  remarkPlugins = [remarkGfm, remarkMath],
+  remarkPlugins,
   rehypePlugins = [rehypeKatex]
 }) => {
   const { theme } = useContext(ChatContext);
@@ -1292,13 +1319,63 @@ function remarkCve() {
     ];
   }
 }
+const SvgFile = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.7036 1.37034C3.04741 1.02653 3.51373 0.833374 3.99996 0.833374H9.33329H9.33331C9.47275 0.833374 9.59885 0.890449 9.68954 0.98251L13.6843 4.97722C13.7763 5.0679 13.8333 5.19398 13.8333 5.33337L13.8333 5.3379V13.3334C13.8333 13.8196 13.6401 14.2859 13.2963 14.6297C12.9525 14.9736 12.4862 15.1667 12 15.1667H3.99996C3.51373 15.1667 3.04741 14.9736 2.7036 14.6297C2.35978 14.2859 2.16663 13.8196 2.16663 13.3334V2.66671C2.16663 2.18048 2.35978 1.71416 2.7036 1.37034ZM3.99996 1.83337H8.83331V5.33337C8.83331 5.60952 9.05717 5.83337 9.33331 5.83337H12.8333V13.3334C12.8333 13.5544 12.7455 13.7663 12.5892 13.9226C12.4329 14.0789 12.221 14.1667 12 14.1667H3.99996C3.77895 14.1667 3.56698 14.0789 3.4107 13.9226C3.25442 13.7663 3.16663 13.5544 3.16663 13.3334V2.66671C3.16663 2.44569 3.25442 2.23373 3.4107 2.07745C3.56698 1.92117 3.77895 1.83337 3.99996 1.83337ZM9.83331 2.5405L12.1262 4.83337H9.83331V2.5405ZM5.33331 8.16663C5.05717 8.16663 4.83331 8.39048 4.83331 8.66663C4.83331 8.94277 5.05717 9.16663 5.33331 9.16663H10.6666C10.9428 9.16663 11.1666 8.94277 11.1666 8.66663C11.1666 8.39048 10.9428 8.16663 10.6666 8.16663H5.33331ZM4.83331 11.3334C4.83331 11.0572 5.05717 10.8334 5.33331 10.8334H10.6666C10.9428 10.8334 11.1666 11.0572 11.1666 11.3334C11.1666 11.6095 10.9428 11.8334 10.6666 11.8334H5.33331C5.05717 11.8334 4.83331 11.6095 4.83331 11.3334ZM5.33331 5.5C5.05717 5.5 4.83331 5.72386 4.83331 6C4.83331 6.27614 5.05717 6.5 5.33331 6.5H6.66665C6.94279 6.5 7.16665 6.27614 7.16665 6C7.16665 5.72386 6.94279 5.5 6.66665 5.5H5.33331Z" }));
+const MessageFile = ({
+  name,
+  type,
+  url,
+  limit = 100,
+  fileIcon = /* @__PURE__ */ jsx(SvgFile, {})
+}) => {
+  const { theme } = useContext(ChatContext);
+  const isImage = type == null ? void 0 : type.startsWith("image/");
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn(theme.messages.message.files.file.base),
+      onClick: () => {
+        window.open(url, "_blank");
+      },
+      children: [
+        isImage ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("img", { src: url, className: "h-10 w-10" }) }) : /* @__PURE__ */ jsx(Fragment, { children: fileIcon }),
+        name && /* @__PURE__ */ jsx("figcaption", { children: name && /* @__PURE__ */ jsx("span", { className: cn(theme.messages.message.files.file.name), children: /* @__PURE__ */ jsx(Ellipsis, { value: name, limit }) }) })
+      ]
+    }
+  );
+};
+const MessageFiles = ({ files, children }) => {
+  const { theme } = useContext(ChatContext);
+  const Comp = children ? Slot : MessageFile;
+  if (!files || files.length === 0) {
+    return null;
+  }
+  return files.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(theme.messages.message.files.base), children: files.map((file, index) => /* @__PURE__ */ jsx(Comp, { ...file, children }, index)) });
+};
 const MessageQuestion = ({
   question,
+  files,
   children
 }) => {
-  const { theme, remarkPlugins = [remarkGfm, remarkYoutube] } = useContext(ChatContext);
+  const { theme, remarkPlugins } = useContext(ChatContext);
   const Comp = children ? Slot : "div";
-  return /* @__PURE__ */ jsx(Comp, { className: cn(theme.messages.message.question), children: children || /* @__PURE__ */ jsx(Markdown, { remarkPlugins, children: question }) });
+  const [expanded, setExpanded] = useState(false);
+  const isLong = question.length > 500;
+  return /* @__PURE__ */ jsxs(Comp, { className: cn(theme.messages.message.question, {
+    [theme.messages.message.overlay]: isLong && !expanded
+  }), children: [
+    /* @__PURE__ */ jsx(MessageFiles, { files }),
+    children || /* @__PURE__ */ jsx(Markdown, { remarkPlugins, children: question }),
+    isLong && !expanded && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "link",
+        size: "small",
+        className: theme.messages.message.expand,
+        onClick: () => setExpanded(true),
+        children: "Show more"
+      }
+    )
+  ] });
 };
 const MessageResponse = ({
   response,
@@ -1308,7 +1385,7 @@ const MessageResponse = ({
   const {
     theme,
     isCompact,
-    remarkPlugins = [remarkGfm, remarkYoutube]
+    remarkPlugins
   } = useContext(ChatContext);
   const Comp = children ? Slot : "div";
   return /* @__PURE__ */ jsx(
@@ -1334,38 +1411,6 @@ const MessageResponse = ({
     }
   );
 };
-const SvgFile = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.7036 1.37034C3.04741 1.02653 3.51373 0.833374 3.99996 0.833374H9.33329H9.33331C9.47275 0.833374 9.59885 0.890449 9.68954 0.98251L13.6843 4.97722C13.7763 5.0679 13.8333 5.19398 13.8333 5.33337L13.8333 5.3379V13.3334C13.8333 13.8196 13.6401 14.2859 13.2963 14.6297C12.9525 14.9736 12.4862 15.1667 12 15.1667H3.99996C3.51373 15.1667 3.04741 14.9736 2.7036 14.6297C2.35978 14.2859 2.16663 13.8196 2.16663 13.3334V2.66671C2.16663 2.18048 2.35978 1.71416 2.7036 1.37034ZM3.99996 1.83337H8.83331V5.33337C8.83331 5.60952 9.05717 5.83337 9.33331 5.83337H12.8333V13.3334C12.8333 13.5544 12.7455 13.7663 12.5892 13.9226C12.4329 14.0789 12.221 14.1667 12 14.1667H3.99996C3.77895 14.1667 3.56698 14.0789 3.4107 13.9226C3.25442 13.7663 3.16663 13.5544 3.16663 13.3334V2.66671C3.16663 2.44569 3.25442 2.23373 3.4107 2.07745C3.56698 1.92117 3.77895 1.83337 3.99996 1.83337ZM9.83331 2.5405L12.1262 4.83337H9.83331V2.5405ZM5.33331 8.16663C5.05717 8.16663 4.83331 8.39048 4.83331 8.66663C4.83331 8.94277 5.05717 9.16663 5.33331 9.16663H10.6666C10.9428 9.16663 11.1666 8.94277 11.1666 8.66663C11.1666 8.39048 10.9428 8.16663 10.6666 8.16663H5.33331ZM4.83331 11.3334C4.83331 11.0572 5.05717 10.8334 5.33331 10.8334H10.6666C10.9428 10.8334 11.1666 11.0572 11.1666 11.3334C11.1666 11.6095 10.9428 11.8334 10.6666 11.8334H5.33331C5.05717 11.8334 4.83331 11.6095 4.83331 11.3334ZM5.33331 5.5C5.05717 5.5 4.83331 5.72386 4.83331 6C4.83331 6.27614 5.05717 6.5 5.33331 6.5H6.66665C6.94279 6.5 7.16665 6.27614 7.16665 6C7.16665 5.72386 6.94279 5.5 6.66665 5.5H5.33331Z" }));
-const MessageFile = ({
-  name,
-  type,
-  url,
-  limit = 100,
-  fileIcon = /* @__PURE__ */ jsx(SvgFile, {})
-}) => {
-  const { theme } = useContext(ChatContext);
-  const isImage = type == null ? void 0 : type.startsWith("image/");
-  return /* @__PURE__ */ jsxs(
-    "figure",
-    {
-      className: cn(theme.messages.message.files.file.base),
-      onClick: () => {
-        window.open(url, "_blank");
-      },
-      children: [
-        isImage ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("img", { src: url, className: "h-10 w-10" }) }) : /* @__PURE__ */ jsx(Fragment, { children: fileIcon }),
-        name && /* @__PURE__ */ jsx("figcaption", { children: name && /* @__PURE__ */ jsx("span", { className: cn(theme.messages.message.files.file.name), children: /* @__PURE__ */ jsx(Ellipsis, { value: name, limit }) }) })
-      ]
-    }
-  );
-};
-const MessageFiles = ({ files, children }) => {
-  const { theme } = useContext(ChatContext);
-  const Comp = children ? Slot : MessageFile;
-  if (!files || files.length === 0) {
-    return null;
-  }
-  return files.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(theme.messages.message.files.base), children: files.map((file, index) => /* @__PURE__ */ jsx(Comp, { ...file, children }, index)) });
-};
 const MessageSource = ({ title, url, image, limit = 50 }) => {
   const { theme, isCompact } = useContext(ChatContext);
   return /* @__PURE__ */ jsxs(
@@ -1497,8 +1542,7 @@ const SessionMessage = ({
   const { theme, isLoading } = useContext(ChatContext);
   return /* @__PURE__ */ jsxs(motion.div, { variants: messageVariants, children: [
     /* @__PURE__ */ jsx(Card, { className: cn(theme.messages.message.base), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(MessageFiles, { files: conversation.files }),
-      /* @__PURE__ */ jsx(MessageQuestion, { question: conversation.question }),
+      /* @__PURE__ */ jsx(MessageQuestion, { question: conversation.question, files: conversation.files }),
       /* @__PURE__ */ jsx(
         MessageResponse,
         {
@@ -1629,11 +1673,13 @@ const chatTheme = {
     message: {
       base: "mt-4 mb-4 flex flex-col p-0 rounded border-none bg-transparent",
       question: [
-        "font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900",
+        "relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900",
         "dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100"
       ].join(" "),
-      response: ["data-[compact=false]:px-4 text-gray-900", "dark:text-gray-100"].join(" "),
+      response: ["relative data-[compact=false]:px-4 text-gray-900", "dark:text-gray-100"].join(" "),
+      overlay: `overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-gradient-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200`,
       cursor: "inline-block w-1 h-4 bg-current",
+      expand: "absolute bottom-1 right-1 z-10",
       files: {
         base: "mb-2 flex flex-wrap gap-3 ",
         file: {
@@ -1732,7 +1778,7 @@ const Chat = ({
   activeSessionId,
   theme: customTheme = chatTheme,
   onNewSession,
-  remarkPlugins,
+  remarkPlugins = [remarkGfm, remarkYoutube, remarkMath],
   disabled,
   style,
   className
@@ -1999,6 +2045,7 @@ export {
   ChatContext,
   ChatInput,
   CodeHighlighter,
+  FileInput,
   Markdown,
   MessageActions,
   MessageFile,