mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-25 19:15:18 +02:00
feat: enhance memory API responses with limits and update UI components for memory limit handling
This commit is contained in:
parent
fa6d7c60bf
commit
73043a0756
9 changed files with 132 additions and 51 deletions
|
|
@ -14,11 +14,11 @@ import {
|
|||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { MEMORY_HARD_LIMIT, useUserMemory } from "@/hooks/use-memory";
|
||||
import { getMemoryLimitState, useUserMemory } from "@/hooks/use-memory";
|
||||
|
||||
export function MemoryContent() {
|
||||
const activeSearchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
|
||||
const { memory, displayMemory, loading, saving, reset } = useUserMemory(
|
||||
const { memory, displayMemory, limits, loading, saving, reset } = useUserMemory(
|
||||
Number(activeSearchSpaceId)
|
||||
);
|
||||
|
||||
|
|
@ -59,11 +59,11 @@ export function MemoryContent() {
|
|||
};
|
||||
|
||||
const charCount = memory.length;
|
||||
const limitState = getMemoryLimitState(charCount, limits);
|
||||
|
||||
const getCounterColor = () => {
|
||||
if (charCount > MEMORY_HARD_LIMIT) return "text-red-500";
|
||||
if (charCount > 15_000) return "text-orange-500";
|
||||
if (charCount > 10_000) return "text-yellow-500";
|
||||
if (limitState.level === "error") return "text-red-500";
|
||||
if (limitState.level === "warning") return "text-orange-500";
|
||||
return "text-muted-foreground";
|
||||
};
|
||||
|
||||
|
|
@ -112,13 +112,7 @@ export function MemoryContent() {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className={`text-xs shrink-0 ${getCounterColor()}`}>
|
||||
{charCount.toLocaleString()} / {MEMORY_HARD_LIMIT.toLocaleString()}
|
||||
<span className="hidden sm:inline"> characters</span>
|
||||
<span className="sm:hidden"> chars</span>
|
||||
{charCount > 15_000 && charCount <= MEMORY_HARD_LIMIT && " - Approaching limit"}
|
||||
{charCount > MEMORY_HARD_LIMIT && " - Exceeds limit"}
|
||||
</span>
|
||||
<span className={`text-xs shrink-0 ${getCounterColor()}`}>{limitState.label}</span>
|
||||
<div className="flex items-center gap-1.5 sm:gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -21,8 +21,10 @@ import { MarkdownViewer } from "@/components/markdown-viewer";
|
|||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { useMediaQuery } from "@/hooks/use-media-query";
|
||||
import { getMemoryLimitState, type MemoryLimits } from "@/hooks/use-memory";
|
||||
import { useElectronAPI } from "@/hooks/use-platform";
|
||||
import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
|
||||
import { inferMonacoLanguageFromPath } from "@/lib/editor-language";
|
||||
|
|
@ -127,6 +129,7 @@ export function EditorPanelContent({
|
|||
const [saving, setSaving] = useState(false);
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [memoryLimits, setMemoryLimits] = useState<MemoryLimits | null>(null);
|
||||
|
||||
const [editedMarkdown, setEditedMarkdown] = useState<string | null>(null);
|
||||
const [localFileContent, setLocalFileContent] = useState("");
|
||||
|
|
@ -168,6 +171,7 @@ export function EditorPanelContent({
|
|||
setLocalFileContent("");
|
||||
setHasCopied(false);
|
||||
setIsEditing(false);
|
||||
setMemoryLimits(null);
|
||||
initialLoadDone.current = false;
|
||||
changeCountRef.current = 0;
|
||||
|
||||
|
|
@ -221,7 +225,11 @@ export function EditorPanelContent({
|
|||
.catch(() => ({ detail: "Failed to fetch memory" }));
|
||||
throw new Error(errorData.detail || "Failed to fetch memory");
|
||||
}
|
||||
const data = (await response.json()) as { memory_md?: string };
|
||||
const data = (await response.json()) as {
|
||||
memory_md?: string;
|
||||
limits?: MemoryLimits;
|
||||
};
|
||||
setMemoryLimits(data.limits ?? null);
|
||||
const content: EditorContent = {
|
||||
document_id: memoryScope === "team" ? -1002 : -1001,
|
||||
title: title || (memoryScope === "team" ? "Team Memory" : "Personal Memory"),
|
||||
|
|
@ -376,9 +384,13 @@ export function EditorPanelContent({
|
|||
.catch(() => ({ detail: "Failed to save memory" }));
|
||||
throw new Error(errorData.detail || "Failed to save memory");
|
||||
}
|
||||
const data = (await response.json()) as { memory_md?: string };
|
||||
const data = (await response.json()) as {
|
||||
memory_md?: string;
|
||||
limits?: MemoryLimits;
|
||||
};
|
||||
const savedContent = data.memory_md ?? markdownRef.current;
|
||||
markdownRef.current = savedContent;
|
||||
setMemoryLimits(data.limits ?? memoryLimits);
|
||||
setEditorDoc((prev) => (prev ? { ...prev, source_markdown: savedContent } : prev));
|
||||
setEditedMarkdown(null);
|
||||
if (!options?.silent) {
|
||||
|
|
@ -434,6 +446,7 @@ export function EditorPanelContent({
|
|||
isLocalFileMode,
|
||||
isMemoryMode,
|
||||
localFilePath,
|
||||
memoryLimits,
|
||||
memoryScope,
|
||||
resolveLocalVirtualPath,
|
||||
searchSpaceId,
|
||||
|
|
@ -455,6 +468,17 @@ export function EditorPanelContent({
|
|||
const showDesktopHeader = !!onClose;
|
||||
const showEditingActions = isEditableType && isEditing;
|
||||
const localFileLanguage = inferMonacoLanguageFromPath(localFilePath);
|
||||
const activeMarkdown = editedMarkdown ?? editorDoc?.source_markdown ?? "";
|
||||
const memoryLimitState = isMemoryMode
|
||||
? getMemoryLimitState(activeMarkdown.length, memoryLimits)
|
||||
: null;
|
||||
const memoryCounterClassName =
|
||||
memoryLimitState?.level === "error"
|
||||
? "text-red-500"
|
||||
: memoryLimitState?.level === "warning"
|
||||
? "text-orange-500"
|
||||
: "text-muted-foreground";
|
||||
const saveDisabled = saving || !hasUnsavedChanges || (memoryLimitState?.isOverLimit ?? false);
|
||||
|
||||
const handleCancelEditing = useCallback(() => {
|
||||
const savedContent = editorDoc?.source_markdown ?? "";
|
||||
|
|
@ -540,6 +564,17 @@ export function EditorPanelContent({
|
|||
<div className="grid h-10 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b px-4">
|
||||
<div className="min-w-0 flex flex-1 items-center gap-2">
|
||||
<p className="truncate text-sm text-muted-foreground">{displayTitle}</p>
|
||||
{memoryLimitState && (
|
||||
<>
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mx-1 bg-border data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-px dark:bg-white/10"
|
||||
/>
|
||||
<span className={`shrink-0 text-xs ${memoryCounterClassName}`}>
|
||||
{memoryLimitState.label}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{showEditingActions ? (
|
||||
|
|
@ -561,7 +596,7 @@ export function EditorPanelContent({
|
|||
const saveSucceeded = await handleSave({ silent: true });
|
||||
if (saveSucceeded) setIsEditing(false);
|
||||
}}
|
||||
disabled={saving || !hasUnsavedChanges}
|
||||
disabled={saveDisabled}
|
||||
>
|
||||
<span className={saving ? "opacity-0" : ""}>Save</span>
|
||||
{saving && <Spinner size="xs" className="absolute" />}
|
||||
|
|
@ -613,6 +648,17 @@ export function EditorPanelContent({
|
|||
<div className="flex h-14 items-center justify-between border-b px-4 shrink-0">
|
||||
<div className="flex flex-1 min-w-0 items-center gap-2">
|
||||
<h2 className="text-sm font-semibold truncate">{displayTitle}</h2>
|
||||
{memoryLimitState && (
|
||||
<>
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mx-1 bg-border data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-px dark:bg-white/10"
|
||||
/>
|
||||
<span className={`shrink-0 text-xs ${memoryCounterClassName}`}>
|
||||
{memoryLimitState.label}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{showEditingActions ? (
|
||||
|
|
@ -634,7 +680,7 @@ export function EditorPanelContent({
|
|||
const saveSucceeded = await handleSave({ silent: true });
|
||||
if (saveSucceeded) setIsEditing(false);
|
||||
}}
|
||||
disabled={saving || !hasUnsavedChanges}
|
||||
disabled={saveDisabled}
|
||||
>
|
||||
<span className={saving ? "opacity-0" : ""}>Save</span>
|
||||
{saving && <Spinner size="xs" className="absolute" />}
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@ import {
|
|||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { MEMORY_HARD_LIMIT, useTeamMemory } from "@/hooks/use-memory";
|
||||
import { getMemoryLimitState, useTeamMemory } from "@/hooks/use-memory";
|
||||
|
||||
interface TeamMemoryManagerProps {
|
||||
searchSpaceId: number;
|
||||
}
|
||||
|
||||
export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) {
|
||||
const { memory, displayMemory, loading, saving, reset } = useTeamMemory(searchSpaceId);
|
||||
const { memory, displayMemory, limits, loading, saving, reset } = useTeamMemory(searchSpaceId);
|
||||
|
||||
const handleClear = async () => {
|
||||
try {
|
||||
|
|
@ -58,11 +58,11 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) {
|
|||
};
|
||||
|
||||
const charCount = memory.length;
|
||||
const limitState = getMemoryLimitState(charCount, limits);
|
||||
|
||||
const getCounterColor = () => {
|
||||
if (charCount > MEMORY_HARD_LIMIT) return "text-red-500";
|
||||
if (charCount > 15_000) return "text-orange-500";
|
||||
if (charCount > 10_000) return "text-yellow-500";
|
||||
if (limitState.level === "error") return "text-red-500";
|
||||
if (limitState.level === "warning") return "text-orange-500";
|
||||
return "text-muted-foreground";
|
||||
};
|
||||
|
||||
|
|
@ -113,13 +113,7 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className={`text-xs shrink-0 ${getCounterColor()}`}>
|
||||
{charCount.toLocaleString()} / {MEMORY_HARD_LIMIT.toLocaleString()}
|
||||
<span className="hidden sm:inline"> characters</span>
|
||||
<span className="sm:hidden"> chars</span>
|
||||
{charCount > 15_000 && charCount <= MEMORY_HARD_LIMIT && " - Approaching limit"}
|
||||
{charCount > MEMORY_HARD_LIMIT && " - Exceeds limit"}
|
||||
</span>
|
||||
<span className={`text-xs shrink-0 ${getCounterColor()}`}>{limitState.label}</span>
|
||||
<div className="flex items-center gap-1.5 sm:gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -4,13 +4,19 @@ import { useCallback, useEffect, useState } from "react";
|
|||
import { z } from "zod";
|
||||
import { baseApiService } from "@/lib/apis/base-api.service";
|
||||
|
||||
export const MEMORY_HARD_LIMIT = 25_000;
|
||||
const MemoryLimitsSchema = z.object({
|
||||
soft: z.number(),
|
||||
hard: z.number(),
|
||||
});
|
||||
|
||||
const MemoryReadSchema = z.object({
|
||||
memory_md: z.string(),
|
||||
limits: MemoryLimitsSchema,
|
||||
});
|
||||
|
||||
type MemoryScope = "user" | "team";
|
||||
export type MemoryLimits = z.infer<typeof MemoryLimitsSchema>;
|
||||
export type MemoryLimitLevel = "ok" | "warning" | "error";
|
||||
|
||||
interface UseMemoryOptions {
|
||||
scope: MemoryScope;
|
||||
|
|
@ -31,8 +37,30 @@ export function stripMemoryDisplayPrefixes(memory: string) {
|
|||
);
|
||||
}
|
||||
|
||||
export function getMemoryLimitState(length: number, limits?: MemoryLimits | null) {
|
||||
if (!limits) {
|
||||
return {
|
||||
level: "ok" as MemoryLimitLevel,
|
||||
label: `${length.toLocaleString()} chars`,
|
||||
isOverLimit: false,
|
||||
};
|
||||
}
|
||||
|
||||
const isOverLimit = length > limits.hard;
|
||||
const isNearLimit = length > limits.soft;
|
||||
const level: MemoryLimitLevel = isOverLimit ? "error" : isNearLimit ? "warning" : "ok";
|
||||
const suffix = isOverLimit ? " - Exceeds limit" : isNearLimit ? " - Approaching limit" : "";
|
||||
|
||||
return {
|
||||
level,
|
||||
label: `${length.toLocaleString()}/${limits.hard.toLocaleString()} chars${suffix}`,
|
||||
isOverLimit,
|
||||
};
|
||||
}
|
||||
|
||||
export function useMemory({ scope, searchSpaceId, autoLoad = true }: UseMemoryOptions) {
|
||||
const [memory, setMemory] = useState("");
|
||||
const [limits, setLimits] = useState<MemoryLimits | null>(null);
|
||||
const [loading, setLoading] = useState(autoLoad);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
|
|
@ -41,6 +69,7 @@ export function useMemory({ scope, searchSpaceId, autoLoad = true }: UseMemoryOp
|
|||
try {
|
||||
const data = await baseApiService.get(getMemoryPath(scope, searchSpaceId), MemoryReadSchema);
|
||||
setMemory(data.memory_md);
|
||||
setLimits(data.limits);
|
||||
return data.memory_md;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
|
|
@ -66,6 +95,7 @@ export function useMemory({ scope, searchSpaceId, autoLoad = true }: UseMemoryOp
|
|||
}
|
||||
);
|
||||
setMemory(data.memory_md);
|
||||
setLimits(data.limits);
|
||||
return data.memory_md;
|
||||
} finally {
|
||||
setSaving(false);
|
||||
|
|
@ -82,6 +112,7 @@ export function useMemory({ scope, searchSpaceId, autoLoad = true }: UseMemoryOp
|
|||
MemoryReadSchema
|
||||
);
|
||||
setMemory(data.memory_md);
|
||||
setLimits(data.limits);
|
||||
return data.memory_md;
|
||||
} finally {
|
||||
setSaving(false);
|
||||
|
|
@ -91,6 +122,7 @@ export function useMemory({ scope, searchSpaceId, autoLoad = true }: UseMemoryOp
|
|||
return {
|
||||
memory,
|
||||
setMemory,
|
||||
limits,
|
||||
displayMemory: stripMemoryDisplayPrefixes(memory),
|
||||
loading,
|
||||
saving,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue