UI: project as seperated workspace

2026-03-22 16:48:41 +08:00
parent 995de29981
commit 6f074df40e
9 changed files with 206 additions and 31 deletions
@@ -42,6 +42,8 @@ class SessionAliasStore:
                conn.execute("ALTER TABLE session_cache ADD COLUMN pinned INTEGER NOT NULL DEFAULT 0")
            if "archived" not in cols:
                conn.execute("ALTER TABLE session_cache ADD COLUMN archived INTEGER NOT NULL DEFAULT 0")
+            if "project_id" not in cols:
+                conn.execute("ALTER TABLE session_cache ADD COLUMN project_id INTEGER")

    def sync_sessions(self, sessions: list[dict[str, Any]]) -> None:
        now = datetime.now(timezone.utc).isoformat()
@@ -75,20 +77,31 @@ class SessionAliasStore:
            else:
                conn.execute("DELETE FROM session_cache")

-    def list_cached_sessions(self) -> list[dict[str, Any]]:
+    def list_cached_sessions(self, project_id: int | None = None) -> list[dict[str, Any]]:
        with self._connect() as conn:
-            rows = conn.execute(
-                """
-                SELECT session_key, created_at, updated_at, alias, pinned, archived
-                FROM session_cache
-                ORDER BY pinned DESC, archived ASC, updated_at DESC
-                """
-            ).fetchall()
+            if project_id is not None:
+                rows = conn.execute(
+                    """
+                    SELECT session_key, created_at, updated_at, alias, pinned, archived, project_id
+                    FROM session_cache
+                    WHERE project_id = ? OR project_id IS NULL
+                    ORDER BY pinned DESC, archived ASC, updated_at DESC
+                    """,
+                    (project_id,)
+                ).fetchall()
+            else:
+                rows = conn.execute(
+                    """
+                    SELECT session_key, created_at, updated_at, alias, pinned, archived, project_id
+                    FROM session_cache
+                    ORDER BY pinned DESC, archived ASC, updated_at DESC
+                    """
+                ).fetchall()
        return [self._row_to_session_item(row) for row in rows]

-    def sync_and_list(self, sessions: list[dict[str, Any]]) -> list[dict[str, Any]]:
+    def sync_and_list(self, sessions: list[dict[str, Any]], project_id: int | None = None) -> list[dict[str, Any]]:
        self.sync_sessions(sessions)
-        return self.list_cached_sessions()
+        return self.list_cached_sessions(project_id)

    def set_alias(self, session_key: str, alias: str) -> None:
        now = datetime.now(timezone.utc).isoformat()
@@ -111,32 +124,36 @@ class SessionAliasStore:
        alias: str | None = None,
        pinned: bool | None = None,
        archived: bool | None = None,
+        project_id: int | None = None,
    ) -> dict[str, Any]:
        now = datetime.now(timezone.utc).isoformat()
        with self._connect() as conn:
            row = conn.execute(
-                "SELECT alias, pinned, archived FROM session_cache WHERE session_key = ?",
+                "SELECT alias, pinned, archived, project_id FROM session_cache WHERE session_key = ?",
                (session_key,),
            ).fetchone()
            current_alias = (str(row["alias"]) if row and row["alias"] else "")
            current_pinned = bool(row["pinned"]) if row else False
            current_archived = bool(row["archived"]) if row else False
+            current_project_id = row["project_id"] if row and "project_id" in row.keys() else None
            next_alias = current_alias if alias is None else alias.strip()
            next_pinned = current_pinned if pinned is None else bool(pinned)
            next_archived = current_archived if archived is None else bool(archived)
+            next_project_id = current_project_id if project_id is None else project_id
            conn.execute(
                """
-                INSERT INTO session_cache (session_key, created_at, updated_at, alias, pinned, archived, last_seen_at)
-                VALUES (?, '', '', ?, ?, ?, ?)
+                INSERT INTO session_cache (session_key, created_at, updated_at, alias, pinned, archived, project_id, last_seen_at)
+                VALUES (?, '', '', ?, ?, ?, ?, ?)
                ON CONFLICT(session_key) DO UPDATE SET
                  alias = excluded.alias,
                  pinned = excluded.pinned,
                  archived = excluded.archived,
+                  project_id = excluded.project_id,
                  last_seen_at = excluded.last_seen_at
                """,
-                (session_key, next_alias, int(next_pinned), int(next_archived), now),
+                (session_key, next_alias, int(next_pinned), int(next_archived), next_project_id, now),
            )
-        return {"alias": next_alias or None, "pinned": next_pinned, "archived": next_archived}
+        return {"alias": next_alias or None, "pinned": next_pinned, "archived": next_archived, "project_id": next_project_id}

    def get_alias(self, session_key: str) -> str | None:
        with self._connect() as conn:
