@brainfish-ai/components 0.22.11 → 0.23.1

package/dist/esm/chunks/{ChatSearch.CgxpBVrd.js → ChatSearch.DO8oQOlu.js}

@@ -1,11 +1,11 @@
-import React__default, { useState, useCallback, useMemo, createContext, useContext, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import React__default, { useState, useCallback, useMemo, useContext, createContext, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../components/ui/tooltip.js';
 import { Button } from '../components/ui/button.js';
-import { XCircle, Check, Copy, CaretDown, ArrowSquareOut, CaretRight, ArrowsVertical, Globe, LockSimple, MagnifyingGlass, X, Image, ArrowRight, ArrowLeft, ArrowsInSimple, ArrowsOutSimple } from '@phosphor-icons/react';
-import { F as FormattedMessage, c as addPopupWidgetUtm, M as MemoizedReactMarkdown } from './FormattedMessage.ieoe4jPf.js';
+import { XCircle, X, Check, Copy, CaretDown, ArrowSquareOut, CaretRight, ArrowsVertical, Globe, LockSimple, MagnifyingGlass, Image, ArrowRight, ArrowLeft, ArrowsInSimple, ArrowsOutSimple } from '@phosphor-icons/react';
+import { F as FormattedMessage, b as addPopupWidgetUtm, M as MemoizedReactMarkdown } from './FormattedMessage.DFWDPJoI.js';
 import { appendErrors, useForm, Controller } from 'react-hook-form';
 import { validateFieldsNatively, toNestErrors } from '@hookform/resolvers';
 import require$$0 from 'ajv';
@@ -27,7 +27,8 @@ import { getCountry } from 'countries-and-timezones';
 import { Switch } from '../components/ui/switch.js';
 import { C as Combobox } from './combobox.DNYCWyub.js';
 import { T as TwoLevelCombobox } from './two-level-combobox.DsWPDcI6.js';
-import { l as loadConversation, c as createConversationId, a as useAutocomplete, s as sendFeedbackReason, b as sendFeedback, d as searchApi, f as fetchAnswerStream, e as fetchFollowUpQuestions } from './hooks.CKojclfe.js';
+import { X as X$1 } from 'lucide-react';
+import { l as loadConversation, c as createConversationId, r as requestPresignedUrl, a as uploadFileToS3, b as useAutocomplete, s as sendFeedbackReason, d as sendFeedback, e as searchApi, f as fetchAnswerStream, g as fetchFollowUpQuestions } from './hooks.DI5ftshU.js';
 import { ScrollArea } from '../components/ui/scroll-area.js';
 
 import '../ChatSearch.css';function Suggestions({ suggestions, onQuestionClick, title = "Suggested questions" }) {
@@ -56,18 +57,18 @@ var hasRequiredCode$1;
 function requireCode$1 () {
 	if (hasRequiredCode$1) return code$1;
 	hasRequiredCode$1 = 1;
-	(function (exports) {
-		Object.defineProperty(exports, "__esModule", { value: true });
-		exports.regexpCode = exports.getEsmExportName = exports.getProperty = exports.safeStringify = exports.stringify = exports.strConcat = exports.addCodeArg = exports.str = exports._ = exports.nil = exports._Code = exports.Name = exports.IDENTIFIER = exports._CodeOrName = void 0;
+	(function (exports$1) {
+		Object.defineProperty(exports$1, "__esModule", { value: true });
+		exports$1.regexpCode = exports$1.getEsmExportName = exports$1.getProperty = exports$1.safeStringify = exports$1.stringify = exports$1.strConcat = exports$1.addCodeArg = exports$1.str = exports$1._ = exports$1.nil = exports$1._Code = exports$1.Name = exports$1.IDENTIFIER = exports$1._CodeOrName = void 0;
 		// eslint-disable-next-line @typescript-eslint/no-extraneous-class
 		class _CodeOrName {
 		}
-		exports._CodeOrName = _CodeOrName;
-		exports.IDENTIFIER = /^[a-z$_][a-z$_0-9]*$/i;
+		exports$1._CodeOrName = _CodeOrName;
+		exports$1.IDENTIFIER = /^[a-z$_][a-z$_0-9]*$/i;
 		class Name extends _CodeOrName {
 		    constructor(s) {
 		        super();
-		        if (!exports.IDENTIFIER.test(s))
+		        if (!exports$1.IDENTIFIER.test(s))
 		            throw new Error("CodeGen: name must be a valid identifier");
 		        this.str = s;
 		    }
@@ -81,7 +82,7 @@ function requireCode$1 () {
 		        return { [this.str]: 1 };
 		    }
 		}
-		exports.Name = Name;
+		exports$1.Name = Name;
 		class _Code extends _CodeOrName {
 		    constructor(code) {
 		        super();
@@ -109,8 +110,8 @@ function requireCode$1 () {
 		        }, {})));
 		    }
 		}
-		exports._Code = _Code;
-		exports.nil = new _Code("");
+		exports$1._Code = _Code;
+		exports$1.nil = new _Code("");
 		function _(strs, ...args) {
 		    const code = [strs[0]];
 		    let i = 0;
@@ -120,7 +121,7 @@ function requireCode$1 () {
 		    }
 		    return new _Code(code);
 		}
-		exports._ = _;
+		exports$1._ = _;
 		const plus = new _Code("+");
 		function str(strs, ...args) {
 		    const expr = [safeStringify(strs[0])];
@@ -133,7 +134,7 @@ function requireCode$1 () {
 		    optimize(expr);
 		    return new _Code(expr);
 		}
-		exports.str = str;
+		exports$1.str = str;
 		function addCodeArg(code, arg) {
 		    if (arg instanceof _Code)
 		        code.push(...arg._items);
@@ -142,7 +143,7 @@ function requireCode$1 () {
 		    else
 		        code.push(interpolate(arg));
 		}
-		exports.addCodeArg = addCodeArg;
+		exports$1.addCodeArg = addCodeArg;
 		function optimize(expr) {
 		    let i = 1;
 		    while (i < expr.length - 1) {
@@ -178,7 +179,7 @@ function requireCode$1 () {
 		function strConcat(c1, c2) {
 		    return c2.emptyStr() ? c1 : c1.emptyStr() ? c2 : str `${c1}${c2}`;
 		}
-		exports.strConcat = strConcat;
+		exports$1.strConcat = strConcat;
 		// TODO do not allow arrays here
 		function interpolate(x) {
 		    return typeof x == "number" || typeof x == "boolean" || x === null
@@ -188,29 +189,29 @@ function requireCode$1 () {
 		function stringify(x) {
 		    return new _Code(safeStringify(x));
 		}
-		exports.stringify = stringify;
+		exports$1.stringify = stringify;
 		function safeStringify(x) {
 		    return JSON.stringify(x)
 		        .replace(/\u2028/g, "\\u2028")
 		        .replace(/\u2029/g, "\\u2029");
 		}
-		exports.safeStringify = safeStringify;
+		exports$1.safeStringify = safeStringify;
 		function getProperty(key) {
-		    return typeof key == "string" && exports.IDENTIFIER.test(key) ? new _Code(`.${key}`) : _ `[${key}]`;
+		    return typeof key == "string" && exports$1.IDENTIFIER.test(key) ? new _Code(`.${key}`) : _ `[${key}]`;
 		}
-		exports.getProperty = getProperty;
+		exports$1.getProperty = getProperty;
 		//Does best effort to format the name properly
 		function getEsmExportName(key) {
-		    if (typeof key == "string" && exports.IDENTIFIER.test(key)) {
+		    if (typeof key == "string" && exports$1.IDENTIFIER.test(key)) {
 		        return new _Code(`${key}`);
 		    }
 		    throw new Error(`CodeGen: invalid export name: ${key}, use explicit $id name mapping`);
 		}
-		exports.getEsmExportName = getEsmExportName;
+		exports$1.getEsmExportName = getEsmExportName;
 		function regexpCode(rx) {
 		    return new _Code(rx.toString());
 		}
-		exports.regexpCode = regexpCode;
+		exports$1.regexpCode = regexpCode;
 		
 	} (code$1));
 	return code$1;
@@ -223,9 +224,9 @@ var hasRequiredScope;
 function requireScope () {
 	if (hasRequiredScope) return scope;
 	hasRequiredScope = 1;
-	(function (exports) {
-		Object.defineProperty(exports, "__esModule", { value: true });
-		exports.ValueScope = exports.ValueScopeName = exports.Scope = exports.varKinds = exports.UsedValueState = void 0;
+	(function (exports$1) {
+		Object.defineProperty(exports$1, "__esModule", { value: true });
+		exports$1.ValueScope = exports$1.ValueScopeName = exports$1.Scope = exports$1.varKinds = exports$1.UsedValueState = void 0;
 		const code_1 = requireCode$1();
 		class ValueError extends Error {
 		    constructor(name) {
@@ -237,8 +238,8 @@ function requireScope () {
 		(function (UsedValueState) {
 		    UsedValueState[UsedValueState["Started"] = 0] = "Started";
 		    UsedValueState[UsedValueState["Completed"] = 1] = "Completed";
-		})(UsedValueState || (exports.UsedValueState = UsedValueState = {}));
-		exports.varKinds = {
+		})(UsedValueState || (exports$1.UsedValueState = UsedValueState = {}));
+		exports$1.varKinds = {
 		    const: new code_1.Name("const"),
 		    let: new code_1.Name("let"),
 		    var: new code_1.Name("var"),
@@ -267,7 +268,7 @@ function requireScope () {
 		        return (this._names[prefix] = { prefix, index: 0 });
 		    }
 		}
-		exports.Scope = Scope;
+		exports$1.Scope = Scope;
 		class ValueScopeName extends code_1.Name {
 		    constructor(prefix, nameStr) {
 		        super(nameStr);
@@ -278,7 +279,7 @@ function requireScope () {
 		        this.scopePath = (0, code_1._) `.${new code_1.Name(property)}[${itemIndex}]`;
 		    }
 		}
-		exports.ValueScopeName = ValueScopeName;
+		exports$1.ValueScopeName = ValueScopeName;
 		const line = (0, code_1._) `\n`;
 		class ValueScope extends Scope {
 		    constructor(opts) {
@@ -349,7 +350,7 @@ function requireScope () {
 		                nameSet.set(name, UsedValueState.Started);
 		                let c = valueCode(name);
 		                if (c) {
-		                    const def = this.opts.es5 ? exports.varKinds.var : exports.varKinds.const;
+		                    const def = this.opts.es5 ? exports$1.varKinds.var : exports$1.varKinds.const;
 		                    code = (0, code_1._) `${code}${def} ${name} = ${c};${this.opts._n}`;
 		                }
 		                else if ((c = getCode === null || getCode === void 0 ? void 0 : getCode(name))) {
@@ -364,7 +365,7 @@ function requireScope () {
 		        return code;
 		    }
 		}
-		exports.ValueScope = ValueScope;
+		exports$1.ValueScope = ValueScope;
 		
 	} (scope));
 	return scope;
@@ -375,26 +376,26 @@ var hasRequiredCodegen;
 function requireCodegen () {
 	if (hasRequiredCodegen) return codegen;
 	hasRequiredCodegen = 1;
-	(function (exports) {
-		Object.defineProperty(exports, "__esModule", { value: true });
-		exports.or = exports.and = exports.not = exports.CodeGen = exports.operators = exports.varKinds = exports.ValueScopeName = exports.ValueScope = exports.Scope = exports.Name = exports.regexpCode = exports.stringify = exports.getProperty = exports.nil = exports.strConcat = exports.str = exports._ = void 0;
+	(function (exports$1) {
+		Object.defineProperty(exports$1, "__esModule", { value: true });
+		exports$1.or = exports$1.and = exports$1.not = exports$1.CodeGen = exports$1.operators = exports$1.varKinds = exports$1.ValueScopeName = exports$1.ValueScope = exports$1.Scope = exports$1.Name = exports$1.regexpCode = exports$1.stringify = exports$1.getProperty = exports$1.nil = exports$1.strConcat = exports$1.str = exports$1._ = void 0;
 		const code_1 = requireCode$1();
 		const scope_1 = requireScope();
 		var code_2 = requireCode$1();
-		Object.defineProperty(exports, "_", { enumerable: true, get: function () { return code_2._; } });
-		Object.defineProperty(exports, "str", { enumerable: true, get: function () { return code_2.str; } });
-		Object.defineProperty(exports, "strConcat", { enumerable: true, get: function () { return code_2.strConcat; } });
-		Object.defineProperty(exports, "nil", { enumerable: true, get: function () { return code_2.nil; } });
-		Object.defineProperty(exports, "getProperty", { enumerable: true, get: function () { return code_2.getProperty; } });
-		Object.defineProperty(exports, "stringify", { enumerable: true, get: function () { return code_2.stringify; } });
-		Object.defineProperty(exports, "regexpCode", { enumerable: true, get: function () { return code_2.regexpCode; } });
-		Object.defineProperty(exports, "Name", { enumerable: true, get: function () { return code_2.Name; } });
+		Object.defineProperty(exports$1, "_", { enumerable: true, get: function () { return code_2._; } });
+		Object.defineProperty(exports$1, "str", { enumerable: true, get: function () { return code_2.str; } });
+		Object.defineProperty(exports$1, "strConcat", { enumerable: true, get: function () { return code_2.strConcat; } });
+		Object.defineProperty(exports$1, "nil", { enumerable: true, get: function () { return code_2.nil; } });
+		Object.defineProperty(exports$1, "getProperty", { enumerable: true, get: function () { return code_2.getProperty; } });
+		Object.defineProperty(exports$1, "stringify", { enumerable: true, get: function () { return code_2.stringify; } });
+		Object.defineProperty(exports$1, "regexpCode", { enumerable: true, get: function () { return code_2.regexpCode; } });
+		Object.defineProperty(exports$1, "Name", { enumerable: true, get: function () { return code_2.Name; } });
 		var scope_2 = requireScope();
-		Object.defineProperty(exports, "Scope", { enumerable: true, get: function () { return scope_2.Scope; } });
-		Object.defineProperty(exports, "ValueScope", { enumerable: true, get: function () { return scope_2.ValueScope; } });
-		Object.defineProperty(exports, "ValueScopeName", { enumerable: true, get: function () { return scope_2.ValueScopeName; } });
-		Object.defineProperty(exports, "varKinds", { enumerable: true, get: function () { return scope_2.varKinds; } });
-		exports.operators = {
+		Object.defineProperty(exports$1, "Scope", { enumerable: true, get: function () { return scope_2.Scope; } });
+		Object.defineProperty(exports$1, "ValueScope", { enumerable: true, get: function () { return scope_2.ValueScope; } });
+		Object.defineProperty(exports$1, "ValueScopeName", { enumerable: true, get: function () { return scope_2.ValueScopeName; } });
+		Object.defineProperty(exports$1, "varKinds", { enumerable: true, get: function () { return scope_2.varKinds; } });
+		exports$1.operators = {
 		    GT: new code_1._Code(">"),
 		    GTE: new code_1._Code(">="),
 		    LT: new code_1._Code("<"),
@@ -808,7 +809,7 @@ function requireCodegen () {
 		    }
 		    // `+=` code
 		    add(lhs, rhs) {
-		        return this._leafNode(new AssignOp(lhs, exports.operators.ADD, rhs));
+		        return this._leafNode(new AssignOp(lhs, exports$1.operators.ADD, rhs));
 		    }
 		    // appends passed SafeExpr to code or executes Block
 		    code(c) {
@@ -1010,7 +1011,7 @@ function requireCodegen () {
 		        ns[ns.length - 1] = node;
 		    }
 		}
-		exports.CodeGen = CodeGen;
+		exports$1.CodeGen = CodeGen;
 		function addNames(names, from) {
 		    for (const n in from)
 		        names[n] = (names[n] || 0) + (from[n] || 0);
@@ -1052,19 +1053,19 @@ function requireCodegen () {
 		function not(x) {
 		    return typeof x == "boolean" || typeof x == "number" || x === null ? !x : (0, code_1._) `!${par(x)}`;
 		}
-		exports.not = not;
-		const andCode = mappend(exports.operators.AND);
+		exports$1.not = not;
+		const andCode = mappend(exports$1.operators.AND);
 		// boolean AND (&&) expression with the passed arguments
 		function and(...args) {
 		    return args.reduce(andCode);
 		}
-		exports.and = and;
-		const orCode = mappend(exports.operators.OR);
+		exports$1.and = and;
+		const orCode = mappend(exports$1.operators.OR);
 		// boolean OR (||) expression with the passed arguments
 		function or(...args) {
 		    return args.reduce(orCode);
 		}
-		exports.or = or;
+		exports$1.or = or;
 		function mappend(op) {
 		    return (x, y) => (x === code_1.nil ? y : y === code_1.nil ? x : (0, code_1._) `${par(x)} ${op} ${par(y)}`);
 		}
@@ -1311,21 +1312,21 @@ var hasRequiredErrors;
 function requireErrors () {
 	if (hasRequiredErrors) return errors;
 	hasRequiredErrors = 1;
-	(function (exports) {
-		Object.defineProperty(exports, "__esModule", { value: true });
-		exports.extendErrors = exports.resetErrorsCount = exports.reportExtraError = exports.reportError = exports.keyword$DataError = exports.keywordError = void 0;
+	(function (exports$1) {
+		Object.defineProperty(exports$1, "__esModule", { value: true });
+		exports$1.extendErrors = exports$1.resetErrorsCount = exports$1.reportExtraError = exports$1.reportError = exports$1.keyword$DataError = exports$1.keywordError = void 0;
 		const codegen_1 = requireCodegen();
 		const util_1 = requireUtil();
 		const names_1 = requireNames();
-		exports.keywordError = {
+		exports$1.keywordError = {
 		    message: ({ keyword }) => (0, codegen_1.str) `must pass "${keyword}" keyword validation`,
 		};
-		exports.keyword$DataError = {
+		exports$1.keyword$DataError = {
 		    message: ({ keyword, schemaType }) => schemaType
 		        ? (0, codegen_1.str) `"${keyword}" keyword must be ${schemaType} ($data)`
 		        : (0, codegen_1.str) `"${keyword}" keyword is invalid ($data)`,
 		};
-		function reportError(cxt, error = exports.keywordError, errorPaths, overrideAllErrors) {
+		function reportError(cxt, error = exports$1.keywordError, errorPaths, overrideAllErrors) {
 		    const { it } = cxt;
 		    const { gen, compositeRule, allErrors } = it;
 		    const errObj = errorObjectCode(cxt, error, errorPaths);
@@ -1336,8 +1337,8 @@ function requireErrors () {
 		        returnErrors(it, (0, codegen_1._) `[${errObj}]`);
 		    }
 		}
-		exports.reportError = reportError;
-		function reportExtraError(cxt, error = exports.keywordError, errorPaths) {
+		exports$1.reportError = reportError;
+		function reportExtraError(cxt, error = exports$1.keywordError, errorPaths) {
 		    const { it } = cxt;
 		    const { gen, compositeRule, allErrors } = it;
 		    const errObj = errorObjectCode(cxt, error, errorPaths);
@@ -1346,12 +1347,12 @@ function requireErrors () {
 		        returnErrors(it, names_1.default.vErrors);
 		    }
 		}
-		exports.reportExtraError = reportExtraError;
+		exports$1.reportExtraError = reportExtraError;
 		function resetErrorsCount(gen, errsCount) {
 		    gen.assign(names_1.default.errors, errsCount);
 		    gen.if((0, codegen_1._) `${names_1.default.vErrors} !== null`, () => gen.if(errsCount, () => gen.assign((0, codegen_1._) `${names_1.default.vErrors}.length`, errsCount), () => gen.assign(names_1.default.vErrors, null)));
 		}
-		exports.resetErrorsCount = resetErrorsCount;
+		exports$1.resetErrorsCount = resetErrorsCount;
 		function extendErrors({ gen, keyword, schemaValue, data, errsCount, it, }) {
 		    /* istanbul ignore if */
 		    if (errsCount === undefined)
@@ -1367,7 +1368,7 @@ function requireErrors () {
 		        }
 		    });
 		}
-		exports.extendErrors = extendErrors;
+		exports$1.extendErrors = extendErrors;
 		function addError(gen, errObj) {
 		    const err = gen.const("err", errObj);
 		    gen.if((0, codegen_1._) `${names_1.default.vErrors} === null`, () => gen.assign(names_1.default.vErrors, (0, codegen_1._) `[${err}]`), (0, codegen_1._) `${names_1.default.vErrors}.push(${err})`);
@@ -3028,8 +3029,8 @@ var hasRequiredDist;
 function requireDist () {
 	if (hasRequiredDist) return dist.exports;
 	hasRequiredDist = 1;
-	(function (module, exports) {
-		Object.defineProperty(exports, "__esModule", { value: true });
+	(function (module, exports$1) {
+		Object.defineProperty(exports$1, "__esModule", { value: true });
 		const ajv_1 = require$$0;
 		const codegen_1 = requireCodegen();
 		const code_1 = requireCode$1();
@@ -3299,7 +3300,7 @@ function requireDist () {
 		    }
 		    return ajv.addKeyword(errorMessage(options));
 		};
-		exports.default = ajvErrors;
+		exports$1.default = ajvErrors;
 		module.exports = ajvErrors;
 		module.exports.default = ajvErrors;
 		
@@ -3516,9 +3517,13 @@ const setAnswers = ({ answers }) => ({
 const clearAll = () => ({
   type: AnswersActions.CLEAR_ALL
 });
-const appendNewAnswer = ({ id, query }) => ({
+const appendNewAnswer = ({
+  id,
+  query,
+  attachments
+}) => ({
   type: AnswersActions.APPEND_NEW_ANSWER,
-  payload: { id, query }
+  payload: { id, query, attachments }
 });
 const setSearchResults = ({
   searchQueryId,
@@ -3653,7 +3658,8 @@ const reducer = (draft, action) => {
         state: "fetching-search-results",
         question: action.payload.query,
         blocks: [markdownTextBlock()],
-        isUncertain: false
+        isUncertain: false,
+        attachments: action.payload.attachments
       });
       return;
     }
@@ -3792,7 +3798,7 @@ const useAnswerList = () => {
 };
 
 const CONVERSATION_PARAM = "conversation";
-const useConversationId = (searchPath) => {
+const useConversationId = (searchPath, widgetKey) => {
   const conversationId = useSearchParam(CONVERSATION_PARAM);
   const [_conversationId, _setConversationId] = useState(conversationId ?? void 0);
   const setConversationId = useCallback(
@@ -3809,8 +3815,11 @@ const useConversationId = (searchPath) => {
       const newUrl = url.toString();
       window.history.replaceState({ ...window.history.state, newUrl, url: newUrl }, "", newUrl);
       _setConversationId(id);
+      if (typeof window !== "undefined" && window.parent !== window) {
+        window.parent.postMessage({ type: "CONVERSATION_CHANGED", conversationId: id, widgetKey }, "*");
+      }
     },
-    [searchPath]
+    [searchPath, widgetKey]
   );
   const clearConversationId = useCallback(() => {
     const url = new URL(window.location.href);
@@ -3818,12 +3827,15 @@ const useConversationId = (searchPath) => {
     const newUrl = url.toString();
     window.history.replaceState({ ...window.history.state, newUrl, url: newUrl }, "", newUrl);
     _setConversationId(void 0);
-  }, []);
+    if (typeof window !== "undefined" && window.parent !== window) {
+      window.parent.postMessage({ type: "CONVERSATION_CHANGED", conversationId: "", widgetKey }, "*");
+    }
+  }, [widgetKey]);
   return { conversationId: _conversationId, setConversationId, clearConversationId };
 };
 
 const ChatSearchContext = createContext(void 0);
-const ChatSearchProvider = ({ children, searchPath, contentTypeEndpoint }) => {
+const ChatSearchProvider = ({ children, searchPath, contentTypeEndpoint, widgetKey }) => {
   const [query, setQuery] = useState("");
   const [queryId, setQueryId] = useState("");
   const [followUpQuery, setFollowUpQuery] = useState("");
@@ -3834,7 +3846,7 @@ const ChatSearchProvider = ({ children, searchPath, contentTypeEndpoint }) => {
   const [isLoadingConversation, setIsLoadingConversation] = useState(false);
   const [loadError, setLoadError] = useState("");
   const [showMobileCloseWidgetButton, setShowMobileCloseWidgetButton] = useState(false);
-  const { conversationId, setConversationId, clearConversationId } = useConversationId(searchPath);
+  const { conversationId, setConversationId, clearConversationId } = useConversationId(searchPath, widgetKey);
   const contextValue = useMemo(
     () => ({
       query,
@@ -3922,6 +3934,46 @@ function AnswerBlock({ block, redirectRules, state }) {
   }
 }
 
+const sizeConfig = {
+  xs: { container: "size-12", spinner: "size-3", close: "top-0.5 right-0.5 p-0.5", closeIcon: "size-2" },
+  sm: { container: "size-16", spinner: "size-4", close: "top-0.5 right-0.5 p-0.5", closeIcon: "size-2.5" },
+  md: { container: "size-20", spinner: "size-5", close: "top-1 right-1 p-1", closeIcon: "size-3" }
+};
+function AttachmentThumbnails({ items, size = "sm", onRemove, className }) {
+  if (items.length === 0) return null;
+  const config = sizeConfig[size];
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex gap-2 overflow-x-auto", className) }, items.map((item) => /* @__PURE__ */ React__default.createElement("div", { key: item.id, className: cn("relative group rounded-lg overflow-hidden flex-shrink-0", config.container) }, /* @__PURE__ */ React__default.createElement(
+    "a",
+    {
+      href: item.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn(!item.url && "pointer-events-none")
+    },
+    /* @__PURE__ */ React__default.createElement("img", { src: item.src, alt: item.alt || "Attachment", className: "w-full h-full object-cover" })
+  ), item.status === "uploading" && /* @__PURE__ */ React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40" }, /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cn(
+        "animate-spin rounded-full border-[2.5px] border-black/30 border-t-white",
+        config.spinner
+      )
+    }
+  )), onRemove && /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      onClick: () => onRemove(item.id),
+      className: cn(
+        "absolute rounded-full opacity-0",
+        "group-hover:opacity-100 transition-opacity duration-200",
+        "hover:bg-black/70 bg-black/50",
+        config.close
+      )
+    },
+    /* @__PURE__ */ React__default.createElement(X, { className: cn("text-white", config.closeIcon), "aria-label": "Remove attachment" })
+  ))));
+}
+
 var ActionType = /* @__PURE__ */ ((ActionType2) => {
   ActionType2["CallPhone"] = "call_phone";
   ActionType2["OpenUrl"] = "open_url";
@@ -4338,6 +4390,7 @@ const useConversationLoader = ({ loadConversationEndpoint, headers, mergedTextCo
           };
         });
         answerListDispatch(setAnswers({ answers }));
+        setConversationId(conversationId2);
         setShowResults(true);
       }).catch((error) => {
         console.error("Error loading conversation:", error);
@@ -4530,6 +4583,129 @@ ${response.content}`
   };
 };
 
+const ALLOWED_CONTENT_TYPES = {
+  "image/jpeg": "image",
+  "image/png": "image",
+  "image/gif": "image",
+  "image/webp": "image"
+};
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+const MAX_FILE_COUNT = 5;
+let nextFileId = 0;
+const generateFileId = () => `file-${++nextFileId}`;
+function useFileAttachment({ presignedUrlEndpoint, headers, getConversationId, onError }) {
+  const [attachedFiles, setAttachedFiles] = useState([]);
+  const removeFile = useCallback((id) => {
+    setAttachedFiles((prev) => {
+      const file = prev.find((f) => f.id === id);
+      if (file) URL.revokeObjectURL(file.preview);
+      return prev.filter((f) => f.id !== id);
+    });
+  }, []);
+  const addFiles = useCallback(
+    (files) => {
+      if (files.length === 0) return;
+      const validFiles = files.filter((file) => {
+        if (!ALLOWED_CONTENT_TYPES[file.type]) {
+          onError?.("Image type is not supported. Please use JPEG, PNG, GIF, or WebP.");
+          return false;
+        }
+        if (file.size > MAX_FILE_SIZE) {
+          onError?.(`Image "${file.name}" exceeds the 10MB size limit.`);
+          return false;
+        }
+        return true;
+      });
+      const remaining = MAX_FILE_COUNT - attachedFiles.length;
+      if (remaining === 0) {
+        onError?.("Maximum 5 images reached.");
+        return;
+      }
+      const filesToAdd = validFiles.slice(0, remaining);
+      if (filesToAdd.length === 0) {
+        return;
+      }
+      if (filesToAdd.length < validFiles.length) {
+        onError?.("Maximum 5 images. Some images were not attached.");
+      }
+      if (!presignedUrlEndpoint) {
+        console.error("[useFileAttachment] presignedUrlEndpoint is not configured — file attachment is unavailable.");
+        onError?.("Something went wrong. Please try again later.");
+        return;
+      }
+      const newFiles = filesToAdd.map((file) => ({
+        id: generateFileId(),
+        file,
+        preview: URL.createObjectURL(file),
+        status: "uploading",
+        attachmentType: ALLOWED_CONTENT_TYPES[file.type]
+      }));
+      setAttachedFiles((prev) => [...prev, ...newFiles]);
+      const conversationId = getConversationId();
+      newFiles.forEach((newFile) => {
+        void (async () => {
+          try {
+            const { uploadUrl, publicUrl } = await requestPresignedUrl({
+              endpoint: presignedUrlEndpoint,
+              conversationId,
+              filename: newFile.file.name,
+              contentType: newFile.file.type,
+              size: newFile.file.size,
+              headers
+            });
+            await uploadFileToS3(uploadUrl, newFile.file);
+            setAttachedFiles((prev) => prev.map((f) => f.id === newFile.id ? { ...f, status: "uploaded", publicUrl } : f));
+          } catch (error) {
+            console.error("Upload failed:", error);
+            onError?.(`Failed to upload "${newFile.file.name}". Please try again.`);
+            setAttachedFiles((prev) => {
+              const file = prev.find((f) => f.id === newFile.id);
+              if (file) URL.revokeObjectURL(file.preview);
+              return prev.filter((f) => f.id !== newFile.id);
+            });
+          }
+        })();
+      });
+    },
+    [attachedFiles, presignedUrlEndpoint, headers, getConversationId, onError]
+  );
+  const clearAttachedFiles = useCallback(() => {
+    attachedFiles.forEach((f) => URL.revokeObjectURL(f.preview));
+    setAttachedFiles([]);
+  }, [attachedFiles]);
+  const getUploadedAttachments = useCallback(() => {
+    return attachedFiles.filter((f) => f.status === "uploaded" && f.publicUrl).map((f) => ({ type: f.attachmentType, url: f.publicUrl, filename: f.file.name }));
+  }, [attachedFiles]);
+  const isUploading = attachedFiles.some((f) => f.status === "uploading");
+  return {
+    attachedFiles,
+    isUploading,
+    addFiles,
+    removeFile,
+    clearAttachedFiles,
+    getUploadedAttachments
+  };
+}
+
+function useToast(duration = 3e3) {
+  const [toasts, setToasts] = useState([]);
+  const idRef = useRef(0);
+  const showToast = useCallback(
+    (message) => {
+      const id = ++idRef.current;
+      setToasts((prev) => [...prev, { id, message }]);
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, duration);
+    },
+    [duration]
+  );
+  const dismissToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return { toasts, showToast, dismissToast };
+}
+
 function Answer({
   index,
   blocks = [],
@@ -4544,6 +4720,7 @@ function Answer({
   disableFeedback = false,
   textConfig = {},
   redirectRules,
+  attachments = [],
   actions,
   handleActionClick,
   nextBestActions,
@@ -4594,7 +4771,14 @@ function Answer({
       "data-name": "SearchResults",
       "data-index": index
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "px-4 pt-4 pb-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-start justify-between gap-2 min-h-9" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React__default.createElement(GeneratingStar, { loading: !isIdle }), /* @__PURE__ */ React__default.createElement("h2", { className: "leading-normal font-semibold m-0 text-foreground self-center text-lg" }, question)), isCompleted && !showError && /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "icon", onClick: () => void handleCopy(), className: "-mt-1 flex-shrink-0" }, isCopied ? /* @__PURE__ */ React__default.createElement(Check, { className: "text-feedback-positive", weight: "bold" }) : /* @__PURE__ */ React__default.createElement(Copy, { className: "text-secondary-foreground", weight: "bold" }))), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, isCopied ? "Copied!" : "Copy")))))),
+    /* @__PURE__ */ React__default.createElement("div", { className: "px-4 pt-4 pb-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-start justify-between gap-2 min-h-9" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React__default.createElement(GeneratingStar, { loading: !isIdle }), /* @__PURE__ */ React__default.createElement("h2", { className: "leading-normal font-semibold m-0 text-foreground self-center text-lg" }, question)), isCompleted && !showError && /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "icon", onClick: () => void handleCopy(), className: "-mt-1 flex-shrink-0" }, isCopied ? /* @__PURE__ */ React__default.createElement(Check, { className: "text-feedback-positive", weight: "bold" }) : /* @__PURE__ */ React__default.createElement(Copy, { className: "text-secondary-foreground", weight: "bold" }))), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, isCopied ? "Copied!" : "Copy"))))), /* @__PURE__ */ React__default.createElement(
+      AttachmentThumbnails,
+      {
+        items: attachments.map((a, i) => ({ id: `${i}`, src: a.url, url: a.url, alt: a.filename })),
+        size: "xs",
+        className: "mt-2"
+      }
+    )),
     isFetchingInitialAnswer && /* @__PURE__ */ React__default.createElement("div", { className: "px-4 pt-0 pb-2" }, /* @__PURE__ */ React__default.createElement("p", { className: "text-sm text-muted-foreground" }, isFetchingSearchResults ? textConfig.loadingSearchText : textConfig.loadingAnswerText)),
     /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col" }, blocks?.map((block, i) => /* @__PURE__ */ React__default.createElement(
       "div",
@@ -4826,10 +5010,11 @@ const PrimarySearch = React__default.forwardRef(
     onRegionChange,
     apiKey,
     fetchRegionConfig,
-    disableImageAttachment = false,
-    attachedImages = [],
-    onImageUpload,
-    onRemoveImage,
+    enableFileAttachment = false,
+    attachedFiles = [],
+    isUploading = false,
+    onAddFiles,
+    onRemoveFile,
     isSearching = false,
     autocompleteSuggestions = [],
     onAutocompleteSuggestionSelect,
@@ -4841,6 +5026,31 @@ const PrimarySearch = React__default.forwardRef(
   }, ref) => {
     const fileInputRef = useRef(null);
     const [showSuggestions, setShowSuggestions] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const handlePaste = (e) => {
+      if (!enableFileAttachment || !onAddFiles) return;
+      const files = Array.from(e.clipboardData.files);
+      if (files.length > 0) {
+        e.preventDefault();
+        onAddFiles(files);
+      }
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (!enableFileAttachment || !onAddFiles) return;
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length > 0) {
+        onAddFiles(files);
+      }
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      if (enableFileAttachment) setIsDragOver(true);
+    };
+    const handleDragLeave = () => {
+      setIsDragOver(false);
+    };
     const showIncludePageToggle = useBooleanFlagValue("showIncludePageToggle", false);
     const regionItems = [
       {
@@ -4906,7 +5116,7 @@ const PrimarySearch = React__default.forwardRef(
       textarea.style.height = `${textarea.scrollHeight}px`;
     };
     const handleKeyPress = (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
+      if (e.key === "Enter" && !e.shiftKey && !isUploading) {
         e.preventDefault();
         onSearch();
       }
@@ -4976,10 +5186,32 @@ const PrimarySearch = React__default.forwardRef(
       "div",
       {
         className: cn(
-          "w-full overflow-hidden bg-background border border-border transition-all",
-          shouldShowSuggestions ? "rounded-t-md" : "rounded-md"
-        )
+          "relative w-full overflow-hidden bg-background border border-border transition-all",
+          shouldShowSuggestions ? "rounded-t-md" : "rounded-md",
+          isDragOver && enableFileAttachment && "ring-2 ring-primary"
+        ),
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onPaste: handlePaste
       },
+      isDragOver && enableFileAttachment && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "absolute inset-0 z-10 flex items-center justify-center rounded-md",
+          style: { backgroundColor: "color-mix(in srgb, var(--bfc-card) 90%, transparent)" }
+        },
+        /* @__PURE__ */ React__default.createElement("p", { className: "text-sm font-medium text-muted-foreground" }, "Drop images here to attach")
+      ),
+      enableFileAttachment && /* @__PURE__ */ React__default.createElement(
+        AttachmentThumbnails,
+        {
+          items: attachedFiles.map((f) => ({ id: f.id, src: f.preview, url: f.publicUrl, status: f.status })),
+          size: "md",
+          onRemove: onRemoveFile,
+          className: "pt-3 px-3 bg-card"
+        }
+      ),
       /* @__PURE__ */ React__default.createElement("div", { className: "p-3 flex items-center bg-card", "data-name": "search-input" }, /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "h-5 w-5 mr-2 text-muted-foreground", "aria-hidden": true, role: "presentation" }), /* @__PURE__ */ React__default.createElement(
         "textarea",
         {
@@ -5000,19 +5232,33 @@ const PrimarySearch = React__default.forwardRef(
           rows: 1
         }
       ), isSearching && /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-center ml-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-4 border-2 border-t-transparent border-primary" }))),
-      !disableImageAttachment && attachedImages.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-2 mt-3 overflow-x-auto pb-1 px-3" }, attachedImages.map((image, index) => /* @__PURE__ */ React__default.createElement("div", { key: index, className: "relative group rounded-lg overflow-hidden flex-shrink-0 size-20" }, /* @__PURE__ */ React__default.createElement("img", { src: image.preview, alt: `Attached ${index + 1}`, className: "w-full h-full object-cover" }), /* @__PURE__ */ React__default.createElement(
-        "button",
+      !shouldShowSuggestions && /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, enableFileAttachment && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+        "input",
         {
-          onClick: () => onRemoveImage?.(index),
-          className: cn(
-            "absolute top-1 right-1 rounded-full p-1 opacity-0",
-            "group-hover:opacity-100 transition-opacity duration-200",
-            "hover:bg-black/70 bg-black/50"
-          )
+          type: "file",
+          ref: fileInputRef,
+          accept: "image/jpeg,image/png,image/gif,image/webp",
+          multiple: true,
+          className: "hidden",
+          onChange: (e) => {
+            if (e.target.files) {
+              onAddFiles?.(Array.from(e.target.files));
+            }
+            e.target.value = "";
+          }
+        }
+      ), /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "rounded-md size-8 hover:bg-opacity-80 disabled:opacity-50",
+          onClick: () => fileInputRef.current?.click(),
+          disabled: attachedFiles.length >= 5,
+          "aria-label": textConfig.attachImageText
         },
-        /* @__PURE__ */ React__default.createElement(X, { className: "size-3 text-white", "aria-label": "Remove image" })
-      )))),
-      !shouldShowSuggestions && /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-1", "data-name": "collections-dropdown" }, allowedRegions.length > 0 && collections.length > 0 ? (
+        /* @__PURE__ */ React__default.createElement(Image, { weight: "regular", className: "size-4 text-secondary-foreground" })
+      )), /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-1", "data-name": "collections-dropdown" }, allowedRegions.length > 0 && collections.length > 0 ? (
         // Two-level selection: Region -> Collection
         /* @__PURE__ */ React__default.createElement(
           TwoLevelCombobox,
@@ -5053,33 +5299,12 @@ const PrimarySearch = React__default.forwardRef(
           disabled: includePageDisabled,
           onToggle: onIncludePageToggle
         }
-      ), !disableImageAttachment && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-        "input",
-        {
-          type: "file",
-          ref: fileInputRef,
-          accept: "image/*",
-          multiple: true,
-          className: "hidden",
-          onChange: onImageUpload
-        }
-      ), /* @__PURE__ */ React__default.createElement(
+      )), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center", "data-name": "search-button" }, /* @__PURE__ */ React__default.createElement(
         Button,
         {
-          variant: "ghost",
           size: "sm",
-          className: "rounded-md h-8 hover:bg-opacity-80",
-          onClick: () => fileInputRef.current?.click(),
-          "aria-label": textConfig.attachImageText
-        },
-        /* @__PURE__ */ React__default.createElement(Image, { className: "size-4 text-secondary-foreground" }),
-        /* @__PURE__ */ React__default.createElement("span", { className: "hidden @sm:block" }, textConfig.attachImageText)
-      ))), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center", "data-name": "search-button" }, /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          size: "sm",
-          disabled: !query || isSearching,
-          "aria-disabled": !query || isSearching,
+          disabled: !query || isSearching || isUploading,
+          "aria-disabled": !query || isSearching || isUploading,
           className: "rounded-md size-8 disabled:opacity-50 bg-primary",
           onClick: onSearch
         },
@@ -5180,9 +5405,22 @@ const styles = {
 };
 
 const FollowUpSearchBar = React__default.forwardRef(
-  ({ initialQuery = "", onQueryChange, isSearching, handleFollowUpSearch, textConfig }, ref) => {
+  ({
+    initialQuery = "",
+    onQueryChange,
+    isSearching,
+    handleFollowUpSearch,
+    textConfig,
+    enableFileAttachment = false,
+    attachedFiles = [],
+    isUploading = false,
+    onAddFiles,
+    onRemoveFile
+  }, ref) => {
     const [localQuery, setLocalQuery] = useState(initialQuery);
+    const [isDragOver, setIsDragOver] = useState(false);
     const followUpInputRef = useRef(null);
+    const fileInputRef = useRef(null);
     const setCombinedRef = (instance) => {
       followUpInputRef.current = instance;
       if (typeof ref === "function") {
@@ -5200,8 +5438,9 @@ const FollowUpSearchBar = React__default.forwardRef(
     useEffect(() => {
       setLocalQuery(initialQuery);
     }, [initialQuery]);
+    const isSendDisabled = isSearching || !localQuery.trim() || isUploading;
     const handleKeyPress = (e) => {
-      if (e.key === "Enter" && !e.shiftKey && !isSearching) {
+      if (e.key === "Enter" && !e.shiftKey && !isSendDisabled) {
         e.preventDefault();
         const currentQuery = localQuery;
         onQueryChange(currentQuery);
@@ -5223,6 +5462,30 @@ const FollowUpSearchBar = React__default.forwardRef(
       handleFollowUpSearch(currentQuery);
       setLocalQuery("");
     };
+    const handlePaste = (e) => {
+      if (!enableFileAttachment || !onAddFiles) return;
+      const files = Array.from(e.clipboardData.files);
+      if (files.length > 0) {
+        e.preventDefault();
+        onAddFiles(files);
+      }
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (!enableFileAttachment || !onAddFiles) return;
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length > 0) {
+        onAddFiles(files);
+      }
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      if (enableFileAttachment) setIsDragOver(true);
+    };
+    const handleDragLeave = () => {
+      setIsDragOver(false);
+    };
     return /* @__PURE__ */ React__default.createElement(
       motion.footer,
       {
@@ -5231,32 +5494,88 @@ const FollowUpSearchBar = React__default.forwardRef(
         transition: { duration: 0.5 },
         className: styles.followUpSearchBar
       },
-      /* @__PURE__ */ React__default.createElement("div", { className: "container flex items-center justify-center p-3" }, /* @__PURE__ */ React__default.createElement("div", { className: "relative flex w-full items-center gap-2 rounded bg-card px-2 border border-dark-400" }, /* @__PURE__ */ React__default.createElement("div", { className: "size-6 flex flex-shrink-0 justify-center items-center" }, /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "size-5 text-secondary-foreground" })), /* @__PURE__ */ React__default.createElement(
-        Textarea,
-        {
-          ref: setCombinedRef,
-          value: localQuery,
-          onChange: handleChange,
-          onBlur: handleBlur,
-          onKeyDown: handleKeyPress,
-          placeholder: textConfig.followUpPlaceholder,
-          className: "min-h-[44px] w-full resize-none border-0 shadow-none bg-transparent px-0 py-2.5 focus:outline-none focus:ring-0 focus-visible:ring-0",
-          rows: 1
-        }
-      ), /* @__PURE__ */ React__default.createElement(
-        Button,
+      /* @__PURE__ */ React__default.createElement("div", { className: "container flex items-center justify-center p-3" }, /* @__PURE__ */ React__default.createElement(
+        "div",
         {
-          type: "button",
-          size: "icon",
-          disabled: isSearching || !localQuery.trim(),
-          onClick: handleSearchClick,
           className: cn(
-            "size-8 shrink-0 rounded",
-            localQuery ? "bg-primary text-primary-foreground" : "bg-dark-400 text-white"
-          )
+            "relative flex w-full flex-col rounded bg-card border border-dark-400",
+            isDragOver && enableFileAttachment && "ring-2 ring-primary"
+          ),
+          onDrop: handleDrop,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onPaste: handlePaste
         },
-        isSearching ? /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-4 sm:size-5 border-2 border-dark/40 !border-t-foreground" }) : /* @__PURE__ */ React__default.createElement(ArrowRight, { className: "size-6" })
-      )))
+        isDragOver && enableFileAttachment && /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: "absolute inset-0 z-10 flex items-center justify-center rounded",
+            style: { backgroundColor: "color-mix(in srgb, var(--bfc-card) 90%, transparent)" }
+          },
+          /* @__PURE__ */ React__default.createElement("p", { className: "text-sm font-medium text-muted-foreground" }, "Drop images here to attach")
+        ),
+        enableFileAttachment && /* @__PURE__ */ React__default.createElement(
+          AttachmentThumbnails,
+          {
+            items: attachedFiles.map((f) => ({ id: f.id, src: f.preview, url: f.publicUrl, status: f.status })),
+            size: "sm",
+            onRemove: onRemoveFile,
+            className: "pt-2 px-2"
+          }
+        ),
+        /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2 px-2" }, enableFileAttachment && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+          "input",
+          {
+            type: "file",
+            ref: fileInputRef,
+            accept: "image/jpeg,image/png,image/gif,image/webp",
+            multiple: true,
+            className: "hidden",
+            onChange: (e) => {
+              if (e.target.files) {
+                onAddFiles?.(Array.from(e.target.files));
+              }
+              e.target.value = "";
+            }
+          }
+        ), /* @__PURE__ */ React__default.createElement(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "rounded-md size-7 hover:bg-opacity-80 disabled:opacity-50 shrink-0",
+            onClick: () => fileInputRef.current?.click(),
+            disabled: attachedFiles.length >= 5,
+            "aria-label": textConfig.attachImageText
+          },
+          /* @__PURE__ */ React__default.createElement(Image, { weight: "regular", className: "size-4 text-secondary-foreground" })
+        )), !enableFileAttachment && /* @__PURE__ */ React__default.createElement("div", { className: "size-6 flex flex-shrink-0 justify-center items-center" }, /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "size-5 text-secondary-foreground" })), /* @__PURE__ */ React__default.createElement(
+          Textarea,
+          {
+            ref: setCombinedRef,
+            value: localQuery,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyPress,
+            placeholder: textConfig.followUpPlaceholder,
+            className: "min-h-[44px] w-full resize-none border-0 shadow-none bg-transparent px-0 py-2.5 focus:outline-none focus:ring-0 focus-visible:ring-0",
+            rows: 1
+          }
+        ), /* @__PURE__ */ React__default.createElement(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            disabled: isSendDisabled,
+            onClick: handleSearchClick,
+            className: cn(
+              "size-8 shrink-0 rounded",
+              localQuery ? "bg-primary text-primary-foreground" : "bg-dark-400 text-white"
+            )
+          },
+          isSearching ? /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-4 sm:size-5 border-2 border-dark/40 !border-t-foreground" }) : /* @__PURE__ */ React__default.createElement(ArrowRight, { className: "size-6" })
+        ))
+      ))
     );
   }
 );
@@ -5377,6 +5696,30 @@ const buildConversationContext = (answers, conversationId) => ({
   }))
 });
 
+function ToastContainer({ toasts, onDismiss }) {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "fixed top-4 left-4 right-4 z-50 flex flex-col gap-2 pointer-events-none" }, /* @__PURE__ */ React__default.createElement(AnimatePresence, null, toasts.map((toast) => /* @__PURE__ */ React__default.createElement(
+    motion.div,
+    {
+      key: toast.id,
+      initial: { opacity: 0, y: -8 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -8 },
+      transition: { duration: 0.2 },
+      className: "pointer-events-auto flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground shadow-lg"
+    },
+    /* @__PURE__ */ React__default.createElement("span", { className: "flex-1" }, toast.message),
+    /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        onClick: () => onDismiss(toast.id),
+        className: "shrink-0 rounded-full p-0.5 hover:bg-muted transition-colors",
+        "aria-label": "Dismiss"
+      },
+      /* @__PURE__ */ React__default.createElement(X$1, { className: "size-3.5" })
+    )
+  ))));
+}
+
 const clientExecutionEventType = "CLIENT_EXECUTION";
 const clientExecutionResultEventType = "CLIENT_EXECUTION_RESULT";
 const executeClientAction = (key, inputs) => {
@@ -5460,12 +5803,13 @@ const ChatSearchComponent = forwardRef(
     fetchRegionConfig,
     searchEndpoint,
     answerStreamEndpoint,
+    presignedUrlEndpoint,
     feedbackEndpoint,
     feedbackReasonEndpoint,
     loadConversationEndpoint,
     autocompleteEndpoint,
     disableFollowUpQuestions = false,
-    disableImageAttachment = false,
+    enableFileAttachment: enableFileAttachmentProp = false,
     disableFeedback = false,
     disclaimer,
     offset = 0,
@@ -5509,14 +5853,29 @@ const ChatSearchComponent = forwardRef(
       setShowMobileCloseWidgetButton
     } = useChatSearch();
     const mergedTextConfig = { ...defaultTextConfig, ...textConfig };
-    const [attachedImages, setAttachedImages] = useState([]);
+    const enableFileAttachmentFlag = useBooleanFlagValue("enableFileAttachment", false);
+    const enableFileAttachment = enableFileAttachmentProp || enableFileAttachmentFlag;
+    const { toasts, showToast, dismissToast } = useToast();
+    const getOrCreateConversationId = useCallback(() => {
+      let conversationId = currentConversationId;
+      if (!conversationId) {
+        conversationId = createConversationId();
+        setCurrentConversationId(conversationId);
+      }
+      return conversationId;
+    }, [currentConversationId, setCurrentConversationId]);
+    const { attachedFiles, isUploading, addFiles, removeFile, clearAttachedFiles, getUploadedAttachments } = useFileAttachment({
+      presignedUrlEndpoint,
+      headers,
+      getConversationId: getOrCreateConversationId,
+      onError: showToast
+    });
     const [currentCollectionId, setCurrentCollectionId] = useState(selectedCollectionId);
     const [currentRegion, setCurrentRegion] = useState(selectedRegion);
     const [showFollowUp, setShowFollowUp] = useState(true);
     const primaryTextareaRef = useRef(null);
     const answerRefs = useRef([]);
     const containerRef = useRef(null);
-    const fileInputRef = useRef(null);
     const primarySearchRef = useRef(null);
     const followUpSearchRef = useRef(null);
     const bottomRef = useRef(null);
@@ -5664,7 +6023,8 @@ const ChatSearchComponent = forwardRef(
     const generateAnswerForQuery = async ({
       searchQueryId,
       conversationId,
-      context
+      context,
+      attachments
     }) => {
       try {
         const followUpQuestions = loadFollowUpQuestions(searchQueryId);
@@ -5676,7 +6036,8 @@ const ChatSearchComponent = forwardRef(
             conversationId,
             searchQueryId,
             profileId: userData?.userId,
-            ...context && { context }
+            ...context && { context },
+            ...attachments?.length && { attachments }
           }
         });
         const reader = response.body?.getReader();
@@ -5825,13 +6186,16 @@ const ChatSearchComponent = forwardRef(
       if (!searchQuery) return;
       const conversationId = currentConversationId || createConversationId();
       setCurrentConversationId(conversationId);
+      const fileAttachments = getUploadedAttachments();
+      clearAttachedFiles();
       setIsSearching(true);
       setShowResults(true);
       setActiveAnswerIndex(answers.length);
       scrollToLastAnswer();
       answerListDispatch(
         appendNewAnswer({
-          query: searchQuery
+          query: searchQuery,
+          attachments: fileAttachments
         })
       );
       await Promise.resolve();
@@ -5856,7 +6220,8 @@ const ChatSearchComponent = forwardRef(
           await generateAnswerForQuery({
             searchQueryId,
             conversationId,
-            context: pageContext
+            context: pageContext,
+            attachments: fileAttachments.length > 0 ? fileAttachments : void 0
           });
         } else {
           answerListDispatch(noArticlesFound());
@@ -5889,7 +6254,7 @@ const ChatSearchComponent = forwardRef(
       setShowResults(false);
       answerListDispatch(clearAll());
       setActiveAnswerIndex(0);
-      setAttachedImages([]);
+      clearAttachedFiles();
       clearCurrentConversationId();
       trackEvent?.("New Thread Created", { oldConversationId: currentConversationId });
       if (primaryTextareaRef.current) {
@@ -5909,7 +6274,8 @@ const ChatSearchComponent = forwardRef(
       focusSearchField: () => primarySearchRef.current?.focus() || followUpSearchRef.current?.focus(),
       showCloseButton: (showButton = true) => {
         setShowMobileCloseWidgetButton(showButton);
-      }
+      },
+      loadConversation: loadConversationById
     }));
     useEffect(() => {
       setCurrentCollectionId(selectedCollectionId);
@@ -5988,30 +6354,6 @@ const ChatSearchComponent = forwardRef(
     const handleAutocompleteSuggestionClick = (suggestion) => {
       void performSearch({ searchQuery: suggestion.question, event: { name: "Autocomplete Suggestion Clicked" } });
     };
-    useEffect(() => {
-      return () => {
-        attachedImages.forEach((image) => URL.revokeObjectURL(image.preview));
-      };
-    }, [attachedImages]);
-    const handleImageUpload = (event) => {
-      const files = event.target.files;
-      if (files) {
-        const newImages = Array.from(files).map((file) => ({
-          file,
-          preview: URL.createObjectURL(file)
-        }));
-        setAttachedImages((prev) => [...prev, ...newImages]);
-      }
-      if (fileInputRef.current) {
-        fileInputRef.current.value = "";
-      }
-    };
-    const removeImage = (index) => {
-      setAttachedImages((prev) => {
-        URL.revokeObjectURL(prev[index].preview);
-        return prev.filter((_, i) => i !== index);
-      });
-    };
     const handleCollectionChange = (collectionId) => {
       setCurrentCollectionId(collectionId);
       onCollectionChange?.(collectionId);
@@ -6031,7 +6373,7 @@ const ChatSearchComponent = forwardRef(
           setShowResults(false);
           answerListDispatch(clearAll());
           setActiveAnswerIndex(0);
-          setAttachedImages([]);
+          clearAttachedFiles();
           if (primaryTextareaRef.current) {
             primaryTextareaRef.current.style.height = "auto";
           }
@@ -6118,6 +6460,7 @@ const ChatSearchComponent = forwardRef(
         "data-name": "ChatSearch",
         style
       },
+      /* @__PURE__ */ React__default.createElement(ToastContainer, { toasts, onDismiss: dismissToast }),
       (isWidgetMode || !showResults) && /* @__PURE__ */ React__default.createElement(
         Header,
         {
@@ -6185,10 +6528,11 @@ const ChatSearchComponent = forwardRef(
                   onRegionChange: handleRegionChange,
                   apiKey,
                   fetchRegionConfig,
-                  disableImageAttachment,
-                  attachedImages,
-                  onImageUpload: handleImageUpload,
-                  onRemoveImage: removeImage,
+                  enableFileAttachment,
+                  attachedFiles,
+                  isUploading,
+                  onAddFiles: addFiles,
+                  onRemoveFile: removeFile,
                   isSearching,
                   autocompleteSuggestions,
                   onAutocompleteSuggestionSelect: handleAutocompleteSuggestionClick,
@@ -6247,6 +6591,7 @@ const ChatSearchComponent = forwardRef(
                 index: i,
                 blocks: answer.blocks,
                 question: answer.question,
+                attachments: answer.attachments,
                 state: answer.state,
                 searchResults: answer.searchResults,
                 searchQueryId: answer.searchQueryId,
@@ -6317,15 +6662,28 @@ const ChatSearchComponent = forwardRef(
           onQueryChange: setFollowUpQuery,
           isSearching,
           handleFollowUpSearch,
-          textConfig: mergedTextConfig
+          textConfig: mergedTextConfig,
+          enableFileAttachment,
+          attachedFiles,
+          isUploading,
+          onAddFiles: addFiles,
+          onRemoveFile: removeFile
         }
       )
     );
   }
 );
 ChatSearchComponent.displayName = "ChatSearch";
-const ChatSearch = forwardRef(({ featureFlags, ...props }, ref) => /* @__PURE__ */ React__default.createElement(FeatureFlagProvider, { flags: featureFlags }, /* @__PURE__ */ React__default.createElement(ChatSearchProvider, { searchPath: props.searchPath, contentTypeEndpoint: props.contentTypeEndpoint }, /* @__PURE__ */ React__default.createElement(ChatSearchComponent, { ...props, ref }))));
+const ChatSearch = forwardRef(({ featureFlags, ...props }, ref) => /* @__PURE__ */ React__default.createElement(FeatureFlagProvider, { flags: featureFlags }, /* @__PURE__ */ React__default.createElement(
+  ChatSearchProvider,
+  {
+    searchPath: props.searchPath,
+    contentTypeEndpoint: props.contentTypeEndpoint,
+    widgetKey: props.apiKey
+  },
+  /* @__PURE__ */ React__default.createElement(ChatSearchComponent, { ...props, ref })
+)));
 ChatSearch.displayName = "ChatSearch";
 
 export { ChatSearch as C, ChatSearchProvider as a, useIsChatSearchDirty as b, useChatSearch as u };
-//# sourceMappingURL=ChatSearch.CgxpBVrd.js.map
+//# sourceMappingURL=ChatSearch.DO8oQOlu.js.map