botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/components/attachment-preview.tsx

@@ -0,0 +1,193 @@
+/**
+ * 附件預覽元件
+ */
+
+'use client';
+
+import { X, RotateCcw } from 'lucide-react';
+import type { PendingAttachment } from '@/types/attachment';
+import { canPreview, getFileIcon, formatAttachmentSize } from '@/lib/attachment-utils';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface AttachmentPreviewProps {
+  /** 附件列表 */
+  attachments: PendingAttachment[];
+  /** 附件數量上限 */
+  maxCount: number;
+  /** 移除附件回呼 */
+  onRemove: (id: string) => void;
+  /** 重試上傳回呼 */
+  onRetry: (id: string) => void;
+  /** 清除所有附件回呼 */
+  onClearAll: () => void;
+  /** 是否禁用操作 */
+  disabled?: boolean;
+}
+
+/**
+ * 附件預覽區元件
+ */
+export function AttachmentPreview({
+  attachments,
+  maxCount,
+  onRemove,
+  onRetry,
+  onClearAll,
+  disabled = false,
+}: AttachmentPreviewProps) {
+  if (attachments.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="border-b border-border bg-muted/30 p-3">
+      {/* 標題列 */}
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm text-muted-foreground font-medium">
+          附件 ({attachments.length}/{maxCount})
+        </span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onClearAll}
+          disabled={disabled}
+          className="text-xs h-6 px-2 text-muted-foreground hover:text-foreground"
+        >
+          清除全部
+        </Button>
+      </div>
+
+      {/* 附件網格 */}
+      <div className="flex flex-wrap gap-3">
+        {attachments.map(attachment => (
+          <AttachmentItem
+            key={attachment.id}
+            attachment={attachment}
+            onRemove={() => onRemove(attachment.id)}
+            onRetry={() => onRetry(attachment.id)}
+            disabled={disabled}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface AttachmentItemProps {
+  attachment: PendingAttachment;
+  onRemove: () => void;
+  onRetry: () => void;
+  disabled?: boolean;
+}
+
+/**
+ * 單一附件項目元件
+ */
+function AttachmentItem({
+  attachment,
+  onRemove,
+  onRetry,
+  disabled = false,
+}: AttachmentItemProps) {
+  const { type, name, size, previewUrl, status, progress } = attachment;
+  const canShowPreview = canPreview(type) && previewUrl;
+
+  return (
+    <div className="relative group">
+      {/* 預覽區 */}
+      <div
+        className={cn(
+          'w-20 h-20 rounded-lg border overflow-hidden',
+          'flex items-center justify-center',
+          'bg-muted/50',
+          status === 'error' && 'bg-destructive/10 border-destructive'
+        )}
+      >
+        {canShowPreview ? (
+          <img
+            src={previewUrl}
+            alt={name}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <span className="text-3xl">{getFileIcon(type)}</span>
+        )}
+
+        {/* 上傳中遮罩 */}
+        {status === 'uploading' && (
+          <div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center rounded-lg">
+            <div className="w-12 h-1.5 bg-white/30 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-white transition-all duration-300"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+            <span className="text-white text-xs mt-1">{progress}%</span>
+          </div>
+        )}
+
+        {/* 錯誤狀態 */}
+        {status === 'error' && (
+          <div className="absolute inset-0 bg-destructive/90 flex flex-col items-center justify-center rounded-lg text-white">
+            <span className="text-xs font-medium">上傳失敗</span>
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={onRetry}
+              disabled={disabled}
+              className="text-xs h-6 px-2 mt-1 text-white hover:text-white hover:bg-white/20"
+            >
+              <RotateCcw className="w-3 h-3 mr-1" />
+              重試
+            </Button>
+          </div>
+        )}
+
+        {/* 上傳完成標記 */}
+        {status === 'uploaded' && (
+          <div className="absolute top-1 right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
+            <span className="text-white text-xs">✓</span>
+          </div>
+        )}
+      </div>
+
+      {/* 刪除按鈕 */}
+      <button
+        type="button"
+        onClick={onRemove}
+        disabled={disabled || status === 'uploading'}
+        className={cn(
+          'absolute -top-2 -right-2',
+          'w-5 h-5 rounded-full',
+          'bg-destructive text-destructive-foreground',
+          'flex items-center justify-center',
+          'shadow-sm',
+          'opacity-0 group-hover:opacity-100 transition-opacity',
+          'hover:bg-destructive/90',
+          'disabled:opacity-50 disabled:cursor-not-allowed',
+          // 在觸控裝置上永遠顯示
+          'touch:opacity-100'
+        )}
+        aria-label={`移除 ${name}`}
+      >
+        <X className="w-3 h-3" />
+      </button>
+
+      {/* 檔名和大小 */}
+      <div className="mt-1.5 text-center max-w-20">
+        <p
+          className="text-xs truncate text-foreground"
+          title={name}
+        >
+          {name}
+        </p>
+        <p className="text-xs text-muted-foreground">
+          {formatAttachmentSize(size)}
+        </p>
+      </div>
+    </div>
+  );
+}

package/botrun-c/web/components/botrun-incubator/BotrunIncubator.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { Sparkles, Save, RotateCcw, X } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { useAuth } from "@/contexts/AuthContext";
+import { useCapacitorPlatform } from "@/hooks/useCapacitorPlatform";
+import { getApiUrl } from '@/lib/api-url';
+
+// API URL - 使用統一的 API URL 邏輯
+const API_URL = (() => {
+  if (typeof window === 'undefined') return '';
+
+  // Load Balancer 架構：檢查是否在個人後端 (/u/{hash}/)
+  const pathname = window.location.pathname;
+  if (pathname.startsWith('/u/')) {
+    const match = pathname.match(/^\/u\/[0-9a-f]{8}/);
+    if (match) {
+      return match[0];
+    }
+  }
+
+  // 其他情況：使用統一的 getApiUrl() 自動偵測
+  return getApiUrl();
+})();
+
+const DEFAULT_TEMPLATE = `# 波特人總指揮 - 自訂提示工程
+
+你可以在這裡自訂 AI 的行為和回應風格。
+
+## 範例：
+
+### 回應風格
+- 每次回應都要有禮貌且專業
+- 使用臺灣繁體中文和臺灣慣用語
+
+### 特殊指令
+（在這裡寫下你想要 AI 遵循的規則）
+`;
+
+interface BotrunIncubatorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onNewChat?: () => void; // 新對話回調函數
+}
+
+export function BotrunIncubator({ open, onOpenChange, onNewChat }: BotrunIncubatorProps) {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const { isCapacitor, isAndroid } = useCapacitorPlatform();
+  const [content, setContent] = useState("");
+  const [originalContent, setOriginalContent] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // 讀取 BOTRUN.md
+  const loadContent = async () => {
+    if (!user) return;
+
+    setIsLoading(true);
+    try {
+      const token = await user.getIdToken();
+      const response = await fetch(`${API_URL}/api/botrun-md`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('讀取 BOTRUN.md 失敗');
+      }
+
+      const data = await response.json();
+      const loadedContent = data.content || DEFAULT_TEMPLATE;
+      setContent(loadedContent);
+      setOriginalContent(loadedContent);
+    } catch (error) {
+      console.error('載入 BOTRUN.md 錯誤:', error);
+      toast({
+        variant: "destructive",
+        title: "讀取失敗",
+        description: "無法載入 BOTRUN.md，將使用預設模板",
+      });
+      setContent(DEFAULT_TEMPLATE);
+      setOriginalContent(DEFAULT_TEMPLATE);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 儲存 BOTRUN.md
+  const saveContent = async () => {
+    if (!user) return;
+
+    const hasChanges = content !== originalContent;
+
+    setIsSaving(true);
+    try {
+      const token = await user.getIdToken();
+      const response = await fetch(`${API_URL}/api/botrun-md`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ content }),
+      });
+
+      if (!response.ok) {
+        throw new Error('儲存 BOTRUN.md 失敗');
+      }
+
+      setOriginalContent(content);
+
+      toast({
+        title: "儲存成功",
+        description: "提示工程已更新，已自動開啟新對話",
+      });
+
+      // 開啟新對話（因為只有有改變時才能點擊儲存按鈕）
+      if (onNewChat) {
+        onNewChat();
+      }
+
+      // 自動關閉 Modal
+      onOpenChange(false);
+    } catch (error) {
+      console.error('儲存 BOTRUN.md 錯誤:', error);
+      toast({
+        variant: "destructive",
+        title: "儲存失敗",
+        description: "無法儲存 BOTRUN.md，請稍後再試",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 重置內容
+  const resetContent = () => {
+    setContent(originalContent);
+    toast({
+      title: "已重置",
+      description: "內容已恢復至上次儲存的狀態",
+    });
+  };
+
+  // Modal 開啟時載入內容
+  useEffect(() => {
+    if (open) {
+      loadContent();
+    }
+  }, [open]);
+
+  const hasChanges = content !== originalContent;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-full w-full h-full max-h-full flex flex-col p-0 gap-0 sm:max-w-[90vw] sm:h-[90vh] sm:max-h-[90vh] [&>button]:hidden">
+        {/* Capacitor App: Status Bar 背景遮蔽 */}
+        {isCapacitor && (
+          <div
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              height: 'var(--safe-area-inset-top)',
+              backgroundColor: '#F0EBE3',
+              zIndex: 60,
+            }}
+          />
+        )}
+
+        {/* 極簡 Header - 手機優化 */}
+        <DialogHeader
+          className="px-4 border-b shrink-0"
+          style={{
+            paddingTop: isCapacitor
+              ? 'calc(var(--safe-area-inset-top) + 0.5rem)'
+              : '0.5rem',
+            paddingBottom: '0.5rem'
+          }}
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Sparkles className="h-4 w-4 text-primary" />
+              <DialogTitle className="text-base sm:text-xl">指揮家孵化器</DialogTitle>
+            </div>
+            {/* 關閉按鈕 - 手機版顯示 */}
+            <Button
+              onClick={() => onOpenChange(false)}
+              disabled={isSaving}
+              size="icon"
+              variant="ghost"
+              className="h-8 w-8 shrink-0"
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">關閉</span>
+            </Button>
+          </div>
+        </DialogHeader>
+
+        {/* Editor Area - 可滾動 */}
+        <div className="flex-1 overflow-y-auto px-4 py-3">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-full">
+              <p className="text-muted-foreground text-sm">載入中...</p>
+            </div>
+          ) : (
+            <Textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="在這裡輸入你的自訂提示工程..."
+              className="w-full h-full min-h-[70vh] resize-none font-mono text-sm"
+              inputMode="text"
+            />
+          )}
+        </div>
+
+        {/* 固定底部按鈕 - 手機橫向排列 */}
+        <div
+          className="px-4 border-t shrink-0 bg-background"
+          style={{
+            paddingTop: '0.75rem',
+            paddingBottom: isCapacitor
+              ? isAndroid
+                ? 'max(calc(var(--safe-area-inset-bottom) + 0.75rem), calc(var(--android-nav-bar-height) + 0.75rem))'
+                : 'calc(var(--safe-area-inset-bottom) + 0.75rem)'
+              : '0.75rem'
+          }}
+        >
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              onClick={resetContent}
+              disabled={!hasChanges || isLoading || isSaving}
+              className="flex-1 h-9 text-sm"
+            >
+              <RotateCcw className="mr-1 h-3.5 w-3.5" />
+              重置
+            </Button>
+            <Button
+              onClick={saveContent}
+              disabled={!hasChanges || isLoading || isSaving}
+              className="flex-1 h-9 text-sm"
+            >
+              <Save className="mr-1 h-3.5 w-3.5" />
+              {isSaving ? "儲存中..." : "儲存並生效"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/botrun-c/web/components/botrun-incubator/index.ts

@@ -0,0 +1 @@
+export { BotrunIncubator } from './BotrunIncubator';