@@ -159,6 +176,7 @@ class SessionAliasStore:
        title = alias or fallback
        pinned = bool(row["pinned"]) if "pinned" in row.keys() else False
        archived = bool(row["archived"]) if "archived" in row.keys() else False
+        project_id = row["project_id"] if "project_id" in row.keys() else None
        return {
            "key": row["session_key"],
            "created_at": row["created_at"],
@@ -167,6 +185,7 @@ class SessionAliasStore:
            "alias": alias or None,
            "pinned": pinned,
            "archived": archived,
+            "project_id": project_id,
        }


@@ -116,6 +116,7 @@ class SessionAliasUpdateRequest(BaseModel):
    title: Optional[str] = None
    pinned: Optional[bool] = None
    archived: Optional[bool] = None
+    project_id: Optional[int] = None


 class BatchDeleteRequest(BaseModel):
@@ -299,11 +300,11 @@ async def nanobot_chat_stream(request: ChatRequest):
    )

@app.get("/nanobot/sessions")
-def get_sessions():
+def get_sessions(project_id: Optional[int] = None):
    if not nanobot_service.agent:
-        return session_alias_store.list_cached_sessions()
+        return session_alias_store.list_cached_sessions(project_id=project_id)
    sessions = nanobot_service.agent.sessions.list_sessions()
-    return session_alias_store.sync_and_list(sessions)
+    return session_alias_store.sync_and_list(sessions, project_id=project_id)

@app.get("/nanobot/sessions/{session_id}")
 def get_session(session_id: str):
@@ -320,12 +321,23 @@ def get_session(session_id: str):
        "messages": session.messages
    }

+class EnsureSessionRequest(BaseModel):
+    project_id: Optional[int] = None
+
@app.post("/nanobot/sessions/{session_id}/ensure")
-def ensure_session(session_id: str):
+def ensure_session(session_id: str, request: EnsureSessionRequest = EnsureSessionRequest()):
    if not nanobot_service.agent:
        raise HTTPException(status_code=400, detail="Nanobot not running")
    session = nanobot_service.agent.sessions.get_or_create(session_id)
    nanobot_service.agent.sessions.save(session)
+    
+    # Save project_id to the alias store immediately upon creation
+    if request.project_id is not None:
+        session_alias_store.update_alias_meta(
+            session_key=session_id,
+            project_id=request.project_id
+        )
+        
    alias = session_alias_store.get_alias(session_id)
    return {
        "key": session.key,
@@ -333,6 +345,7 @@ def ensure_session(session_id: str):
        "updated_at": session.updated_at,
        "metadata": session.metadata,
        "alias": alias,
+        "project_id": request.project_id
    }

@app.delete("/nanobot/sessions/{session_id}")
@@ -382,6 +395,7 @@ def update_session(session_id: str, payload: SessionAliasUpdateRequest):
        alias=payload.title,
        pinned=payload.pinned,
        archived=payload.archived,
+        project_id=payload.project_id,
    )
    return {"status": "success", **updated}

@@ -32,9 +32,11 @@ function MainLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen w-full bg-background text-foreground overflow-hidden">
      <Sidebar />
-      <main className="flex-1 flex flex-col overflow-hidden h-screen">
-        <div className="flex justify-center border-b">
-          <ProjectSwitcher />
+      <main className="flex-1 flex flex-col overflow-hidden h-screen relative">
+        <div className="absolute top-0 left-0 right-0 h-14 flex justify-center items-center pointer-events-none z-30">
+          <div className="pointer-events-auto">
+            <ProjectSwitcher />
+          </div>
        </div>
        <div className="flex-1 overflow-hidden">
          {children}
