[pull] main from supermemoryai:main

apps/web/app/(app)/settings/page.tsx

@@ -14,6 +14,7 @@ import Support from "@/components/new/settings/support"
 import { useRouter } from "next/navigation"
 import { useIsMobile } from "@hooks/use-mobile"
 import { analytics } from "@/lib/analytics"
+import { Sun } from "lucide-react"
 
 const TABS = ["account", "integrations", "connections", "support"] as const
 type SettingsTab = (typeof TABS)[number]
@@ -52,23 +53,7 @@ const NAV_ITEMS: NavItem[] = [
 		id: "integrations",
 		label: "Integrations",
 		description: "Save, sync and search memories across tools",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="20"
-				height="20"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				strokeWidth="2"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				aria-hidden="true"
-			>
-				<circle cx="12" cy="12" r="3" />
-				<path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83" />
-			</svg>
-		),
+		icon: <Sun className="size-5" />,
 	},
 	{
 		id: "connections",

apps/web/components/new/chat/index.tsx

@@ -138,16 +138,36 @@ export function ChatSidebar({
 	)
 	const pendingFollowUpGenerations = useRef<Set<string>>(new Set())
 	const messagesContainerRef = useRef<HTMLDivElement>(null)
+	const sentQueuedMessageRef = useRef<string | null>(null)
 	const { selectedProject } = useProject()
 	const { viewMode } = useViewMode()
 	const { user } = useAuth()
 	const [threadId, setThreadId] = useQueryState("thread", threadParam)
-	const fallbackChatId = useMemo(() => generateId(), [])
+	const [fallbackChatId, setFallbackChatId] = useState(() => generateId())
 	const currentChatId = threadId ?? fallbackChatId
+	const chatIdRef = useRef(currentChatId)
+	chatIdRef.current = currentChatId
 	const setCurrentChatId = useCallback(
 		(id: string) => setThreadId(id),
 		[setThreadId],
 	)
+	const chatTransport = useMemo(
+		() =>
+			new DefaultChatTransport({
+				api: `${process.env.NEXT_PUBLIC_BACKEND_URL}/chat/v2`,
+				credentials: "include",
+				prepareSendMessagesRequest: ({ messages }) => ({
+					body: {
+						messages,
+						metadata: {
+							chatId: chatIdRef.current,
+							projectId: selectedProject,
+						},
+					},
+				}),
+			}),
+		[currentChatId, selectedProject],
+	)
 	const [pendingThreadLoad, setPendingThreadLoad] = useState<{
 		id: string
 		messages: UIMessage[]
@@ -174,10 +194,7 @@ export function ChatSidebar({
 
 	const { messages, sendMessage, status, setMessages, stop } = useChat({
 		id: currentChatId ?? undefined,
-		transport: new DefaultChatTransport({
-			api: `${process.env.NEXT_PUBLIC_BACKEND_URL}/chat/v2`,
-			credentials: "include",
-		}),
+		transport: chatTransport,
 		onFinish: async (result) => {
 			if (result.message.role !== "assistant") return
 
@@ -376,9 +393,13 @@ export function ChatSidebar({
 
 	const handleNewChat = useCallback(() => {
 		analytics.newChatCreated()
+		const newChatId = generateId()
+		chatIdRef.current = newChatId
+		setMessages([])
 		setThreadId(null)
+		setFallbackChatId(newChatId)
 		setInput("")
-	}, [setThreadId])
+	}, [setThreadId, setMessages])
 
 	const fetchThreads = useCallback(async () => {
 		setIsLoadingThreads(true)
@@ -492,14 +513,23 @@ export function ChatSidebar({
 			isChatOpen &&
 			queuedMessage &&
 			status !== "submitted" &&
-			status !== "streaming"
+			status !== "streaming" &&
+			sentQueuedMessageRef.current !== queuedMessage
 		) {
+			sentQueuedMessageRef.current = queuedMessage
 			analytics.chatMessageSent({ source: "highlight" })
 			sendMessage({ text: queuedMessage })
 			onConsumeQueuedMessage?.()
 		}
 	}, [isChatOpen, queuedMessage, status, sendMessage, onConsumeQueuedMessage])
 
+	// Reset the sent message ref when queued message is consumed
+	useEffect(() => {
+		if (!queuedMessage) {
+			sentQueuedMessageRef.current = null
+		}
+	}, [queuedMessage])
+
 	// Scroll to bottom when a new user message is added
 	useEffect(() => {
 		const lastMessage = messages[messages.length - 1]
@@ -867,12 +897,11 @@ export function ChatSidebar({
 									)}
 								</div>
 							))}
-							{(status === "submitted" || status === "streaming") &&
-								messages[messages.length - 1]?.role === "user" && (
-									<div className="flex gap-2">
-										<SuperLoader label="Thinking..." />
-									</div>
-								)}
+							{(status === "submitted" || status === "streaming") && (
+								<div className="flex gap-2">
+									<SuperLoader label="Thinking..." />
+								</div>
+							)}
 						</div>
 					</div>
 

apps/web/components/new/header.tsx

@@ -11,7 +11,7 @@ import {
 	Settings,
 	Home,
 	Code2,
-	Cable,
+	Sun,
 	ExternalLink,
 	HelpCircle,
 	MenuIcon,
@@ -22,6 +22,7 @@ import { Button } from "@ui/components/button"
 import { cn } from "@lib/utils"
 import { dmSansClassName } from "@/lib/fonts"
 import { Tabs, TabsList, TabsTrigger } from "@ui/components/tabs"
+import { GraphIcon } from "@/components/new/integration-icons"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -48,28 +49,26 @@ interface HeaderProps {
 	onOpenSearch?: () => void
 }
 
-export function Header({
-	onAddMemory,
-	onOpenChat,
-	onOpenSearch,
-}: HeaderProps) {
+export function Header({ onAddMemory, onOpenChat, onOpenSearch }: HeaderProps) {
 	const { user } = useAuth()
 	const { selectedProject } = useProject()
 	const { switchProject } = useProjectMutations()
 	const router = useRouter()
 	const isMobile = useIsMobile()
 	const { resetOrgOnboarded } = useOrgOnboarding()
-	const [isFeedbackOpen, setIsFeedbackOpen] = useQueryState("feedback", feedbackParam)
+	const [feedbackOpen, setFeedbackOpen] = useQueryState(
+		"feedback",
+		feedbackParam,
+	)
+	const isFeedbackOpen = feedbackOpen ?? false
 	const { viewMode, setViewMode } = useViewMode()
 
 	const handleTryOnboarding = () => {
 		resetOrgOnboarded()
 		router.push("/onboarding?step=input&flow=welcome")
 	}
 
-	const handleFeedback = () => {
-		setIsFeedbackOpen(true)
-	}
+	const handleFeedback = () => setFeedbackOpen(true)
 
 	const displayName =
 		user?.displayUsername ||
@@ -155,13 +154,15 @@ export function Header({
 			{!isMobile && (
 				<Tabs
 					value={viewMode === "list" ? "grid" : viewMode}
-					onValueChange={(v) => setViewMode(v === "grid" ? "list" : v as "graph" | "integrations")}
+					onValueChange={(v) =>
+						setViewMode(v === "grid" ? "list" : (v as "graph" | "integrations"))
+					}
 				>
 					<TabsList className="rounded-full border border-[#161F2C] h-11! z-10!">
 						<TabsTrigger
 							value="grid"
 							className={cn(
-								"rounded-full data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4",
+								"rounded-full data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4 cursor-pointer",
 								dmSansClassName(),
 							)}
 						>
@@ -171,21 +172,21 @@ export function Header({
 						<TabsTrigger
 							value="graph"
 							className={cn(
-								"rounded-full dark:data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4",
+								"rounded-full dark:data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4 cursor-pointer",
 								dmSansClassName(),
 							)}
 						>
-							<LayoutGridIcon className="size-4" />
+							<GraphIcon className="size-4" />
 							Graph
 						</TabsTrigger>
 						<TabsTrigger
 							value="integrations"
 							className={cn(
-								"rounded-full dark:data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4",
+								"rounded-full dark:data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4 cursor-pointer",
 								dmSansClassName(),
 							)}
 						>
-							<Cable className="size-4" />
+							<Sun className="size-4" />
 							Integrations
 						</TabsTrigger>
 					</TabsList>
@@ -232,7 +233,7 @@ export function Header({
 									onClick={() => setViewMode("integrations")}
 									className="px-3 py-2.5 rounded-md hover:bg-[#293952]/40 cursor-pointer text-white text-sm font-medium gap-2"
 								>
-									<Cable className="h-4 w-4 text-[#737373]" />
+									<Sun className="h-4 w-4 text-[#737373]" />
 									Integrations
 								</DropdownMenuItem>
 								<DropdownMenuItem
@@ -410,7 +411,7 @@ export function Header({
 			</div>
 			<FeedbackModal
 				isOpen={isFeedbackOpen}
-				onClose={() => setIsFeedbackOpen(false)}
+				onClose={() => setFeedbackOpen(false)}
 			/>
 		</div>
 	)

apps/web/components/new/integration-icons.tsx

@@ -1,4 +1,7 @@
 import Image from "next/image"
+import { Rotate3d } from "lucide-react"
+
+export { Rotate3d as GraphIcon }
 
 export function ChromeIcon({ className }: { className?: string }) {
 	return (