+
{project.name}
diff --git a/src/components/chat/panels/projects/document-list.tsx b/src/components/chat/panels/projects/document-list.tsx
index a8c10886..244b799c 100644
--- a/src/components/chat/panels/projects/document-list.tsx
+++ b/src/components/chat/panels/projects/document-list.tsx
@@ -6,13 +6,20 @@ import { api } from "../../../../../convex/_generated/api";
import type { Id } from "../../../../../convex/_generated/dataModel";
import { ProjectDocumentListItem } from "./document-list-item";
import { Toggle } from "@/components/ui/toggle";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
export function ProjectDocumentList({
projectId,
}: {
projectId: Id<"projects">;
}) {
- const { data: projectDocuments } = useQuery({
+ const {
+ data: projectDocuments,
+ isLoading: isLoadingProjectDocs,
+ isError: isProjectDocumentsError,
+ error: projectDocumentsError,
+ } = useQuery({
...convexQuery(
api.projectDocuments.queries.getAll,
projectId
@@ -23,6 +30,7 @@ export function ProjectDocumentList({
: "skip",
),
});
+
const { mutate: toggleSelectAll, isPending: isTogglingSelectAll } =
useMutation({
mutationFn: useConvexMutation(
@@ -31,7 +39,7 @@ export function ProjectDocumentList({
});
const handleSelectAll = async (checked: boolean) => {
- await toggleSelectAll({
+ toggleSelectAll({
projectId,
selected: checked,
});
@@ -58,7 +66,7 @@ export function ProjectDocumentList({
handleSelectAll(pressed)}
- disabled={isTogglingSelectAll}
+ disabled={isTogglingSelectAll || isLoadingProjectDocs}
className="w-36 gap-2 cursor-pointer rounded-lg flex items-center justify-center"
variant={allSelected ? "default" : "outline"}
>
@@ -84,15 +92,31 @@ export function ProjectDocumentList({
-
-
- {projectDocuments.projectDocuments.map((projectDocument) => (
+
+ {isLoadingProjectDocs ? (
+
+
+
+ Loading project documents...
+
+
+
+ ) : (
+ projectDocuments.projectDocuments.map((projectDocument) => (
);
diff --git a/src/components/chat/panels/projects/list.tsx b/src/components/chat/panels/projects/list.tsx
index 8dda17db..b8c41ee3 100644
--- a/src/components/chat/panels/projects/list.tsx
+++ b/src/components/chat/panels/projects/list.tsx
@@ -2,6 +2,8 @@ import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { PlusIcon, TrashIcon } from "lucide-react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
import { useQuery, useMutation } from "@tanstack/react-query";
import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
import { api } from "../../../../../convex/_generated/api";
@@ -16,7 +18,12 @@ export const ProjectsList = () => {
const chatId = useAtomValue(chatIdAtom);
const navigate = useNavigate();
const router = useRouter();
- const { data: allProjects } = useQuery({
+ const {
+ data: allProjects,
+ isLoading: isLoadingProjects,
+ isError: isProjectsError,
+ error: projectsError,
+ } = useQuery({
...convexQuery(api.projects.queries.getAll, {
paginationOpts: { numItems: 20, cursor: null },
}),
@@ -34,6 +41,30 @@ export const ProjectsList = () => {
const isOnProjectsRoute = useLocation().pathname === "/projects";
+ if (isLoadingProjects) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (isProjectsError) {
+ return (
+
+
+ );
+ }
+
return (
<>
{
+ try {
+ const parsed = new URL(url);
+ return parsed.protocol === "http:" || parsed.protocol === "https:";
+ } catch {
+ return false;
+ }
+};
+
export const DocumentDialog = () => {
- const documentDialogOpen = useAtomValue(documentDialogOpenAtom);
- const setDocumentDialogOpen = useSetAtom(documentDialogOpenAtom);
- const [previewUrl, setPreviewUrl] = useState
(null);
+ const documentDialogOpen = useAtomValue(documentDialogOpenAtom);
+ const setDocumentDialogOpen = useSetAtom(documentDialogOpenAtom);
+ const [previewUrl, setPreviewUrl] = useState(null);
+ const [previewError, setPreviewError] = useState(null);
- const { data: document } = useQuery({
- ...convexQuery(
- api.documents.queries.get,
- documentDialogOpen ? { documentId: documentDialogOpen } : "skip",
- ),
- enabled: !!documentDialogOpen,
- });
+ const { data: document } = useQuery({
+ ...convexQuery(
+ api.documents.queries.get,
+ documentDialogOpen ? { documentId: documentDialogOpen } : "skip",
+ ),
+ enabled: !!documentDialogOpen,
+ });
- const { mutateAsync: generateDownloadUrl } = useMutation({
- mutationFn: useConvexMutation(api.documents.mutations.generateDownloadUrl),
- });
+ const { mutateAsync: generateDownloadUrl } = useMutation({
+ mutationFn: useConvexMutation(api.documents.mutations.generateDownloadUrl),
+ });
- const documentName = document?.name ?? "";
- const {
- icon: Icon,
- className: IconClassName,
- tag,
- } = document
- ? getDocTagInfo(document)
- : { icon: () => null, className: "", tag: "" };
+ const documentName = document?.name ?? "";
+ const {
+ icon: Icon,
+ className: IconClassName,
+ tag,
+ } = document
+ ? getDocTagInfo(document)
+ : { icon: () => null, className: "", tag: "" };
- useEffect(() => {
- setPreviewUrl(null);
- const loadPreviewUrl = async () => {
- if (!document) return;
- switch (tag) {
- case "image":
- case "pdf":
- case "file": {
- // Only files need download URL
- const url = await generateDownloadUrl({
- documentId: document._id!,
- });
- setPreviewUrl(url);
- break;
- }
- case "url":
- case "site": {
- setPreviewUrl(document.key as string);
- break;
- }
- case "youtube": {
- setPreviewUrl(`https://www.youtube.com/embed/${document.key}`);
- break;
- }
- default:
- if (["file", "text", "github"].includes(document.type)) {
- const url = await generateDownloadUrl({
- documentId: document._id!,
- });
- setPreviewUrl(url);
- break;
- } else {
- setPreviewUrl(document.key as string);
- }
- break;
- }
- };
- loadPreviewUrl();
- }, [document, tag, generateDownloadUrl]);
+ useEffect(() => {
+ setPreviewUrl(null);
+ setPreviewError(null);
+ const loadPreviewUrl = async () => {
+ if (!document) return;
+ try {
+ switch (tag) {
+ case "image":
+ case "pdf":
+ case "file": {
+ // Only files need download URL
+ const url = await generateDownloadUrl({
+ documentId: document._id,
+ });
+ setPreviewUrl(url);
+ break;
+ }
+ case "url":
+ case "site": {
+ const externalUrl = document.key as string;
+ if (isValidExternalUrl(externalUrl)) {
+ setPreviewUrl(externalUrl);
+ } else {
+ setPreviewError("Invalid or unsafe URL");
+ }
+ break;
+ }
+ case "youtube": {
+ setPreviewUrl(`https://www.youtube.com/embed/${document.key}`);
+ break;
+ }
+ default:
+ if (["file", "text", "github"].includes(document.type)) {
+ const url = await generateDownloadUrl({
+ documentId: document._id,
+ });
+ setPreviewUrl(url);
+ break;
+ } else {
+ setPreviewUrl(document.key as string);
+ }
+ break;
+ }
+ } catch (error) {
+ setPreviewError(
+ `Failed to load preview: ${error instanceof Error ? error.message : "Unknown error"}`,
+ );
+ }
+ };
+ loadPreviewUrl();
+ }, [document, tag, generateDownloadUrl]);
- // Early return if dialog is not open
- if (!documentDialogOpen) {
- return null;
- }
+ // Early return if dialog is not open
+ if (!documentDialogOpen) {
+ return null;
+ }
- const handleDownload = async () => {
- if (!document || tag !== "file") return;
- const url = await generateDownloadUrl({
- documentId: document._id!,
- });
- if (url) {
- window.open(url, "_blank");
- }
- };
+ const handleDownload = async () => {
+ if (!document || tag !== "file") return;
+ const url = await generateDownloadUrl({
+ documentId: document._id,
+ });
+ if (url) {
+ const w = window.open(url, "_blank", "noopener,noreferrer");
+ if (w) w.opener = null;
+ }
+ };
- const handleOpen = () => {
- if (!document) return;
- if (tag === "url" || tag === "site") {
- window.open(document.key as string, "_blank");
- } else if (tag === "youtube") {
- window.open(`https://youtube.com/watch?v=${document.key}`, "_blank");
- }
- };
+ const handleOpen = () => {
+ if (!document) return;
+ if (tag === "url" || tag === "site") {
+ const externalUrl = document.key as string;
+ if (isValidExternalUrl(externalUrl)) {
+ const w = window.open(externalUrl, "_blank", "noopener,noreferrer");
+ if (w) w.opener = null;
+ }
+ } else if (tag === "youtube") {
+ const w = window.open(
+ `https://youtube.com/watch?v=${document.key}`,
+ "_blank",
+ "noopener,noreferrer",
+ );
+ if (w) w.opener = null;
+ }
+ };
- return (
- setDocumentDialogOpen(undefined)}
- >
-
-
-
- {documentName}
-
-
+ return (
+ setDocumentDialogOpen(undefined)}
+ >
+
+
+
+ {documentName}
+
+
-
-
-
- Type:{" "}
- {document?.type &&
- document.type.charAt(0).toUpperCase() + document.type.slice(1)}
-
- {document?.size && (
-
- Size: {formatBytes(document.size)}
-
- )}
-
+
+
+
+ Type:{" "}
+ {document?.type &&
+ document.type.charAt(0).toUpperCase() + document.type.slice(1)}
+
+ {document?.size && (
+
+ Size: {formatBytes(document.size)}
+
+ )}
+
- {previewUrl && (
-
- {(() => {
- if (tag === "image") {
- return (
-
- );
- } else if (tag === "pdf") {
- return (
-
-
- PDF preview not supported in your browser. Please
- download the file to view it.
-
-
- );
- } else if (tag === "youtube") {
- return (
-
- );
- } else if (tag === "url" || tag === "site") {
- return (
-
- );
- } else if (tag === "file") {
- // fallback for unknown file types
- return (
-
-
- File preview not supported. Please download the file to
- view it.
-
-
- );
- }
- return null;
- })()}
-
- )}
-
+ {previewError ? (
+
+ ) : previewUrl ? (
+
+ {(() => {
+ if (tag === "image") {
+ return (
+
+ );
+ } else if (tag === "pdf") {
+ return (
+
+
+ PDF preview not supported in your browser. Please
+ download the file to view it.
+
+
+ );
+ } else if (tag === "youtube") {
+ return (
+
+ );
+ } else if (tag === "url" || tag === "site") {
+ // Only render iframe if URL is valid and safe
+ if (isValidExternalUrl(previewUrl)) {
+ return (
+
+ );
+ } else {
+ return (
+
+ Invalid or unsafe URL for preview
+
+ );
+ }
+ } else if (tag === "file") {
+ // fallback for unknown file types
+ return (
+
+
+ File preview not supported. Please download the file to
+ view it.
+
+
+ );
+ }
+ return null;
+ })()}
+
+ ) : null}
+
- {tag === "file" ? (
- Download
- ) : tag === "url" || tag === "site" || tag === "youtube" ? (
-
- Open {tag === "youtube" ? "in YouTube" : "in Browser"}
-
- ) : null}
- setDocumentDialogOpen(undefined)}
- >
- Close
-
-
-
-
- );
+
+ {tag === "file" ? (
+ Download
+ ) : tag === "url" || tag === "site" || tag === "youtube" ? (
+
+ Open {tag === "youtube" ? "in YouTube" : "in Browser"}
+
+ ) : null}
+ setDocumentDialogOpen(undefined)}
+ >
+ Close
+
+
+
+
+ );
};
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index 6447b192..062f4aec 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -1,16 +1,16 @@
import { SidebarTrigger } from "@/components/ui/sidebar";
import { ModeToggle } from "@/components/theme-provider";
import {
- resizePanelOpenAtom,
- selectedArtifactAtom,
- selectedVibzMcpAtom,
- sidebarOpenAtom,
- userAtom,
+ resizePanelOpenAtom,
+ selectedArtifactAtom,
+ selectedVibzMcpAtom,
+ sidebarOpenAtom,
+ userAtom,
} from "@/store/chatStore";
import {
- PanelRightCloseIcon,
- PlusIcon,
- PanelRightOpenIcon,
+ PanelRightCloseIcon,
+ PlusIcon,
+ PanelRightOpenIcon,
} from "lucide-react";
import { Button } from "./ui/button";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
@@ -20,111 +20,128 @@ import { convexQuery } from "@convex-dev/react-query";
import { api } from "../../convex/_generated/api";
import { useEffect } from "react";
import { Settings2Icon } from "lucide-react";
+import { Navigate } from "@tanstack/react-router";
export function TopNav() {
- const [resizePanelOpen, setResizePanelOpen] = useAtom(resizePanelOpenAtom);
- const setSelectedArtifact = useSetAtom(selectedArtifactAtom);
- const navigate = useNavigate();
- const sidebarOpen = useAtomValue(sidebarOpenAtom);
- const selectedArtifact = useAtomValue(selectedArtifactAtom);
- const selectedVibzMcp = useAtomValue(selectedVibzMcpAtom);
- const setUser = useSetAtom(userAtom);
- const location = useLocation();
+ const [resizePanelOpen, setResizePanelOpen] = useAtom(resizePanelOpenAtom);
+ const setSelectedArtifact = useSetAtom(selectedArtifactAtom);
+ const navigate = useNavigate();
+ const sidebarOpen = useAtomValue(sidebarOpenAtom);
+ const selectedArtifact = useAtomValue(selectedArtifactAtom);
+ const selectedVibzMcp = useAtomValue(selectedVibzMcpAtom);
+ const setUser = useSetAtom(userAtom);
+ const location = useLocation();
+ const params = useParams({ strict: false });
+ const isOnChatRoute = !!params.chatId;
+ const isSettingsRoute = location.pathname.startsWith("/settings");
- const { data: user } = useQuery({
- ...convexQuery(api.auth.getUser, {}),
- });
+ function isUnauthorized(err: unknown) {
+ const e = err as any;
+ return (
+ e?.response?.status === 401 ||
+ e?.status === 401 ||
+ e?.code === "UNAUTHENTICATED" ||
+ e?.code === "UNAUTHORIZED" ||
+ (e instanceof Error && /\b401\b/.test(e.message))
+ );
+ }
- useEffect(() => {
- if (user) {
- setUser(user);
- }
- }, [user]);
+ const { data: user, isError: isErrorUser } = useQuery({
+ ...convexQuery(api.auth.getUser, {}),
+ // Avoid looping on auth errors; tolerate brief transient failures.
+ retry: (failureCount, err) => !isUnauthorized(err) && failureCount < 2,
+ staleTime: 5 * 60 * 1000,
+ });
- // Check if we're on a chat route by looking for chatId parameter
- const params = useParams({ strict: false });
- const isOnChatRoute = !!params.chatId;
- const isSettingsRoute = location.pathname.startsWith("/settings");
+ useEffect(() => {
+ if (user) {
+ setUser(user);
+ }
+ }, [user, setUser]);
- // Global shortcut for toggling resizable panel (Ctrl/Cmd+I)
- useEffect(() => {
- if (!isOnChatRoute) return;
- const handleKeyDown = (event: KeyboardEvent) => {
- if (
- !event.repeat &&
- event.key === "i" &&
- (event.metaKey || event.ctrlKey)
- ) {
- event.preventDefault();
- setResizePanelOpen((open) => {
- if (!open) setSelectedArtifact(undefined);
- return !open;
- });
- }
- };
+ // Global shortcut for toggling resizable panel (Ctrl/Cmd+I)
+ useEffect(() => {
+ if (!isOnChatRoute) return;
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (
+ !event.repeat &&
+ event.key === "i" &&
+ (event.metaKey || event.ctrlKey)
+ ) {
+ event.preventDefault();
+ setResizePanelOpen((open) => {
+ if (!open) setSelectedArtifact(undefined);
+ return !open;
+ });
+ }
+ };
- window.addEventListener("keydown", handleKeyDown);
- return () => window.removeEventListener("keydown", handleKeyDown);
- }, [isOnChatRoute, setResizePanelOpen, setSelectedArtifact]);
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [isOnChatRoute, setResizePanelOpen, setSelectedArtifact]);
- return (
-
-
-
-
{
- navigate({ to: "/chat/$chatId", params: { chatId: "new" } });
- }}
- >
-
-
-
- {!resizePanelOpen && (
- <>
-
{
- navigate({ to: "/settings/profile" });
- }}
- >
-
-
-
- )}
- {isOnChatRoute && (
-
{
- setResizePanelOpen(!resizePanelOpen);
- setSelectedArtifact(undefined);
- }}
- >
- {resizePanelOpen ? (
-
- )}
-
-
+
+
+
{
+ navigate({ to: "/chat/$chatId", params: { chatId: "new" } });
+ }}
+ >
+
+
+
+ {!resizePanelOpen && (
+ <>
+
{
+ navigate({ to: "/settings/profile" });
+ }}
+ >
+
+
+
+ )}
+ {isOnChatRoute && (
+
{
+ setResizePanelOpen(!resizePanelOpen);
+ setSelectedArtifact(undefined);
+ }}
+ >
+ {resizePanelOpen ? (
+
+ )}
+
+
,
+ VariantProps {
+ error?: unknown;
+ title?: string;
+ description?: string;
+ multiLineDescription?: boolean;
+ showIcon?: boolean;
+ showTitle?: boolean;
+ showDescription?: boolean;
+ icon?: React.ComponentType<{ className?: string }>;
+}
+
+const ErrorState = React.forwardRef(
+ (
+ {
+ className,
+ variant,
+ density,
+ align,
+ error,
+ title = "Something went wrong",
+ description,
+ multiLineDescription = false,
+ showIcon = true,
+ showTitle = true,
+ showDescription = true,
+ icon: Icon = AlertCircleIcon,
+ ...props
+ },
+ ref
+ ) => {
+ const errorMessage = React.useMemo(() => {
+ if (description) return description;
+ if (error instanceof Error) return error.message;
+ if (error) return String(error);
+ return "";
+ }, [error, description]);
+
+ // Only return null if nothing at all would render
+ if (
+ !showIcon &&
+ (!showTitle || !title) &&
+ (!showDescription || !errorMessage)
+ ) {
+ return null;
+ }
+
+ return (
+
+ {showIcon && (
+
+
+ )}
+
+ {showTitle && title && (
+
+ {title}
+
+ )}
+ {showDescription && errorMessage && (
+
+ {errorMessage}
+
+ )}
+
+
+
+ {label ?
{label}
: null}
+
-
-
-
- {icon}
-
-
- {tooltip}
-
-
+
+
+
+ {disabled ? (
+
+
+ {icon}
+
+
+ ) : (
+
+ {icon}
+
+ )}
+
+ {tooltip}
+
+
);
diff --git a/src/hooks/chats/use-chats.ts b/src/hooks/chats/use-chats.ts
index 6762962f..43906519 100644
--- a/src/hooks/chats/use-chats.ts
+++ b/src/hooks/chats/use-chats.ts
@@ -126,7 +126,12 @@ export const useSearchChats = () => {
const [searchQuery, setSearchQuery] = useState("");
const [debouncedQuery, setDebouncedQuery] = useState("");
- const { data: searchResults } = useQuery({
+ const {
+ data: searchResults,
+ isLoading: isLoadingSearch,
+ isError: isSearchError,
+ error: searchError,
+ } = useQuery({
...convexQuery(api.chats.queries.search, {
query: debouncedQuery.trim() ? debouncedQuery.trim() : "skip",
}),
@@ -141,11 +146,16 @@ export const useSearchChats = () => {
return () => clearTimeout(timer);
}, [searchQuery]);
+ const isSearching = debouncedQuery.trim().length > 0;
+
return {
searchQuery,
setSearchQuery,
searchResults: searchResults || [],
- isSearching: debouncedQuery !== searchQuery,
+ isSearching,
+ isLoadingSearch,
+ isSearchError,
+ searchError,
};
};
diff --git a/src/hooks/chats/use-documents.ts b/src/hooks/chats/use-documents.ts
index eb3f9f9d..eeb40ce7 100644
--- a/src/hooks/chats/use-documents.ts
+++ b/src/hooks/chats/use-documents.ts
@@ -8,16 +8,18 @@ import { useSetAtom, useAtomValue } from "jotai";
export const useRemoveDocument = () => {
const chatId = useAtomValue(chatIdAtom);
+
const { data: chatInputQuery } = useQuery({
...convexQuery(
api.chats.queries.get,
- chatId !== "new" ? { chatId } : "skip",
+ chatId !== "new" ? { chatId } : "skip"
),
- enabled: chatId !== "new",
});
+
const { mutate: updateChatInputMutation } = useMutation({
mutationFn: useConvexMutation(api.chats.mutations.update),
});
+
const setNewChat = useSetAtom(newChatAtom);
return (documentId: Id<"documents">) => {
@@ -27,19 +29,26 @@ export const useRemoveDocument = () => {
}
const filteredDocuments = chatInputQuery.documents.filter(
- (id) => id !== documentId,
+ (id) => id !== documentId
);
- updateChatInputMutation({
- chatId: chatId,
- updates: {
- documents: filteredDocuments,
+ updateChatInputMutation(
+ {
+ chatId: chatId,
+ updates: {
+ documents: filteredDocuments,
+ },
},
- });
+ {
+ onError: () => {
+ toast("Failed to remove document");
+ },
+ }
+ );
} else {
setNewChat((prev) => {
const filteredDocuments = prev.documents.filter(
- (id) => id !== documentId,
+ (id) => id !== documentId
);
return { ...prev, documents: filteredDocuments };
});
@@ -54,7 +63,7 @@ export const useUploadDocuments = (
}: {
type: "file" | "url" | "site" | "youtube" | "text" | "github";
chat?: Doc<"chats">;
- } = { type: "file" },
+ } = { type: "file" }
) => {
const chatId = useAtomValue(chatIdAtom);
const { mutateAsync: updateChatMutation } = useMutation({
@@ -102,7 +111,7 @@ export const useUploadDocuments = (
size: file.size,
key: storageId,
});
- }),
+ })
);
// Update chat input with new documents
@@ -123,7 +132,7 @@ export const useUploadDocuments = (
}
toast(
- `${files.length} file${files.length > 1 ? "s" : ""} uploaded successfully`,
+ `${files.length} file${files.length > 1 ? "s" : ""} uploaded successfully`
);
return documentIds;
diff --git a/src/hooks/chats/use-mcp.ts b/src/hooks/chats/use-mcp.ts
index 47327e57..48165a85 100644
--- a/src/hooks/chats/use-mcp.ts
+++ b/src/hooks/chats/use-mcp.ts
@@ -40,7 +40,12 @@ function validateMCP(mcp: MCPFormState): boolean {
}
export function useMCPs() {
- const { data: mcps } = useQuery({
+ const {
+ data: mcps,
+ isLoading,
+ isError,
+ error,
+ } = useQuery({
...convexQuery(api.mcps.queries.getAll, {
paginationOpts: { numItems: 10, cursor: null },
}),
@@ -131,5 +136,8 @@ export function useMCPs() {
handleDelete,
restartMCP,
validateMCP,
+ isLoading,
+ isError,
+ error,
};
}
diff --git a/src/hooks/chats/use-messages.ts b/src/hooks/chats/use-messages.ts
index e9c52e05..956d342c 100644
--- a/src/hooks/chats/use-messages.ts
+++ b/src/hooks/chats/use-messages.ts
@@ -4,10 +4,10 @@ import { convexQuery } from "@convex-dev/react-query";
import { api } from "../../../convex/_generated/api";
import type { Id } from "../../../convex/_generated/dataModel";
import {
- buildThreadAndGroups,
- type MessageGroup,
- type MessageWithBranchInfo,
- type BranchPath,
+ buildThreadAndGroups,
+ type MessageGroup,
+ type MessageWithBranchInfo,
+ type BranchPath,
} from "../../../convex/chatMessages/helpers";
import { useStreamAtom, currentThreadAtom } from "@/store/chatStore";
import { useSetAtom } from "jotai";
@@ -20,85 +20,94 @@ let globalBranchPath: BranchPath = [];
let forceUpdateFn: (() => void) | null = null;
export const useMessages = ({ chatId }: { chatId: Id<"chats"> | "new" }) => {
- const setCurrentThread = useSetAtom(currentThreadAtom);
- const setUseStreamAtom = useSetAtom(useStreamAtom);
- const [counter, setCounter] = useState(0);
+ const setCurrentThread = useSetAtom(currentThreadAtom);
+ const setUseStreamAtom = useSetAtom(useStreamAtom);
+ const [counter, setCounter] = useState(0);
- // Register the force update function
- forceUpdateFn = () => setCounter((c) => c + 1);
+ // Register the force update function
+ forceUpdateFn = () => setCounter((c) => c + 1);
- const { data: messages, isLoading } = useQuery({
- ...convexQuery(
- api.chatMessages.queries.get,
- chatId !== "new" ? { chatId: chatId as Id<"chats"> } : "skip",
- ),
- enabled: chatId !== "new",
- });
+ const {
+ data: messages,
+ isLoading,
+ isError: isMessagesError,
+ error: messagesError,
+ } = useQuery({
+ ...convexQuery(
+ api.chatMessages.queries.get,
+ chatId !== "new" ? { chatId: chatId as Id<"chats"> } : "skip",
+ ),
+ enabled: chatId !== "new",
+ });
- const messageGroups = useMemo(
- () => (messages ? buildThreadAndGroups(messages, globalBranchPath) : []),
- [messages, counter],
- );
+ const messageGroups = useMemo(
+ () => (messages ? buildThreadAndGroups(messages, globalBranchPath) : []),
+ [messages, counter],
+ );
- const streamData = useStream(chatId);
+ const streamData = useStream(chatId);
- useEffect(() => {
- setCurrentThread(messageGroups);
- setUseStreamAtom(streamData);
- }, [
- messageGroups,
- JSON.stringify(streamData),
- setCurrentThread,
- setUseStreamAtom,
- ]);
+ useEffect(() => {
+ setCurrentThread(messageGroups);
+ setUseStreamAtom(streamData);
+ }, [
+ messageGroups,
+ JSON.stringify(streamData),
+ setCurrentThread,
+ setUseStreamAtom,
+ ]);
- useEffect(() => {
- // Reset branch path when chat changes
- globalBranchPath = [];
- setCounter((c) => c + 1);
- }, [chatId]);
+ useEffect(() => {
+ // Reset branch path when chat changes
+ globalBranchPath = [];
+ setCounter((c) => c + 1);
+ }, [chatId]);
- return {
- isLoading: isLoading,
- isEmpty: messageGroups.length === 0,
- };
+ return {
+ isLoading: isLoading,
+ isEmpty: messageGroups.length === 0,
+ isError: isMessagesError,
+ error: messagesError,
+ isStreamError: Boolean(streamData?.isError),
+ streamError: streamData?.error,
+ };
};
export const useNavigateBranch = () => {
- return useCallback(
- (
- depth: number,
- direction: "prev" | "next" | number,
- totalBranches: number,
- ) => {
- if (typeof direction === "number") {
- globalBranchPath[depth] = direction;
- } else {
- const currentIndex = globalBranchPath[depth] ?? (totalBranches - 1); // Default to current displayed branch
- if (direction === "next") {
- globalBranchPath[depth] = (currentIndex + 1) % totalBranches;
- } else if (direction === "prev") {
- globalBranchPath[depth] =
- (currentIndex - 1 + totalBranches) % totalBranches;
- }
- }
- globalBranchPath.splice(depth + 1);
+ return useCallback(
+ (
+ depth: number,
+ direction: "prev" | "next" | number,
+ totalBranches: number,
+ ) => {
+ if (typeof direction === "number") {
+ globalBranchPath[depth] = direction;
+ } else {
+ const currentIndex = globalBranchPath[depth] ?? totalBranches - 1; // Default to current displayed branch
+ if (direction === "next") {
+ globalBranchPath[depth] = (currentIndex + 1) % totalBranches;
+ } else if (direction === "prev") {
+ globalBranchPath[depth] =
+ (currentIndex - 1 + totalBranches) % totalBranches;
+ }
+ }
+ globalBranchPath.splice(depth + 1);
- if (forceUpdateFn) {
- forceUpdateFn();
- }
- },
- [],
- );
+ if (forceUpdateFn) {
+ forceUpdateFn();
+ }
+ },
+ [],
+ );
};
export const useChangeBranch = () => {
- return useCallback((depth: number, newBranchIndex: number) => {
- globalBranchPath[depth] = newBranchIndex;
- globalBranchPath.splice(depth + 1);
+ return useCallback((depth: number, newBranchIndex: number) => {
+ globalBranchPath[depth] = newBranchIndex;
+ globalBranchPath.splice(depth + 1);
- if (forceUpdateFn) {
- forceUpdateFn();
- }
- }, []);
+ if (forceUpdateFn) {
+ forceUpdateFn();
+ }
+ }, []);
};
diff --git a/src/hooks/chats/use-stream.ts b/src/hooks/chats/use-stream.ts
index c4515761..40520680 100644
--- a/src/hooks/chats/use-stream.ts
+++ b/src/hooks/chats/use-stream.ts
@@ -17,19 +17,24 @@ import {
export type ChunkGroup = AIChunkGroup | ToolChunkGroup;
export function useStream(chatId: Id<"chats"> | "new") {
- const convex = useConvex();
- const { data: stream } = useQuery({
+ const {
+ data: stream,
+ isError: isStreamError,
+ error: streamError,
+ } = useQuery({
...convexQuery(
api.streams.queries.get,
- chatId !== "new" ? { chatId: chatId as Id<"chats"> } : "skip",
+ chatId !== "new" ? { chatId: chatId as Id<"chats"> } : "skip"
),
});
const [groupedChunks, setGroupedChunks] = useState([]);
const [lastSeenTime, setLastSeenTime] = useState(
- undefined,
+ undefined
);
+ const convex = useConvex();
+
// Reset state when chat or stream changes
useEffect(() => {
setLastSeenTime(undefined);
@@ -56,12 +61,12 @@ export function useStream(chatId: Id<"chats"> | "new") {
.filter(
(chunkDoc: any) =>
lastSeenTime === undefined ||
- chunkDoc._creationTime > lastSeenTime,
+ chunkDoc._creationTime > lastSeenTime
)
.flatMap((chunkDoc: any) =>
chunkDoc.chunks.map(
- (chunkStr: string) => JSON.parse(chunkStr) as ChunkGroup,
- ),
+ (chunkStr: string) => JSON.parse(chunkStr) as ChunkGroup
+ )
);
if (newEvents.length > 0) {
setGroupedChunks((prev) => {
@@ -114,7 +119,7 @@ export function useStream(chatId: Id<"chats"> | "new") {
const completedIds = new Set(
groupedChunks
.filter((c) => c.type === "tool" && c.isComplete)
- .map((c) => (c as ToolChunkGroup).toolCallId),
+ .map((c) => (c as ToolChunkGroup).toolCallId)
);
return groupedChunks
.map((chunk) => {
@@ -178,5 +183,7 @@ export function useStream(chatId: Id<"chats"> | "new") {
status: stream?.status,
langchainMessages,
planningStepsMessage,
+ isError: isStreamError,
+ error: streamError,
};
}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 18240590..67400080 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -6,14 +6,15 @@ import {
HeadContent,
} from "@tanstack/react-router";
import { Toaster } from "@/components/ui/sonner";
-import { Loader2 } from "lucide-react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
import { SidebarProvider } from "@/components/ui/sidebar";
import { motion } from "motion/react";
-import { sidebarOpenAtom } from "@/store/chatStore";
+import { sidebarOpenAtom, resizePanelOpenAtom } from "@/store/chatStore";
import { useAtomValue, useSetAtom } from "jotai";
import { useConvexAuth } from "convex/react";
import { AppSidebar } from "@/components/app-sidebar";
import { TopNav } from "@/components/topnav";
+import { useEffect } from "react";
import { DocumentDialog } from "@/components/document-dialog";
import { CreateProjectDialog } from "@/components/create-project-dialog";
@@ -73,11 +74,22 @@ export const Route = createRootRoute({
const publicRoutes = ["/auth"];
const sidebarOpen = useAtomValue(sidebarOpenAtom);
const setSidebarOpen = useSetAtom(sidebarOpenAtom);
+ const setResizePanelOpen = useSetAtom(resizePanelOpenAtom);
+
+ const isSettingsRoute = location.pathname.startsWith("/settings");
+
+ // Ensure sidebar and right resizable panel are closed on settings pages
+ // and keep them hidden there.
+ useEffect(() => {
+ if (!isSettingsRoute) return;
+ sidebarOpen && setSidebarOpen(false);
+ setResizePanelOpen(false);
+ }, [isSettingsRoute, sidebarOpen, setSidebarOpen, setResizePanelOpen]);
if (isLoading) {
return (
-
);
}
@@ -102,10 +114,10 @@ export const Route = createRootRoute({
setSidebarOpen(!sidebarOpen);
}}
>
- {/* AppSidebar and TopNav are now available on all routes */}
+ {/* AppSidebar and TopNav (sidebar hidden on settings) */}
{isAuthenticated && (
<>
-
-
);
}
diff --git a/src/routes/chat.$chatId.lazy.tsx b/src/routes/chat.$chatId.lazy.tsx
index 8fe474f6..fb14e623 100644
--- a/src/routes/chat.$chatId.lazy.tsx
+++ b/src/routes/chat.$chatId.lazy.tsx
@@ -23,6 +23,7 @@ import { api } from "../../convex/_generated/api";
import { newChatAtom } from "@/store/chatStore";
import { convexQuery } from "@convex-dev/react-query";
import { useQuery } from "@tanstack/react-query";
+import { ErrorState } from "@/components/ui/error-state";
export const Route = createLazyFileRoute("/chat/$chatId")({
component: RouteComponent,
@@ -44,7 +45,11 @@ function RouteComponent() {
setSelectedVibzMcp(undefined);
}, [chatId, setSelectedArtifact, setSelectedVibzMcp]);
- const { data: queryChat } = useQuery({
+ const {
+ data: queryChat,
+ isError: isChatError,
+ error: chatError,
+ } = useQuery({
...convexQuery(
api.chats.queries.get,
chatId !== "new" ? { chatId: chatId as Id<"chats"> } : "skip",
@@ -55,6 +60,24 @@ function RouteComponent() {
setChat(chatId !== "new" ? queryChat : newChat);
}, [queryChat, setChat, newChat]);
+ if (isChatError) {
+ return (
+
+
+ );
+ }
+
return (
<>
diff --git a/src/routes/settings/profile.tsx b/src/routes/settings/profile.tsx
index 96543de0..493e0fc5 100644
--- a/src/routes/settings/profile.tsx
+++ b/src/routes/settings/profile.tsx
@@ -9,6 +9,8 @@ import { useAuthActions } from "@convex-dev/auth/react";
import { convexQuery } from "@convex-dev/react-query";
import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "@tanstack/react-router";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
export const Route = createFileRoute("/settings/profile")({
component: RouteComponent,
@@ -17,11 +19,34 @@ export const Route = createFileRoute("/settings/profile")({
});
function RouteComponent() {
- const { data: user } = useQuery(convexQuery(api.auth.getUser, {}));
+ const {
+ data: user,
+ isError: isErrorUser,
+ isLoading: isLoadingUser,
+ error: userError,
+ } = useQuery(convexQuery(api.auth.getUser, {}));
const { signOut } = useAuthActions();
const navigate = useNavigate();
+ if (isLoadingUser) {
+ return (
+
+
+ );
+ }
+
+ if (isErrorUser || userError) {
+ return (
+
diff --git a/temp.md b/temp.md
index 6b0589a5..aa9f4d17 100644
--- a/temp.md
+++ b/temp.md
@@ -12,7 +12,6 @@ https://github.com/0bs-chat/zerobs/tree/feat/message-queue : the message queue f
- pricing [imp]
- usage
-- improve ux overall with loading states and whatnot. [done]
- google integration (the code is already there just need to setup oauth)
- business related mcp with ability to autofill connection info (like auto fetching api key/oauth key for the headers in mcp using oauth, etc to reduce friction)