@@ -40,7 +40,7 @@ export function ProjectSwitcher() {
  };

  return (
-    <div className="flex items-center gap-2 px-4 py-2 bg-background h-12">
+    <div className="flex items-center gap-2 bg-transparent h-10">
      <DropdownMenu>
        <DropdownMenuTrigger className="flex h-8 items-center gap-1 rounded-md px-2 font-semibold hover:bg-accent hover:text-accent-foreground outline-none transition-colors">
          <Folder className="h-4 w-4 mr-1 text-blue-500" />
@@ -359,7 +359,7 @@ function DashboardSection({
                    className="text-red-600 focus:text-red-600 focus:bg-red-50"
                  >
                    <Trash2 className="mr-2 h-4 w-4" />
-                    <span>{t('deleteSession')}</span>
+                    <span>{t('delete')}</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
                </DropdownMenu>
@@ -409,7 +409,10 @@ function SidebarBody() {

  const fetchSessions = async () => {
    try {
-      const data = await api.get<SessionInfo[]>("/nanobot/sessions");
+      const url = currentProject 
+        ? `/nanobot/sessions?project_id=${currentProject.id}`
+        : "/nanobot/sessions";
+      const data = await api.get<SessionInfo[]>(url);
      setSessions(data);
    } catch (e) {
      console.error("Failed to fetch sessions", e);
@@ -418,7 +421,7 @@ function SidebarBody() {

  useEffect(() => {
    fetchSessions();
-  }, [location.pathname, location.search]);
+  }, [location.pathname, location.search, currentProject?.id]);

  useEffect(() => {
    const onFocus = () => fetchSessions();
@@ -453,7 +456,8 @@ function SidebarBody() {
  const handleNewThread = async () => {
    const newSessionId = `api:${Date.now()}`;
    try {
-      await api.post(`/nanobot/sessions/${encodeURIComponent(newSessionId)}/ensure`, {});
+      const payload = currentProject ? { project_id: currentProject.id } : {};
+      await api.post(`/nanobot/sessions/${encodeURIComponent(newSessionId)}/ensure`, payload);
      await fetchSessions();
      window.dispatchEvent(new Event("nanobot:sessions-changed"));
    } catch (e) {
@@ -8,6 +8,7 @@
  "unpin": "Unpin",
  "archive": "Archive",
  "unarchive": "Unarchive",
+  "delete": "Delete",
  "deleteSession": "Delete Session",
  "confirmDeleteSession": "Are you sure you want to delete this session?",
  "confirmBatchDeleteSessions": "Are you sure you want to delete the selected {{count}} threads?",
@@ -8,6 +8,7 @@
  "unpin": "取消置顶",
  "archive": "归档",
  "unarchive": "取消归档",
+  "delete": "删除",
  "deleteSession": "删除会话",
  "confirmDeleteSession": "确定要删除这个会话吗？",
  "confirmBatchDeleteSessions": "确定要删除选中的 {{count}} 个会话吗？",
@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Responsive, WidthProvider } from 'react-grid-layout/legacy';
 import { useDashboardStore } from '../store/dashboardStore';
@@ -7,7 +7,9 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/com
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { X } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { X, Type, AlignLeft, AlignCenter, AlignRight, Bold, Italic, Underline } from "lucide-react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts';
 import { VegaChart } from "@/components/VegaChart";
 import 'react-grid-layout/css/styles.css';
@@ -45,9 +47,13 @@ function inferChartKeys(data: Record<string, unknown>[]) {

 export function Dashboard() {
  const { t } = useTranslation();
-  const { dashboards, activeDashboardId, removeChart, updateLayout, loadDashboards } = useDashboardStore();
+  const { dashboards, activeDashboardId, removeChart, updateLayout, loadDashboards, renameDashboard, updateDashboardTitleStyle } = useDashboardStore();
  const { currentProject } = useProjectStore();

+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editTitle, setEditTitle] = useState("");
+  const titleInputRef = useRef<HTMLInputElement>(null);
+
  useEffect(() => {
    if (currentProject) {
      loadDashboards(currentProject.id);
@@ -85,6 +91,19 @@ export function Dashboard() {
    }
  };

+  const handleTitleSubmit = () => {
+    if (activeDashboard && currentProject && editTitle.trim()) {
+      renameDashboard(activeDashboard.id, editTitle.trim(), currentProject.id);
+    }
+    setIsEditingTitle(false);
+  };
+
+  const handleStyleChange = (key: string, value: string) => {
+    if (activeDashboard && currentProject) {
+      updateDashboardTitleStyle(activeDashboard.id, { [key]: value }, currentProject.id);
+    }
+  };
+
  if (!currentProject) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
@@ -113,7 +132,106 @@ export function Dashboard() {

  return (
    <div className="p-4 h-full overflow-y-auto">
-      <h1 className="text-2xl font-bold mb-4">{activeDashboard.name || t('dashboardMenu')}</h1>
+      <div className="mb-4 flex items-center justify-between group">
+        {isEditingTitle ? (
+          <Input
+            ref={titleInputRef}
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            onBlur={handleTitleSubmit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleTitleSubmit();
+              if (e.key === 'Escape') setIsEditingTitle(false);
+            }}
+            className="text-2xl font-bold h-auto py-1 px-2 -ml-2 bg-transparent border-transparent hover:border-zinc-200 focus:border-indigo-500 focus:ring-indigo-500 max-w-md"
+          />
+        ) : (
+          <div className="flex items-center gap-2">
+            <h1 
+              className="text-2xl font-bold cursor-pointer hover:bg-zinc-100 px-2 py-1 -ml-2 rounded transition-colors"
+              style={{
+                fontSize: activeDashboard.titleStyle?.fontSize || '1.5rem',
+                fontWeight: activeDashboard.titleStyle?.fontWeight || '700',
+                color: activeDashboard.titleStyle?.color || 'inherit',
+                fontStyle: activeDashboard.titleStyle?.fontStyle || 'normal',
+                textDecoration: activeDashboard.titleStyle?.textDecoration || 'none',
+                textAlign: activeDashboard.titleStyle?.textAlign || 'left',
+              }}
+              onClick={() => {
+                setEditTitle(activeDashboard.name || t('dashboardMenu'));
+                setIsEditingTitle(true);
+                setTimeout(() => titleInputRef.current?.focus(), 0);
+              }}
+            >
+              {activeDashboard.name || t('dashboardMenu')}
+            </h1>
+            <Popover>
+              <PopoverTrigger>
+                <div className="h-8 w-8 flex items-center justify-center rounded-md hover:bg-zinc-100 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <Type className="h-4 w-4 text-zinc-500" />
+                </div>
+              </PopoverTrigger>
+              <PopoverContent className="w-64 p-3" align="start">
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-xs font-medium text-zinc-500">{t('fontSize') || 'Font Size'}</label>
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.25rem')}>S</Button>
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.5rem')}>M</Button>
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.875rem')}>L</Button>
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '2.25rem')}>XL</Button>
+                    </div>
+                  </div>
+                  
+                  <div className="space-y-2">
+                    <label className="text-xs font-medium text-zinc-500">{t('textStyle') || 'Text Style'}</label>
+                    <div className="flex items-center gap-2">
+                      <Button 
+                        variant={activeDashboard.titleStyle?.fontWeight === 'normal' ? 'default' : 'outline'} 
+                        size="icon" 
+                        className="h-8 w-8"
+                        onClick={() => handleStyleChange('fontWeight', activeDashboard.titleStyle?.fontWeight === 'normal' ? '700' : 'normal')}
+                      >
+                        <Bold className="h-4 w-4" />
+                      </Button>
+                      <Button 
+                        variant={activeDashboard.titleStyle?.fontStyle === 'italic' ? 'default' : 'outline'} 
+                        size="icon" 
+                        className="h-8 w-8"
+                        onClick={() => handleStyleChange('fontStyle', activeDashboard.titleStyle?.fontStyle === 'italic' ? 'normal' : 'italic')}
+                      >
+                        <Italic className="h-4 w-4" />
+                      </Button>
+                      <Button 
+                        variant={activeDashboard.titleStyle?.textDecoration === 'underline' ? 'default' : 'outline'} 
+                        size="icon" 
+                        className="h-8 w-8"
+                        onClick={() => handleStyleChange('textDecoration', activeDashboard.titleStyle?.textDecoration === 'underline' ? 'none' : 'underline')}
+                      >
+                        <Underline className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-xs font-medium text-zinc-500">{t('textColor') || 'Text Color'}</label>
+                    <div className="flex items-center gap-2">
+                      {['inherit', '#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6'].map(color => (
+                        <button
+                          key={color}
+                          className={`w-6 h-6 rounded-full border border-zinc-200 flex items-center justify-center ${activeDashboard.titleStyle?.color === color ? 'ring-2 ring-indigo-500 ring-offset-1' : ''}`}
+                          style={{ backgroundColor: color === 'inherit' ? '#18181b' : color }}
+                          onClick={() => handleStyleChange('color', color)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+      </div>
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
@@ -17,6 +17,14 @@ export interface ChartConfig {
 export interface DashboardConfig {
  id: string;
  name: string;
+  titleStyle?: {
+    fontSize?: string;
+    fontWeight?: string;
+    color?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    fontStyle?: string;
+    textDecoration?: string;
+  };
  createdAt: number;
  charts: ChartConfig[];
 }
@@ -28,6 +36,7 @@ interface DashboardState {
  createDashboard: (name: string, projectId: number) => string;
  deleteDashboard: (id: string, projectId: number) => void;
  renameDashboard: (id: string, newName: string, projectId: number) => void;
+  updateDashboardTitleStyle: (id: string, style: DashboardConfig['titleStyle'], projectId: number) => void;
  setActiveDashboard: (id: string | null) => void;
  addChart: (chart: Omit<ChartConfig, 'layout'>, dashboardId: string, projectId: number) => void;
  removeChart: (chartId: string, dashboardId: string, projectId: number) => void;
@@ -133,6 +142,13 @@ export const useDashboardStore = create<DashboardState>((set) => ({
    saveDashboardsToStorage(nextDashboards, projectId);
    return { dashboards: nextDashboards };
  }),
+  updateDashboardTitleStyle: (id, style, projectId) => set((state) => {
+    const nextDashboards = state.dashboards.map((d) => 
+      d.id === id ? { ...d, titleStyle: { ...d.titleStyle, ...style } } : d
+    );
+    saveDashboardsToStorage(nextDashboards, projectId);
+    return { dashboards: nextDashboards };
+  }),
  setActiveDashboard: (id) => set({ activeDashboardId: id }),
  addChart: (chart, dashboardId, projectId) => set((state) => {
    const nextDashboards = state.dashboards.map((d) => {