From fd5db75ca498de9ea1658150b51b77713db8df57 Mon Sep 17 00:00:00 2001 From: Dhravya Shah Date: Sat, 20 Jul 2024 23:13:35 -0500 Subject: [PATCH] fix: lag in chatwindow submission --- apps/browser-rendering | 2 +- apps/web/app/(dash)/chat/[chatid]/loading.tsx | 16 + apps/web/app/(dash)/chat/chatWindow.tsx | 8 +- apps/web/app/(dash)/home/page.tsx | 314 +++++++++--------- 4 files changed, 180 insertions(+), 160 deletions(-) create mode 100644 apps/web/app/(dash)/chat/[chatid]/loading.tsx diff --git a/apps/browser-rendering b/apps/browser-rendering index 0135d881..f8878349 160000 --- a/apps/browser-rendering +++ b/apps/browser-rendering @@ -1 +1 @@ -Subproject commit 0135d8813311b6825382f411cda13f5663b6c462 +Subproject commit f8878349d74dc17dfb938479a68948a12c39b724 diff --git a/apps/web/app/(dash)/chat/[chatid]/loading.tsx b/apps/web/app/(dash)/chat/[chatid]/loading.tsx new file mode 100644 index 00000000..d28961a6 --- /dev/null +++ b/apps/web/app/(dash)/chat/[chatid]/loading.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { chatSearchParamsCache } from "../../../../lib/searchParams"; +import ChatWindow from "../chatWindow"; + +async function Page({ + searchParams, +}: { + searchParams: Record; +}) { + const q = (searchParams?.q as string) ?? "from_loading"; + return ( + + ); +} + +export default Page; diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx index 0c1bace0..28b99c9d 100644 --- a/apps/web/app/(dash)/chat/chatWindow.tsx +++ b/apps/web/app/(dash)/chat/chatWindow.tsx @@ -44,9 +44,7 @@ function ChatWindow({ initialChat?: ChatHistory[]; threadId: string; }) { - const [layout, setLayout] = useState<"chat" | "initial">( - initialChat.length > 1 ? "chat" : "initial", - ); + const [layout, setLayout] = useState<"chat" | "initial">("chat"); const [chatHistory, setChatHistory] = useState(initialChat); const removeJustificationFromText = (text: string) => { @@ -66,6 +64,10 @@ function ChatWindow({ const router = useRouter(); const getAnswer = async (query: string, spaces: string[]) => { + if (query.trim() === "from_loading" || query.trim().length === 0) { + return; + } + const sourcesFetch = await fetch( `/api/chat?q=${query}&spaces=${spaces}&sourcesOnly=true&threadId=${threadId}`, { diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx index 0133cb44..cc1856b4 100644 --- a/apps/web/app/(dash)/home/page.tsx +++ b/apps/web/app/(dash)/home/page.tsx @@ -1,185 +1,187 @@ -'use client'; +"use client"; -import React, { useEffect, useState } from 'react'; -import QueryInput from './queryinput'; -import { getSessionAuthToken, getSpaces } from '@/app/actions/fetchers'; -import { redirect, useRouter } from 'next/navigation'; -import { createChatThread, linkTelegramToUser } from '@/app/actions/doers'; -import { toast } from 'sonner'; -import { motion } from 'framer-motion'; -import { ChromeIcon, GithubIcon, TwitterIcon } from 'lucide-react'; -import Link from 'next/link'; -import { homeSearchParamsCache } from '@/lib/searchParams'; -import History from './history'; +import React, { useEffect, useState } from "react"; +import QueryInput from "./queryinput"; +import { getSessionAuthToken, getSpaces } from "@/app/actions/fetchers"; +import { redirect, useRouter } from "next/navigation"; +import { createChatThread, linkTelegramToUser } from "@/app/actions/doers"; +import { toast } from "sonner"; +import { motion } from "framer-motion"; +import { ChromeIcon, GithubIcon, TwitterIcon } from "lucide-react"; +import Link from "next/link"; +import { homeSearchParamsCache } from "@/lib/searchParams"; +import History from "./history"; const slap = { - initial: { - opacity: 0, - scale: 1.1, - }, - whileInView: { opacity: 1, scale: 1 }, - transition: { - duration: 0.5, - ease: 'easeInOut', - }, - viewport: { once: true }, + initial: { + opacity: 0, + scale: 1.1, + }, + whileInView: { opacity: 1, scale: 1 }, + transition: { + duration: 0.5, + ease: "easeInOut", + }, + viewport: { once: true }, }; function Page({ searchParams }: { searchParams: Record }) { - // TODO: use this to show a welcome page/modal - const firstTime = searchParams.firstTime === 'true'; + // TODO: use this to show a welcome page/modal + const firstTime = searchParams.firstTime === "true"; - const query = searchParams.q || ''; + const query = searchParams.q || ""; - if (firstTime) { - redirect('/onboarding'); - } + if (firstTime) { + redirect("/onboarding"); + } - const [queryPresent, setQueryPresent] = useState(false); + const [queryPresent, setQueryPresent] = useState(false); - const [telegramUser, setTelegramUser] = useState( - searchParams.telegramUser as string, - ); - const [extensionInstalled, setExtensionInstalled] = useState< - string | undefined - >(searchParams.extension as string); + const [telegramUser, setTelegramUser] = useState( + searchParams.telegramUser as string, + ); + const [extensionInstalled, setExtensionInstalled] = useState< + string | undefined + >(searchParams.extension as string); - const { push } = useRouter(); + const { push } = useRouter(); - const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]); + const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]); - useEffect(() => { - if (telegramUser) { - const linkTelegram = async () => { - const response = await linkTelegramToUser(telegramUser); + useEffect(() => { + if (telegramUser) { + const linkTelegram = async () => { + const response = await linkTelegramToUser(telegramUser); - if (response.success) { - toast.success('Your telegram has been linked successfully.'); - } else { - toast.error('Failed to link telegram. Please try again.'); - } - }; + if (response.success) { + toast.success("Your telegram has been linked successfully."); + } else { + toast.error("Failed to link telegram. Please try again."); + } + }; - linkTelegram(); - } + linkTelegram(); + } - if (extensionInstalled) { - toast.success('Extension installed successfully'); - } + if (extensionInstalled) { + toast.success("Extension installed successfully"); + } - getSpaces().then((res) => { - if (res.success && res.data) { - setSpaces(res.data); - return; - } - // TODO: HANDLE ERROR - }); + getSpaces().then((res) => { + if (res.success && res.data) { + setSpaces(res.data); + return; + } + // TODO: HANDLE ERROR + }); - getSessionAuthToken().then((token) => { - if (typeof window === 'undefined') return; - window.postMessage({ token: token.data }, '*'); - }); - }, [telegramUser]); + getSessionAuthToken().then((token) => { + if (typeof window === "undefined") return; + window.postMessage({ token: token.data }, "*"); + }); + }, [telegramUser]); - return ( -
- {/* all content goes here */} - {/*
hi {firstTime ? 'first time' : ''}
*/} + return ( +
+ {/* all content goes here */} + {/*
hi {firstTime ? 'first time' : ''}
*/} - - Ask your{' '} - - supermemory - - + + Ask your{" "} + + supermemory + + -
- { - if (q.length === 0) { - toast.error('Query is required'); - return; - } +
+ { + if (q.length === 0) { + toast.error("Query is required"); + return; + } - const threadid = await createChatThread(q); + console.log("creating thread"); + const threadid = await createChatThread(q); - if (!threadid.success || !threadid.data) { - toast.error('Failed to create chat thread'); - return; - } + if (!threadid.success || !threadid.data) { + toast.error("Failed to create chat thread"); + return; + } - push( - `/chat/${threadid.data}?spaces=${JSON.stringify(spaces)}&q=${q}`, - ); - }} - initialSpaces={spaces} - /> + console.log("pushing to chat"); + push( + `/chat/${threadid.data}?spaces=${JSON.stringify(spaces)}&q=${q}`, + ); + }} + initialSpaces={spaces} + /> - -
+ +
-
-
- - - Install extension - - - - Bug report - - - - Twitter - - - - - - - Telegram bot - -
-
-
- ); +
+
+ + + Install extension + + + + Bug report + + + + Twitter + + + + + + + Telegram bot + +
+
+
+ ); } export default Page;