mirror of
https://github.com/willchen96/mike.git
synced 2026-06-20 21:18:07 +02:00
Sync deployment and project page fixes
This commit is contained in:
willchen96
parent
91d0c2a089
commit
f39f175273
13 changed files with 1444 additions and 1315 deletions
180
frontend/src/app/components/projects/ProjectAssistantTab.tsx
Normal file
180
frontend/src/app/components/projects/ProjectAssistantTab.tsx
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
"use client";
|
||||
|
||||
import { type Dispatch, type SetStateAction } from "react";
|
||||
import { MessageSquare } from "lucide-react";
|
||||
import { RowActions } from "@/app/components/shared/RowActions";
|
||||
import type { MikeChat } from "@/app/components/shared/types";
|
||||
import { CHECK_W, formatDate, NAME_COL_W } from "./ProjectPageParts";
|
||||
|
||||
export function ProjectAssistantTab({
|
||||
chats,
|
||||
filteredChats,
|
||||
selectedChatIds,
|
||||
allChatsSelected,
|
||||
someChatsSelected,
|
||||
renamingChatId,
|
||||
renameChatValue,
|
||||
currentUserId,
|
||||
onCreateChat,
|
||||
onOpenChat,
|
||||
onDeleteChat,
|
||||
onOwnerOnlyAction,
|
||||
submitChatRename,
|
||||
setSelectedChatIds,
|
||||
setRenamingChatId,
|
||||
setRenameChatValue,
|
||||
}: {
|
||||
chats: MikeChat[];
|
||||
filteredChats: MikeChat[];
|
||||
selectedChatIds: string[];
|
||||
allChatsSelected: boolean;
|
||||
someChatsSelected: boolean;
|
||||
renamingChatId: string | null;
|
||||
renameChatValue: string;
|
||||
currentUserId?: string | null;
|
||||
onCreateChat: () => void;
|
||||
onOpenChat: (chatId: string) => void;
|
||||
onDeleteChat: (chat: MikeChat) => Promise<void> | void;
|
||||
onOwnerOnlyAction: (action: string) => void;
|
||||
submitChatRename: (chatId: string) => Promise<void> | void;
|
||||
setSelectedChatIds: Dispatch<SetStateAction<string[]>>;
|
||||
setRenamingChatId: Dispatch<SetStateAction<string | null>>;
|
||||
setRenameChatValue: Dispatch<SetStateAction<string>>;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center h-8 pr-8 border-b border-gray-200 text-xs text-gray-500 font-medium select-none">
|
||||
<div
|
||||
className={`sticky left-0 z-[60] ${CHECK_W} relative bg-white flex items-center justify-center self-stretch before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-white`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allChatsSelected}
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = someChatsSelected;
|
||||
}}
|
||||
onChange={() => {
|
||||
if (allChatsSelected) setSelectedChatIds([]);
|
||||
else setSelectedChatIds(filteredChats.map((c) => c.id));
|
||||
}}
|
||||
className="h-2.5 w-2.5 rounded border-gray-200 cursor-pointer accent-black"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`sticky left-8 z-[60] ${NAME_COL_W} bg-white pl-2 text-left`}
|
||||
>
|
||||
Chats
|
||||
</div>
|
||||
<div className="ml-auto w-32 shrink-0 text-left">Created</div>
|
||||
<div className="w-8 shrink-0" />
|
||||
</div>
|
||||
{chats.length === 0 ? (
|
||||
<div className="flex flex-col items-start py-24 w-full max-w-xs mx-auto">
|
||||
<MessageSquare className="h-8 w-8 text-gray-300 mb-4" />
|
||||
<p className="text-2xl font-medium font-serif text-gray-900">
|
||||
Assistant
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-gray-400 max-w-xs">
|
||||
Ask questions and get answers grounded in the documents
|
||||
in this project.
|
||||
</p>
|
||||
<button
|
||||
onClick={onCreateChat}
|
||||
className="mt-4 inline-flex items-center gap-1 rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white hover:bg-gray-700 transition-colors shadow-md"
|
||||
>
|
||||
+ Create New
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{filteredChats.map((chat) => (
|
||||
<div
|
||||
key={chat.id}
|
||||
onClick={() => {
|
||||
if (renamingChatId === chat.id) return;
|
||||
onOpenChat(chat.id);
|
||||
}}
|
||||
className="group flex items-center h-10 pr-8 border-b border-gray-50 hover:bg-gray-50 cursor-pointer transition-colors"
|
||||
>
|
||||
<div
|
||||
className={`sticky left-0 z-[60] ${CHECK_W} p-2 flex items-center justify-center ${
|
||||
selectedChatIds.includes(chat.id)
|
||||
? "bg-gray-50"
|
||||
: "bg-white"
|
||||
} group-hover:bg-gray-50`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedChatIds.includes(chat.id)}
|
||||
onChange={() =>
|
||||
setSelectedChatIds((prev) =>
|
||||
prev.includes(chat.id)
|
||||
? prev.filter((x) => x !== chat.id)
|
||||
: [...prev, chat.id],
|
||||
)
|
||||
}
|
||||
className="h-2.5 w-2.5 rounded border-gray-200 cursor-pointer accent-black"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`sticky left-8 z-[60] ${NAME_COL_W} p-2 ${
|
||||
selectedChatIds.includes(chat.id)
|
||||
? "bg-gray-50"
|
||||
: "bg-white"
|
||||
} group-hover:bg-gray-50`}
|
||||
>
|
||||
{renamingChatId === chat.id ? (
|
||||
<input
|
||||
autoFocus
|
||||
value={renameChatValue}
|
||||
onChange={(e) =>
|
||||
setRenameChatValue(e.target.value)
|
||||
}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter")
|
||||
void submitChatRename(chat.id);
|
||||
if (e.key === "Escape")
|
||||
setRenamingChatId(null);
|
||||
}}
|
||||
onBlur={() => void submitChatRename(chat.id)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-full text-sm text-gray-800 bg-transparent outline-none"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-sm text-gray-800 truncate block">
|
||||
{chat.title ?? "Untitled Chat"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="ml-auto w-32 shrink-0 text-sm text-gray-500 truncate">
|
||||
{formatDate(chat.created_at)}
|
||||
</div>
|
||||
<div
|
||||
className="w-8 shrink-0 flex justify-end"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<RowActions
|
||||
onRename={() => {
|
||||
if (
|
||||
currentUserId &&
|
||||
chat.user_id !== currentUserId
|
||||
) {
|
||||
onOwnerOnlyAction("rename this chat");
|
||||
return;
|
||||
}
|
||||
setRenameChatValue(
|
||||
chat.title ?? "Untitled Chat",
|
||||
);
|
||||
setRenamingChatId(chat.id);
|
||||
}}
|
||||
onDelete={() => onDeleteChat(chat)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
454
frontend/src/app/components/projects/ProjectPageParts.tsx
Normal file
454
frontend/src/app/components/projects/ProjectPageParts.tsx
Normal file
|
|
@ -0,0 +1,454 @@
|
|||
"use client";
|
||||
|
||||
import { type CSSProperties, useState } from "react";
|
||||
import {
|
||||
Download,
|
||||
File,
|
||||
FileText,
|
||||
Loader2,
|
||||
Pencil,
|
||||
Plus,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { HeaderSearchBtn } from "@/app/components/shared/HeaderSearchBtn";
|
||||
import { RenameableTitle } from "@/app/components/shared/RenameableTitle";
|
||||
import type { MikeProject } from "@/app/components/shared/types";
|
||||
import type { MikeDocumentVersion } from "@/app/lib/mikeApi";
|
||||
|
||||
export type ProjectTab = "documents" | "assistant" | "reviews";
|
||||
|
||||
export type ProjectContextMenu = {
|
||||
x: number;
|
||||
y: number;
|
||||
docId?: string | null;
|
||||
folderId: string | null;
|
||||
showFolderActions: boolean;
|
||||
};
|
||||
|
||||
export const CHECK_W = "w-8 shrink-0";
|
||||
export const NAME_COL_W = "w-[300px] shrink-0";
|
||||
export const DOC_NAME_COL_W =
|
||||
"w-[260px] sm:w-[300px] md:w-[360px] lg:w-[420px] xl:w-[500px] 2xl:w-[560px] shrink-0";
|
||||
|
||||
const TREE_CONTROL_WIDTH_PX = 32;
|
||||
const TREE_NAME_PADDING_PX = 8;
|
||||
|
||||
function treeControlWidth(depth: number) {
|
||||
return TREE_CONTROL_WIDTH_PX * (Math.max(0, depth) + 1);
|
||||
}
|
||||
|
||||
export function treeControlCellStyle(
|
||||
depth: number,
|
||||
): CSSProperties | undefined {
|
||||
if (depth <= 0) return undefined;
|
||||
const width = treeControlWidth(depth);
|
||||
return {
|
||||
justifyContent: "flex-start",
|
||||
minWidth: width,
|
||||
paddingLeft: TREE_NAME_PADDING_PX + depth * TREE_CONTROL_WIDTH_PX,
|
||||
width,
|
||||
};
|
||||
}
|
||||
|
||||
export function treeNameCellStyle(depth: number): CSSProperties | undefined {
|
||||
if (depth <= 0) return undefined;
|
||||
return { left: treeControlWidth(depth) };
|
||||
}
|
||||
|
||||
export function formatBytes(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
export function formatDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString(undefined, {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
export function DocIcon({ fileType }: { fileType: string | null }) {
|
||||
if (fileType === "pdf")
|
||||
return <FileText className="h-4 w-4 text-red-600 shrink-0" />;
|
||||
if (fileType === "docx" || fileType === "doc")
|
||||
return <File className="h-4 w-4 text-blue-600 shrink-0" />;
|
||||
return <File className="h-4 w-4 text-gray-500 shrink-0" />;
|
||||
}
|
||||
|
||||
export function DocVersionHistory({
|
||||
docId,
|
||||
filename,
|
||||
loading,
|
||||
versions,
|
||||
depth = 0,
|
||||
onDownloadVersion,
|
||||
onOpenVersion,
|
||||
onRenameVersion,
|
||||
}: {
|
||||
docId: string;
|
||||
filename: string;
|
||||
loading: boolean;
|
||||
versions: MikeDocumentVersion[];
|
||||
depth?: number;
|
||||
onDownloadVersion: (
|
||||
docId: string,
|
||||
versionId: string,
|
||||
filename: string,
|
||||
) => void;
|
||||
onOpenVersion?: (versionId: string, versionLabel: string) => void;
|
||||
onRenameVersion?: (
|
||||
versionId: string,
|
||||
displayName: string | null,
|
||||
) => Promise<void> | void;
|
||||
}) {
|
||||
const [editingVersionId, setEditingVersionId] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
const [editingValue, setEditingValue] = useState("");
|
||||
|
||||
const commit = async (versionId: string) => {
|
||||
const trimmed = editingValue.trim();
|
||||
setEditingVersionId(null);
|
||||
const next = trimmed.length > 0 ? trimmed : null;
|
||||
await onRenameVersion?.(versionId, next);
|
||||
};
|
||||
|
||||
if (loading && versions.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center h-9 border-b border-gray-50 text-xs text-gray-500 bg-gray-50/60">
|
||||
<div
|
||||
className={`sticky left-0 z-[60] ${CHECK_W} bg-gray-50/60 self-stretch`}
|
||||
style={treeControlCellStyle(depth)}
|
||||
/>
|
||||
<div
|
||||
className={`sticky left-8 z-[60] ${DOC_NAME_COL_W} bg-gray-50/60 p-2`}
|
||||
style={treeNameCellStyle(depth)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin text-gray-400" />
|
||||
<span>Loading versions…</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (versions.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center h-9 border-b border-gray-50 text-xs text-gray-400 bg-gray-50/60">
|
||||
<div
|
||||
className={`sticky left-0 z-[60] ${CHECK_W} bg-gray-50/60 self-stretch`}
|
||||
style={treeControlCellStyle(depth)}
|
||||
/>
|
||||
<div
|
||||
className={`sticky left-8 z-[60] ${DOC_NAME_COL_W} bg-gray-50/60 p-2`}
|
||||
style={treeNameCellStyle(depth)}
|
||||
>
|
||||
<div>No version history.</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ordered = [...versions].reverse();
|
||||
return (
|
||||
<>
|
||||
{ordered.map((v) => {
|
||||
const numberLabel =
|
||||
typeof v.version_number === "number" && v.version_number >= 1
|
||||
? `${v.version_number}`
|
||||
: v.source === "upload"
|
||||
? "Original"
|
||||
: "—";
|
||||
const displayLabel = v.display_name?.trim() || numberLabel;
|
||||
const dt = new Date(v.created_at);
|
||||
const dateLabel = Number.isNaN(dt.valueOf())
|
||||
? ""
|
||||
: dt.toLocaleString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
const isEditing = editingVersionId === v.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`ver-${docId}-${v.id}`}
|
||||
onClick={() => {
|
||||
if (isEditing) return;
|
||||
onOpenVersion?.(v.id, displayLabel);
|
||||
}}
|
||||
className="group flex items-center h-9 pr-8 border-b border-gray-50 bg-gray-50/60 text-xs text-gray-600 cursor-pointer hover:bg-gray-100/80 transition-colors"
|
||||
>
|
||||
<div
|
||||
className={`sticky left-0 z-[60] ${CHECK_W} bg-gray-50/60 group-hover:bg-gray-100/80 self-stretch`}
|
||||
style={treeControlCellStyle(depth)}
|
||||
/>
|
||||
<div
|
||||
className={`sticky left-8 z-[60] ${DOC_NAME_COL_W} bg-gray-50/60 group-hover:bg-gray-100/80 p-2`}
|
||||
style={treeNameCellStyle(depth)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="shrink-0 text-gray-400">↳</span>
|
||||
{isEditing ? (
|
||||
<input
|
||||
autoFocus
|
||||
value={editingValue}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onChange={(e) =>
|
||||
setEditingValue(e.target.value)
|
||||
}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
void commit(v.id);
|
||||
} else if (e.key === "Escape") {
|
||||
setEditingVersionId(null);
|
||||
}
|
||||
}}
|
||||
onBlur={() => void commit(v.id)}
|
||||
className="min-w-0 flex-1 max-w-[240px] border-b border-gray-300 bg-transparent text-xs text-gray-800 outline-none focus:border-gray-500"
|
||||
/>
|
||||
) : (
|
||||
<span className="font-medium text-gray-700 truncate">
|
||||
{displayLabel}
|
||||
</span>
|
||||
)}
|
||||
{!isEditing && onRenameVersion && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setEditingVersionId(v.id);
|
||||
setEditingValue(v.display_name ?? "");
|
||||
}}
|
||||
title="Rename version"
|
||||
className="shrink-0 rounded p-0.5 text-gray-400 opacity-0 group-hover:opacity-100 hover:text-gray-700 hover:bg-gray-200 transition"
|
||||
>
|
||||
<Pencil className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
<span className="text-gray-400 truncate">
|
||||
{dateLabel}
|
||||
</span>
|
||||
<span className="text-gray-300 shrink-0">·</span>
|
||||
<span className="text-gray-400 truncate">
|
||||
{v.source}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto w-20 shrink-0" />
|
||||
<div className="w-24 shrink-0" />
|
||||
<div className="ml-auto w-20 shrink-0" />
|
||||
<div className="w-8 shrink-0 flex justify-end">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDownloadVersion(docId, v.id, filename);
|
||||
}}
|
||||
title="Download this version"
|
||||
className="flex items-center justify-center w-6 h-6 rounded text-gray-500 hover:text-gray-800 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProjectPageSkeleton() {
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto bg-white">
|
||||
<div className="flex items-start justify-between px-8 py-4">
|
||||
<div className="flex items-center gap-1.5 text-2xl font-medium font-serif">
|
||||
<span className="text-gray-400">Projects</span>
|
||||
<span className="text-gray-300">›</span>
|
||||
<div className="h-6 w-40 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 w-16 rounded bg-gray-100 animate-pulse" />
|
||||
<div className="h-8 w-28 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center h-10 px-8 border-b border-gray-200 gap-5">
|
||||
<div className="h-3 w-20 rounded bg-gray-100 animate-pulse" />
|
||||
<div className="h-3 w-10 rounded bg-gray-100 animate-pulse" />
|
||||
<div className="h-3 w-24 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
<div className="flex items-center h-8 pr-8 border-b border-gray-200">
|
||||
<div className="w-8 shrink-0" />
|
||||
<div className="flex-1 min-w-0 pl-3 pr-4">
|
||||
<div className="h-2.5 w-8 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
<div className="w-20 shrink-0">
|
||||
<div className="h-2.5 w-8 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
<div className="w-24 shrink-0">
|
||||
<div className="h-2.5 w-8 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
<div className="w-8 shrink-0" />
|
||||
</div>
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center h-10 pr-8 border-b border-gray-50"
|
||||
>
|
||||
<div className="w-8 shrink-0" />
|
||||
<div className="flex-1 min-w-0 pl-3 pr-4">
|
||||
<div className="h-3.5 w-56 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
<div className="w-20 shrink-0">
|
||||
<div className="h-3 w-8 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
<div className="w-24 shrink-0">
|
||||
<div className="h-3 w-12 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
<div className="w-8 shrink-0" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProjectPageHeader({
|
||||
project,
|
||||
tab,
|
||||
search,
|
||||
creatingChat,
|
||||
creatingReview,
|
||||
docsCount,
|
||||
onBackToProjects,
|
||||
onOpenDocuments,
|
||||
onTitleCommit,
|
||||
onSearchChange,
|
||||
onOpenPeople,
|
||||
onNewChat,
|
||||
onNewReview,
|
||||
}: {
|
||||
project: MikeProject;
|
||||
tab: ProjectTab;
|
||||
search: string;
|
||||
creatingChat: boolean;
|
||||
creatingReview: boolean;
|
||||
docsCount: number;
|
||||
onBackToProjects: () => void;
|
||||
onOpenDocuments: () => void;
|
||||
onTitleCommit: (newName: string) => void | Promise<void>;
|
||||
onSearchChange: (search: string) => void;
|
||||
onOpenPeople: () => void;
|
||||
onNewChat: () => void;
|
||||
onNewReview: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-start justify-between px-8 py-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 text-2xl font-medium font-serif">
|
||||
<button
|
||||
onClick={onBackToProjects}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
Projects
|
||||
</button>
|
||||
<span className="text-gray-300">›</span>
|
||||
{tab !== "documents" ? (
|
||||
<button
|
||||
onClick={onOpenDocuments}
|
||||
className="text-gray-500 hover:text-gray-700 transition-colors"
|
||||
>
|
||||
{project.name}
|
||||
{project.cm_number ? (
|
||||
<span className="ml-1 text-gray-400">
|
||||
(#{project.cm_number})
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
) : (
|
||||
<RenameableTitle
|
||||
value={project.name}
|
||||
onCommit={onTitleCommit}
|
||||
suffix={
|
||||
project.cm_number ? (
|
||||
<span className="ml-1 text-gray-400">
|
||||
(#{project.cm_number})
|
||||
</span>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{tab !== "documents" && (
|
||||
<>
|
||||
<span className="text-gray-300">›</span>
|
||||
<span className="text-gray-900">
|
||||
{tab === "assistant"
|
||||
? "Assistant"
|
||||
: "Tabular Reviews"}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<HeaderSearchBtn
|
||||
value={search}
|
||||
onChange={onSearchChange}
|
||||
placeholder="Search…"
|
||||
/>
|
||||
<button
|
||||
onClick={onOpenPeople}
|
||||
className="flex h-8 w-8 items-center justify-center text-sm text-gray-500 transition-colors hover:text-gray-900 cursor-pointer"
|
||||
title="People with access"
|
||||
aria-label="People with access"
|
||||
>
|
||||
<Users className="h-4 w-4" />
|
||||
</button>
|
||||
<div className="relative group">
|
||||
<button
|
||||
onClick={() => !creatingChat && onNewChat()}
|
||||
className={`flex h-8 items-center justify-center gap-1.5 px-3 text-sm transition-colors ${
|
||||
!creatingChat
|
||||
? "text-gray-500 hover:text-gray-900 cursor-pointer"
|
||||
: "text-gray-300 cursor-default"
|
||||
}`}
|
||||
>
|
||||
{creatingChat ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Plus className="h-4 w-4" />
|
||||
)}
|
||||
Chat
|
||||
</button>
|
||||
</div>
|
||||
<div className="relative group">
|
||||
<button
|
||||
onClick={() =>
|
||||
docsCount > 0 && !creatingReview && onNewReview()
|
||||
}
|
||||
className={`flex h-8 items-center justify-center gap-1.5 px-3 text-sm transition-colors ${
|
||||
docsCount > 0
|
||||
? "text-gray-500 hover:text-gray-900 cursor-pointer"
|
||||
: "text-gray-300 cursor-default"
|
||||
}`}
|
||||
>
|
||||
{creatingReview ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Plus className="h-4 w-4" />
|
||||
)}
|
||||
Tabular Review
|
||||
</button>
|
||||
{docsCount === 0 && (
|
||||
<div className="pointer-events-none absolute right-0 top-full mt-1.5 z-10 hidden group-hover:flex items-center whitespace-nowrap rounded-lg bg-gray-900 px-2.5 py-1.5 text-xs text-white shadow-lg">
|
||||
Upload a document first
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
205
frontend/src/app/components/projects/ProjectReviewsTab.tsx
Normal file
205
frontend/src/app/components/projects/ProjectReviewsTab.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
"use client";
|
||||
|
||||
import { type Dispatch, type SetStateAction } from "react";
|
||||
import { Table2 } from "lucide-react";
|
||||
import { RowActions } from "@/app/components/shared/RowActions";
|
||||
import type { MikeDocument, TabularReview } from "@/app/components/shared/types";
|
||||
import { CHECK_W, formatDate, NAME_COL_W } from "./ProjectPageParts";
|
||||
|
||||
export function ProjectReviewsTab({
|
||||
docs,
|
||||
reviews,
|
||||
filteredReviews,
|
||||
selectedReviewIds,
|
||||
allReviewsSelected,
|
||||
someReviewsSelected,
|
||||
renamingReviewId,
|
||||
renameReviewValue,
|
||||
creatingReview,
|
||||
currentUserId,
|
||||
onCreateReview,
|
||||
onOpenReview,
|
||||
onDeleteReview,
|
||||
onOwnerOnlyAction,
|
||||
submitReviewRename,
|
||||
setSelectedReviewIds,
|
||||
setRenamingReviewId,
|
||||
setRenameReviewValue,
|
||||
}: {
|
||||
docs: MikeDocument[];
|
||||
reviews: TabularReview[];
|
||||
filteredReviews: TabularReview[];
|
||||
selectedReviewIds: string[];
|
||||
allReviewsSelected: boolean;
|
||||
someReviewsSelected: boolean;
|
||||
renamingReviewId: string | null;
|
||||
renameReviewValue: string;
|
||||
creatingReview: boolean;
|
||||
currentUserId?: string | null;
|
||||
onCreateReview: () => void;
|
||||
onOpenReview: (reviewId: string) => void;
|
||||
onDeleteReview: (review: TabularReview) => Promise<void> | void;
|
||||
onOwnerOnlyAction: (action: string) => void;
|
||||
submitReviewRename: (reviewId: string) => Promise<void> | void;
|
||||
setSelectedReviewIds: Dispatch<SetStateAction<string[]>>;
|
||||
setRenamingReviewId: Dispatch<SetStateAction<string | null>>;
|
||||
setRenameReviewValue: Dispatch<SetStateAction<string>>;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center h-8 pr-8 border-b border-gray-200 text-xs text-gray-500 font-medium select-none">
|
||||
<div
|
||||
className={`sticky left-0 z-[60] ${CHECK_W} relative bg-white flex items-center justify-center self-stretch before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-white`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allReviewsSelected}
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = someReviewsSelected;
|
||||
}}
|
||||
onChange={() => {
|
||||
if (allReviewsSelected) setSelectedReviewIds([]);
|
||||
else
|
||||
setSelectedReviewIds(
|
||||
filteredReviews.map((r) => r.id),
|
||||
);
|
||||
}}
|
||||
className="h-2.5 w-2.5 rounded border-gray-200 cursor-pointer accent-black"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`sticky left-8 z-[60] ${NAME_COL_W} bg-white pl-2 text-left`}
|
||||
>
|
||||
Name
|
||||
</div>
|
||||
<div className="ml-auto w-24 shrink-0 text-left">Columns</div>
|
||||
<div className="w-24 shrink-0 text-left">Documents</div>
|
||||
<div className="w-32 shrink-0 text-left">Created</div>
|
||||
<div className="w-8 shrink-0" />
|
||||
</div>
|
||||
{reviews.length === 0 ? (
|
||||
<div className="flex flex-col items-start py-24 w-full max-w-xs mx-auto">
|
||||
<Table2 className="h-8 w-8 text-gray-300 mb-4" />
|
||||
<p className="text-2xl font-medium font-serif text-gray-900">
|
||||
Tabular Reviews
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-gray-400 max-w-xs">
|
||||
Extract data from project documents into tables using AI.
|
||||
</p>
|
||||
<button
|
||||
onClick={onCreateReview}
|
||||
disabled={creatingReview || docs.length === 0}
|
||||
className="mt-4 inline-flex items-center gap-1 rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white hover:bg-gray-700 transition-colors shadow-md disabled:opacity-40"
|
||||
>
|
||||
+ Create New
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{filteredReviews.map((review) => (
|
||||
<div
|
||||
key={review.id}
|
||||
onClick={() => {
|
||||
if (renamingReviewId === review.id) return;
|
||||
onOpenReview(review.id);
|
||||
}}
|
||||
className="group flex items-center h-10 pr-8 border-b border-gray-50 hover:bg-gray-50 cursor-pointer transition-colors"
|
||||
>
|
||||
<div
|
||||
className={`sticky left-0 z-[60] ${CHECK_W} p-2 flex items-center justify-center ${
|
||||
selectedReviewIds.includes(review.id)
|
||||
? "bg-gray-50"
|
||||
: "bg-white"
|
||||
} group-hover:bg-gray-50`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedReviewIds.includes(review.id)}
|
||||
onChange={() =>
|
||||
setSelectedReviewIds((prev) =>
|
||||
prev.includes(review.id)
|
||||
? prev.filter(
|
||||
(x) => x !== review.id,
|
||||
)
|
||||
: [...prev, review.id],
|
||||
)
|
||||
}
|
||||
className="h-2.5 w-2.5 rounded border-gray-200 cursor-pointer accent-black"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`sticky left-8 z-[60] ${NAME_COL_W} p-2 ${
|
||||
selectedReviewIds.includes(review.id)
|
||||
? "bg-gray-50"
|
||||
: "bg-white"
|
||||
} group-hover:bg-gray-50`}
|
||||
>
|
||||
{renamingReviewId === review.id ? (
|
||||
<input
|
||||
autoFocus
|
||||
value={renameReviewValue}
|
||||
onChange={(e) =>
|
||||
setRenameReviewValue(e.target.value)
|
||||
}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter")
|
||||
void submitReviewRename(review.id);
|
||||
if (e.key === "Escape")
|
||||
setRenamingReviewId(null);
|
||||
}}
|
||||
onBlur={() =>
|
||||
void submitReviewRename(review.id)
|
||||
}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-full text-sm text-gray-800 bg-transparent outline-none"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-sm text-gray-800 truncate block">
|
||||
{review.title ?? "Untitled Review"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="ml-auto w-24 shrink-0 text-sm text-gray-500 truncate">
|
||||
{review.columns_config?.length ?? 0}
|
||||
</div>
|
||||
<div className="w-24 shrink-0 text-sm text-gray-500 truncate">
|
||||
{review.document_count ?? 0}
|
||||
</div>
|
||||
<div className="w-32 shrink-0 text-sm text-gray-500 truncate">
|
||||
{review.created_at ? (
|
||||
formatDate(review.created_at)
|
||||
) : (
|
||||
<span className="text-gray-300">—</span>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="w-8 shrink-0 flex justify-end"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<RowActions
|
||||
onRename={() => {
|
||||
if (
|
||||
currentUserId &&
|
||||
review.user_id !== currentUserId
|
||||
) {
|
||||
onOwnerOnlyAction(
|
||||
"rename this tabular review",
|
||||
);
|
||||
return;
|
||||
}
|
||||
setRenameReviewValue(
|
||||
review.title ?? "Untitled Review",
|
||||
);
|
||||
setRenamingReviewId(review.id);
|
||||
}}
|
||||
onDelete={() => onDeleteReview(review)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@ const NAME_COL_W = "w-[300px] shrink-0";
|
|||
export function ProjectsOverview() {
|
||||
const [projects, setProjects] = useState<MikeProject[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<Tab>("all");
|
||||
const [renamingId, setRenamingId] = useState<string | null>(null);
|
||||
|
|
@ -40,14 +41,42 @@ export function ProjectsOverview() {
|
|||
const [ownerOnlyAction, setOwnerOnlyAction] = useState<string | null>(null);
|
||||
const actionsRef = useRef<HTMLDivElement>(null);
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const { user, isAuthenticated, authLoading } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
if (authLoading) {
|
||||
setLoading(true);
|
||||
return;
|
||||
}
|
||||
if (!isAuthenticated) {
|
||||
setProjects([]);
|
||||
setLoadError(null);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
setLoadError(null);
|
||||
listProjects()
|
||||
.then(setProjects)
|
||||
.catch(() => setProjects([]))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
.then((loaded) => {
|
||||
if (!cancelled) setProjects(loaded);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("[projects] failed to load projects", err);
|
||||
if (!cancelled) {
|
||||
setProjects([]);
|
||||
setLoadError("Could not load projects.");
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [authLoading, isAuthenticated, user?.id]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedIds([]);
|
||||
|
|
@ -263,6 +292,16 @@ export function ProjectsOverview() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : loadError ? (
|
||||
<div className="flex flex-col items-start py-24 w-full max-w-xs mx-auto">
|
||||
<FolderOpen className="h-8 w-8 text-gray-300 mb-4" />
|
||||
<p className="text-2xl font-medium font-serif text-gray-900">
|
||||
Projects
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-red-500 max-w-xs">
|
||||
{loadError}
|
||||
</p>
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="flex flex-col items-start py-24 w-full max-w-xs mx-auto">
|
||||
{activeTab === "all" || activeTab === "mine" ? (
|
||||
|
|
|
|||
|
|
@ -189,6 +189,11 @@ export function TRView({ reviewId, projectId }: Props) {
|
|||
}
|
||||
|
||||
async function handleRegenerateCell(docId: string, colIndex: number) {
|
||||
if (apiKeys && !isModelAvailable(tabularModel, apiKeys)) {
|
||||
setApiKeyModalProvider(getModelProvider(tabularModel));
|
||||
return;
|
||||
}
|
||||
|
||||
setCells((prev) =>
|
||||
prev.map((c) =>
|
||||
c.document_id === docId && c.column_index === colIndex
|
||||
|
|
@ -247,41 +252,55 @@ export function TRView({ reviewId, projectId }: Props) {
|
|||
|
||||
setGenerating(true);
|
||||
|
||||
// Optimistically set empty/pending/error cells to generating (skip done cells)
|
||||
setCells((prev) =>
|
||||
documents.flatMap((doc) =>
|
||||
columns.map((col) => {
|
||||
const existing = prev.find(
|
||||
(c) =>
|
||||
c.document_id === doc.id &&
|
||||
c.column_index === col.index,
|
||||
);
|
||||
if (existing?.status === "done" && existing?.content) {
|
||||
return existing;
|
||||
}
|
||||
return existing
|
||||
? {
|
||||
...existing,
|
||||
status: "generating" as const,
|
||||
content: null,
|
||||
}
|
||||
: {
|
||||
id: `${doc.id}-${col.index}`,
|
||||
review_id: reviewId,
|
||||
document_id: doc.id,
|
||||
column_index: col.index,
|
||||
content: null,
|
||||
status: "generating" as const,
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
try {
|
||||
const response = await streamTabularGeneration(reviewId);
|
||||
if (!response.ok) {
|
||||
const payload = await response.json().catch(() => null);
|
||||
const provider =
|
||||
payload &&
|
||||
["claude", "gemini", "openai"].includes(payload.provider)
|
||||
? (payload.provider as ModelProvider)
|
||||
: getModelProvider(tabularModel);
|
||||
if (payload?.code === "missing_api_key" && provider) {
|
||||
setApiKeyModalProvider(provider);
|
||||
}
|
||||
throw new Error(
|
||||
payload?.detail ?? `Generation failed: ${response.status}`,
|
||||
);
|
||||
}
|
||||
if (!response.body) throw new Error("No body");
|
||||
|
||||
// Optimistically set empty/pending/error cells to generating (skip done cells)
|
||||
setCells((prev) =>
|
||||
documents.flatMap((doc) =>
|
||||
columns.map((col) => {
|
||||
const existing = prev.find(
|
||||
(c) =>
|
||||
c.document_id === doc.id &&
|
||||
c.column_index === col.index,
|
||||
);
|
||||
if (existing?.status === "done" && existing?.content) {
|
||||
return existing;
|
||||
}
|
||||
return existing
|
||||
? {
|
||||
...existing,
|
||||
status: "generating" as const,
|
||||
content: null,
|
||||
}
|
||||
: {
|
||||
id: `${doc.id}-${col.index}`,
|
||||
review_id: reviewId,
|
||||
document_id: doc.id,
|
||||
column_index: col.index,
|
||||
content: null,
|
||||
status: "generating" as const,
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = "";
|
||||
|
|
|
|||
|
|
@ -268,6 +268,21 @@ export async function moveDocumentToFolder(
|
|||
);
|
||||
}
|
||||
|
||||
export async function renameProjectDocument(
|
||||
projectId: string,
|
||||
documentId: string,
|
||||
filename: string,
|
||||
): Promise<MikeDocument> {
|
||||
return apiRequest<MikeDocument>(
|
||||
`/projects/${projectId}/documents/${documentId}`,
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ filename }),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
export async function addDocumentToProject(
|
||||
projectId: string,
|
||||
documentId: string,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue