work-agent 0.1.0

package/components/ai-elements/web-preview.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+export interface WebPreviewContextValue {
+  url: string;
+  setUrl: (url: string) => void;
+  consoleOpen: boolean;
+  setConsoleOpen: (open: boolean) => void;
+}
+
+const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
+
+const useWebPreview = () => {
+  const context = useContext(WebPreviewContext);
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview");
+  }
+  return context;
+};
+
+export type WebPreviewProps = ComponentProps<"div"> & {
+  defaultUrl?: string;
+  onUrlChange?: (url: string) => void;
+};
+
+export const WebPreview = ({
+  className,
+  children,
+  defaultUrl = "",
+  onUrlChange,
+  ...props
+}: WebPreviewProps) => {
+  const [url, setUrl] = useState(defaultUrl);
+  const [consoleOpen, setConsoleOpen] = useState(false);
+
+  const handleUrlChange = useCallback(
+    (newUrl: string) => {
+      setUrl(newUrl);
+      onUrlChange?.(newUrl);
+    },
+    [onUrlChange]
+  );
+
+  const contextValue = useMemo<WebPreviewContextValue>(
+    () => ({
+      consoleOpen,
+      setConsoleOpen,
+      setUrl: handleUrlChange,
+      url,
+    }),
+    [consoleOpen, handleUrlChange, url]
+  );
+
+  return (
+    <WebPreviewContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "flex size-full flex-col rounded-lg border bg-card",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </WebPreviewContext.Provider>
+  );
+};
+
+export type WebPreviewNavigationProps = ComponentProps<"div">;
+
+export const WebPreviewNavigation = ({
+  className,
+  children,
+  ...props
+}: WebPreviewNavigationProps) => (
+  <div
+    className={cn("flex items-center gap-1 border-b p-2", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+
+export const WebPreviewNavigationButton = ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  ...props
+}: WebPreviewNavigationButtonProps) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          className="h-8 w-8 p-0 hover:text-foreground"
+          disabled={disabled}
+          onClick={onClick}
+          size="sm"
+          variant="ghost"
+          {...props}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+export type WebPreviewUrlProps = ComponentProps<typeof Input>;
+
+export const WebPreviewUrl = ({
+  value,
+  onChange,
+  onKeyDown,
+  ...props
+}: WebPreviewUrlProps) => {
+  const { url, setUrl } = useWebPreview();
+  const [prevUrl, setPrevUrl] = useState(url);
+  const [inputValue, setInputValue] = useState(url);
+
+  // Sync input value with context URL when it changes externally (derived state pattern)
+  if (url !== prevUrl) {
+    setPrevUrl(url);
+    setInputValue(url);
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    onChange?.(event);
+  };
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "Enter") {
+        const target = event.target as HTMLInputElement;
+        setUrl(target.value);
+      }
+      onKeyDown?.(event);
+    },
+    [setUrl, onKeyDown]
+  );
+
+  return (
+    <Input
+      className="h-8 flex-1 text-sm"
+      onChange={onChange ?? handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder="Enter URL..."
+      value={value ?? inputValue}
+      {...props}
+    />
+  );
+};
+
+export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
+  loading?: ReactNode;
+};
+
+export const WebPreviewBody = ({
+  className,
+  loading,
+  src,
+  ...props
+}: WebPreviewBodyProps) => {
+  const { url } = useWebPreview();
+
+  return (
+    <div className="flex-1">
+      <iframe
+        className={cn("size-full", className)}
+        // oxlint-disable-next-line eslint-plugin-react(iframe-missing-sandbox)
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+        src={(src ?? url) || undefined}
+        title="Preview"
+        {...props}
+      />
+      {loading}
+    </div>
+  );
+};
+
+export type WebPreviewConsoleProps = ComponentProps<"div"> & {
+  logs?: {
+    level: "log" | "warn" | "error";
+    message: string;
+    timestamp: Date;
+  }[];
+};
+
+export const WebPreviewConsole = ({
+  className,
+  logs = [],
+  children,
+  ...props
+}: WebPreviewConsoleProps) => {
+  const { consoleOpen, setConsoleOpen } = useWebPreview();
+
+  return (
+    <Collapsible
+      className={cn("border-t bg-muted/50 font-mono text-sm", className)}
+      onOpenChange={setConsoleOpen}
+      open={consoleOpen}
+      {...props}
+    >
+      <CollapsibleTrigger asChild>
+        <Button
+          className="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"
+          variant="ghost"
+        >
+          Console
+          <ChevronDownIcon
+            className={cn(
+              "h-4 w-4 transition-transform duration-200",
+              consoleOpen && "rotate-180"
+            )}
+          />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent
+        className={cn(
+          "px-4 pb-4",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+        )}
+      >
+        <div className="max-h-48 space-y-1 overflow-y-auto">
+          {logs.length === 0 ? (
+            <p className="text-muted-foreground">No console output</p>
+          ) : (
+            logs.map((log, index) => (
+              <div
+                className={cn(
+                  "text-xs",
+                  log.level === "error" && "text-destructive",
+                  log.level === "warn" && "text-yellow-600",
+                  log.level === "log" && "text-foreground"
+                )}
+                key={`${log.timestamp.getTime()}-${index}`}
+              >
+                <span className="text-muted-foreground">
+                  {log.timestamp.toLocaleTimeString()}
+                </span>{" "}
+                {log.message}
+              </div>
+            ))
+          )}
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

package/components/audit-log-list.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { CheckCircle2, XCircle } from 'lucide-react';
+import type { AuditLog } from '@/lib/db';
+import { Badge } from '@/components/ui/badge';
+
+export function AuditLogList() {
+	const [logs, setLogs] = useState<AuditLog[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		async function fetchLogs() {
+			try {
+				const response = await fetch('/api/audit?limit=50');
+				if (!response.ok) throw new Error('获取审计日志失败');
+
+				const data = await response.json();
+				setLogs(data.logs);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : '未知错误');
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		fetchLogs();
+	}, []);
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center py-12">
+				<div className="flex flex-col items-center gap-4">
+					<div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+					<p className="text-muted-foreground">加载中...</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4">
+				<p className="text-destructive text-sm">错误: {error}</p>
+			</div>
+		);
+	}
+
+	if (logs.length === 0) {
+		return (
+			<div className="text-center py-12">
+				<div className="text-5xl mb-3">📭</div>
+				<p className="text-muted-foreground">暂无审计日志</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className="divide-y divide-border">
+			{logs.map((log) => (
+				<div key={log.id} className="p-4 hover:bg-muted/50 transition-colors">
+					<div className="flex items-start gap-4">
+						<div className="mt-1 flex-shrink-0">
+							{log.status === 'success' ? (
+								<CheckCircle2 className="h-5 w-5 text-green-600" />
+							) : (
+								<XCircle className="h-5 w-5 text-destructive" />
+							)}
+						</div>
+						<div className="flex-1 min-w-0">
+							<div className="flex items-center gap-3 mb-1 flex-wrap">
+								<span className="font-medium">{log.action}</span>
+								<span className="text-xs text-muted-foreground">
+									{new Date(log.timestamp).toLocaleString('zh-CN')}
+								</span>
+								<StatusBadge status={log.status} />
+							</div>
+							<p className="text-sm text-muted-foreground">
+								操作人: <span className="font-medium text-foreground">{log.userId}</span>
+								{log.ticketId && ` • 工单: ${log.ticketId}`}
+							</p>
+							{(() => {
+								const details = log.details;
+								if (details && typeof details === 'object' && Object.keys(details).length > 0) {
+									return (
+										<details className="mt-2 group">
+											<summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground list-none">
+												<span className="inline-flex items-center gap-1">
+													<span className="group-hover:underline">详情</span>
+												</span>
+											</summary>
+											<pre className="mt-2 text-xs bg-muted p-3 rounded overflow-x-auto text-foreground">
+												{JSON.stringify(details, null, 2)}
+											</pre>
+										</details>
+									);
+								}
+								return null;
+							})()}
+						</div>
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
+
+function StatusBadge({ status }: { status: string }) {
+	if (status === 'success') {
+		return <Badge variant="default" className="bg-green-600 hover:bg-green-700">成功</Badge>;
+	}
+	return <Badge variant="destructive">失败</Badge>;
+}

package/components/chat/EmptyPreviewState.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { BookOpen } from 'lucide-react';
+
+export function EmptyPreviewState() {
+	return (
+		<div className="h-full flex flex-col items-center justify-center text-gray-400">
+			<BookOpen className="w-16 h-16 mb-4" />
+			<p className="text-sm">点击左侧知识条目预览内容</p>
+		</div>
+	);
+}