{hoveredAssistant && (
(
- searchParams.get(SEARCH_PARAM_NAMES.SEND_ON_LOAD)
- );
const modelVersionFromSearchParams = searchParams.get(
SEARCH_PARAM_NAMES.STRUCTURED_MODEL
@@ -210,24 +212,34 @@ export function ChatPage({
toggle(false);
}
}, [user]);
- // Effect to handle sendOnLoad
- useEffect(() => {
- if (sendOnLoad) {
- const newSearchParams = new URLSearchParams(searchParams.toString());
- newSearchParams.delete(SEARCH_PARAM_NAMES.SEND_ON_LOAD);
- // Update the URL without the send-on-load parameter
- router.replace(`?${newSearchParams.toString()}`, { scroll: false });
+ const processSearchParamsAndSubmitMessage = (searchParamsString: string) => {
+ const newSearchParams = new URLSearchParams(searchParamsString);
+ const message = newSearchParams.get("user-prompt");
- // Update our local state to reflect the change
- setSendOnLoad(null);
+ filterManager.buildFiltersFromQueryString(
+ newSearchParams.toString(),
+ availableSources,
+ documentSets.map((ds) => ds.name),
+ tags
+ );
- // If there's a message, submit it
- if (message) {
- onSubmit({ messageOverride: message });
- }
+ const fileDescriptorString = newSearchParams.get(SEARCH_PARAM_NAMES.FILES);
+ const overrideFileDescriptors: FileDescriptor[] = fileDescriptorString
+ ? JSON.parse(decodeURIComponent(fileDescriptorString))
+ : [];
+
+ newSearchParams.delete(SEARCH_PARAM_NAMES.SEND_ON_LOAD);
+
+ router.replace(`?${newSearchParams.toString()}`, { scroll: false });
+
+ // If there's a message, submit it
+ if (message) {
+ console.log("SUBMITTING MESSAGE");
+ setSubmittedMessage(message);
+ onSubmit({ messageOverride: message, overrideFileDescriptors });
}
- }, [sendOnLoad, searchParams, router]);
+ };
const existingChatSessionId = existingChatIdRaw ? existingChatIdRaw : null;
@@ -312,14 +324,6 @@ export function ChatPage({
const noAssistants = liveAssistant == null || liveAssistant == undefined;
const availableSources = ccPairs.map((ccPair) => ccPair.source);
- const [finalAvailableSources, finalAvailableDocumentSets] =
- computeAvailableFilters({
- selectedPersona: availableAssistants.find(
- (assistant) => assistant.id === liveAssistant?.id
- ),
- availableSources: availableSources,
- availableDocumentSets: documentSets,
- });
// always set the model override for the chat session, when an assistant, llm provider, or user preference exists
useEffect(() => {
@@ -399,8 +403,6 @@ export function ChatPage({
setIsReady(true);
}, []);
- // this is triggered every time the user switches which chat
- // session they are using
useEffect(() => {
const priorChatSessionId = chatSessionIdRef.current;
const loadedSessionId = loadedIdSessionRef.current;
@@ -456,7 +458,6 @@ export function ChatPage({
}
return;
}
- setIsReady(true);
const shouldScrollToBottom =
visibleRange.get(existingChatSessionId) === undefined ||
visibleRange.get(existingChatSessionId)?.end == 0;
@@ -651,10 +652,10 @@ export function ChatPage({
currentMessageMap(completeMessageDetail)
);
- const [submittedMessage, setSubmittedMessage] = useState("");
+ const [submittedMessage, setSubmittedMessage] = useState(firstMessage || "");
const [chatState, setChatState] = useState>(
- new Map([[chatSessionIdRef.current, "input"]])
+ new Map([[chatSessionIdRef.current, firstMessage ? "loading" : "input"]])
);
const [regenerationState, setRegenerationState] = useState<
@@ -798,6 +799,19 @@ export function ChatPage({
}
}, [defaultAssistantId, availableAssistants, messageHistory.length]);
+ useEffect(() => {
+ if (
+ submittedMessage &&
+ currentSessionChatState === "loading" &&
+ messageHistory.length == 0
+ ) {
+ window.parent.postMessage(
+ { type: CHROME_MESSAGE.LOAD_NEW_CHAT_PAGE },
+ "*"
+ );
+ }
+ }, [submittedMessage, currentSessionChatState]);
+
const [
selectedDocuments,
toggleDocumentSelection,
@@ -997,12 +1011,32 @@ export function ChatPage({
}
}, [chatSessionIdRef.current]);
+ const loadNewPageLogic = (event: MessageEvent) => {
+ if (event.data.type === SUBMIT_MESSAGE_TYPES.PAGE_CHANGE) {
+ try {
+ const url = new URL(event.data.href);
+ processSearchParamsAndSubmitMessage(url.searchParams.toString());
+ } catch (error) {
+ console.error("Error parsing URL:", error);
+ }
+ }
+ };
+
+ // Equivalent to `loadNewPageLogic`
+ useEffect(() => {
+ if (searchParams.get(SEARCH_PARAM_NAMES.SEND_ON_LOAD)) {
+ processSearchParamsAndSubmitMessage(searchParams.toString());
+ }
+ }, [searchParams, router]);
+
useEffect(() => {
- adjustDocumentSidebarWidth(); // Adjust the width on initial render
- window.addEventListener("resize", adjustDocumentSidebarWidth); // Add resize event listener
+ adjustDocumentSidebarWidth();
+ window.addEventListener("resize", adjustDocumentSidebarWidth);
+ window.addEventListener("message", loadNewPageLogic);
return () => {
- window.removeEventListener("resize", adjustDocumentSidebarWidth); // Cleanup the event listener
+ window.removeEventListener("message", loadNewPageLogic);
+ window.removeEventListener("resize", adjustDocumentSidebarWidth);
};
}, []);
@@ -1078,6 +1112,7 @@ export function ChatPage({
alternativeAssistantOverride = null,
modelOverRide,
regenerationRequest,
+ overrideFileDescriptors,
}: {
messageIdToResend?: number;
messageOverride?: string;
@@ -1087,6 +1122,7 @@ export function ChatPage({
alternativeAssistantOverride?: Persona | null;
modelOverRide?: LlmOverride;
regenerationRequest?: RegenerationRequest | null;
+ overrideFileDescriptors?: FileDescriptor[];
} = {}) => {
let frozenSessionId = currentSessionId();
updateCanContinue(false, frozenSessionId);
@@ -1113,6 +1149,7 @@ export function ChatPage({
let currChatSessionId: string;
const isNewSession = chatSessionIdRef.current === null;
+
const searchParamBasedChatSessionName =
searchParams.get(SEARCH_PARAM_NAMES.TITLE) || null;
@@ -1228,7 +1265,7 @@ export function ChatPage({
signal: controller.signal, // Add this line
message: currMessage,
alternateAssistantId: currentAssistantId,
- fileDescriptors: currentMessageFiles,
+ fileDescriptors: overrideFileDescriptors || currentMessageFiles,
parentMessageId:
regenerationRequest?.parentMessage.messageId ||
lastSuccessfulMessageId,
@@ -1815,6 +1852,7 @@ export function ChatPage({
end: 0,
mostVisibleMessageId: null,
};
+ useSendMessageToParent();
useEffect(() => {
if (noAssistants) {
@@ -1889,6 +1927,7 @@ export function ChatPage({
handleSlackChatRedirect();
}, [searchParams, router]);
+
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.metaKey || event.ctrlKey) {
@@ -1957,6 +1996,10 @@ export function ChatPage({
});
};
}
+ if (!user) {
+ redirect("/auth/login");
+ }
+
if (noAssistants)
return (
<>
@@ -2039,7 +2082,11 @@ export function ChatPage({
{retrievalEnabled && documentSidebarToggled && settings?.isMobile && (
-
+ setDocumentSidebarToggled(false)}
+ noPadding
+ noScroll
+ >
+
{({ getRootProps }) => (
{!settings?.isMobile && (
@@ -2327,7 +2378,8 @@ export function ChatPage({
{messageHistory.length === 0 &&
!isFetchingChatMessages &&
currentSessionChatState == "input" &&
- !loadingError && (
+ !loadingError &&
+ !submittedMessage && (
+
Recent Assistants
@@ -2362,8 +2414,9 @@ export function ChatPage({
)}
)}
{
clearSelectedDocuments();
}}
@@ -2786,7 +2840,6 @@ export function ChatPage({
}
chatState={currentSessionChatState}
stopGenerating={stopGenerating}
- openModelSettings={() => setSettingsToggled(true)}
selectedDocuments={selectedDocuments}
// assistant stuff
selectedAssistant={liveAssistant}
@@ -2796,7 +2849,6 @@ export function ChatPage({
message={message}
setMessage={setMessage}
onSubmit={onSubmit}
- filterManager={filterManager}
files={currentMessageFiles}
setFiles={setCurrentMessageFiles}
toggleFilters={
diff --git a/web/src/app/chat/WrappedChat.tsx b/web/src/app/chat/WrappedChat.tsx
index 6b48e442175..55d0f91c639 100644
--- a/web/src/app/chat/WrappedChat.tsx
+++ b/web/src/app/chat/WrappedChat.tsx
@@ -4,14 +4,20 @@ import FunctionalWrapper from "./shared_chat_search/FunctionalWrapper";
export default function WrappedChat({
initiallyToggled,
+ firstMessage,
}: {
initiallyToggled: boolean;
+ firstMessage?: string;
}) {
return (
(
-
void;
+}) => (
+
+ 
+ onRemove(url)}
+ size={16}
+ className="text-text-400 hover:text-text-600 ml-auto cursor-pointer"
+ />
+
+);
+
+const SentUrlChip = ({
+ url,
+ onRemove,
+ onClick,
+ title,
+}: {
+ url: string;
+ onRemove: (url: string) => void;
+ onClick: () => void;
+ title: string;
+}) => {
+ return (
+
+ );
+};
+
interface ChatInputBarProps {
removeDocs: () => void;
- openModelSettings: () => void;
showDocs: () => void;
showConfigureAPIKey: () => void;
selectedDocuments: OnyxDocument[];
@@ -45,7 +105,7 @@ interface ChatInputBarProps {
setMessage: (message: string) => void;
stopGenerating: () => void;
onSubmit: () => void;
- filterManager: FilterManager;
+ llmOverrideManager: LlmOverrideManager;
chatState: ChatState;
alternativeAssistant: Persona | null;
// assistants
@@ -61,7 +121,6 @@ interface ChatInputBarProps {
export function ChatInputBar({
removeDocs,
- openModelSettings,
showDocs,
showConfigureAPIKey,
selectedDocuments,
@@ -69,7 +128,6 @@ export function ChatInputBar({
setMessage,
stopGenerating,
onSubmit,
- filterManager,
chatState,
// assistants
@@ -408,7 +466,7 @@ export function ChatInputBar({
style={{ scrollbarWidth: "thin" }}
role="textarea"
aria-multiline
- placeholder="Ask me anything.."
+ placeholder="Ask me anything..."
value={message}
onKeyDown={(event) => {
if (
@@ -453,16 +511,6 @@ export function ChatInputBar({
onClick={toggleFilters}
/>
)}
- {(filterManager.selectedSources.length > 0 ||
- filterManager.selectedDocumentSets.length > 0 ||
- filterManager.selectedTags.length > 0 ||
- filterManager.timeRange) &&
- toggleFilters && (
- + {new URL(url).hostname} +
+
diff --git a/web/src/app/chat/input/SimplifiedChatInputBar.tsx b/web/src/app/chat/input/SimplifiedChatInputBar.tsx
new file mode 100644
index 00000000000..20a5dae8018
--- /dev/null
+++ b/web/src/app/chat/input/SimplifiedChatInputBar.tsx
@@ -0,0 +1,244 @@
+import React, { useEffect } from "react";
+import { FiPlusCircle } from "react-icons/fi";
+import { ChatInputOption } from "./ChatInputOption";
+import { FilterManager } from "@/lib/hooks";
+import { ChatFileType, FileDescriptor } from "../interfaces";
+import {
+ InputBarPreview,
+ InputBarPreviewImageProvider,
+} from "../files/InputBarPreview";
+import { SendIcon } from "@/components/icons/icons";
+import { HorizontalSourceSelector } from "@/components/search/filtering/HorizontalSourceSelector";
+import { Tag } from "@/lib/types";
+
+const MAX_INPUT_HEIGHT = 200;
+
+interface ChatInputBarProps {
+ message: string;
+ setMessage: (message: string) => void;
+ onSubmit: () => void;
+ files: FileDescriptor[];
+ setFiles: (files: FileDescriptor[]) => void;
+ handleFileUpload: (files: File[]) => void;
+ textAreaRef: React.RefObject;
+ filterManager?: FilterManager;
+ existingSources: string[];
+ availableDocumentSets: { name: string }[];
+ availableTags: Tag[];
+}
+
+export function SimplifiedChatInputBar({
+ message,
+ setMessage,
+ onSubmit,
+ files,
+ setFiles,
+ handleFileUpload,
+ textAreaRef,
+ filterManager,
+ existingSources,
+ availableDocumentSets,
+ availableTags,
+}: ChatInputBarProps) {
+ useEffect(() => {
+ const textarea = textAreaRef.current;
+ if (textarea) {
+ textarea.style.height = "0px";
+ textarea.style.height = `${Math.min(
+ textarea.scrollHeight,
+ MAX_INPUT_HEIGHT
+ )}px`;
+ }
+ }, [message, textAreaRef]);
+
+ const handlePaste = (event: React.ClipboardEvent) => {
+ const items = event.clipboardData?.items;
+ if (items) {
+ const pastedFiles = [];
+ for (let i = 0; i < items.length; i++) {
+ if (items[i].kind === "file") {
+ const file = items[i].getAsFile();
+ if (file) pastedFiles.push(file);
+ }
+ }
+ if (pastedFiles.length > 0) {
+ event.preventDefault();
+ handleFileUpload(pastedFiles);
+ }
+ }
+ };
+
+ const handleInputChange = (event: React.ChangeEvent) => {
+ const text = event.target.value;
+ setMessage(text);
+ };
+
+ return (
+
+
+ {files.length > 0 && (
+
+
+ )}
+
+
+ {files.map((file) => (
+
+
+ {file.type === ChatFileType.IMAGE ? (
+ {
+ setFiles(
+ files.filter(
+ (fileInFilter) => fileInFilter.id !== file.id
+ )
+ );
+ }}
+ isUploading={file.isUploading || false}
+ />
+ ) : (
+ {
+ setFiles(
+ files.filter(
+ (fileInFilter) => fileInFilter.id !== file.id
+ )
+ );
+ }}
+ isUploading={file.isUploading || false}
+ />
+ )}
+
+ ))}
+