[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" "use client" import Component from "../ai-chatbot" export default function Page() { return } [V0_FILE]typescriptreact:file="ai-chatbot.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { FileText, User, ArrowLeft, Upload, Search, Tag, Users, Shield, Plus, Settings } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" interface FileData { id: string name: string size: string uploadDate: string keywords: string[] } interface UserData { id: string name: string email: string role: string permissions: string[] lastLogin: string status: "active" | "inactive" } interface TeamData { id: string name: string members: string[] permissions: string[] createdDate: string } export default function Component() { const [message, setMessage] = useState("") const [useVectorSearch, setUseVectorSearch] = useState(true) const [currentView, setCurrentView] = useState<"chat" | "fileManagement" | "userManagement">("chat") const [isDragOver, setIsDragOver] = useState(false) const [selectedUsers, setSelectedUsers] = useState([]) const [newTeamName, setNewTeamName] = useState("") const [files, setFiles] = useState([ { id: "1", name: "プロジェクト仕様書.pdf", size: "2.3MB", uploadDate: "2024-01-15", keywords: ["仕様", "要件", "設計", "API", "データベース"], }, { id: "2", name: "ユーザーマニュアル.docx", size: "1.8MB", uploadDate: "2024-01-10", keywords: ["操作", "手順", "ガイド", "ユーザー", "機能"], }, ]) const [users, setUsers] = useState([ { id: "1", name: "田中太郎", email: "tanaka@example.com", role: "管理者", permissions: ["読み取り", "書き込み", "削除", "管理", "権限付与権限", "ユーザー追加権限"], lastLogin: "2024-01-15 14:30", status: "active", }, { id: "2", name: "佐藤花子", email: "sato@example.com", role: "編集者", permissions: ["読み取り", "書き込み", "PDFファイルの追加権限", "検索対象ファイル＆フォルダーの名称変更権限"], lastLogin: "2024-01-14 09:15", status: "active", }, { id: "3", name: "鈴木一郎", email: "suzuki@example.com", role: "閲覧者", permissions: ["読み取り", "アクセス制限権限"], lastLogin: "2024-01-13 16:45", status: "inactive", }, ]) const [teams, setTeams] = useState([ { id: "1", name: "開発チーム", members: ["1", "2"], permissions: [ "読み取り", "書き込み", "API使用", "PDFファイルの追加権限", "検索対象ファイル＆フォルダーの名称変更権限", ], createdDate: "2024-01-10", }, { id: "2", name: "営業チーム", members: ["3"], permissions: ["読み取り", "アクセス制限権限"], createdDate: "2024-01-12", }, ]) const availablePermissions = [ "読み取り", "書き込み", "削除", "管理", "API使用", "ファイル管理", "権限付与権限", "PDFファイルの追加権限", "検索対象ファイル＆フォルダーの名称変更権限", "ユーザー追加権限", "アクセス制限権限", ] const [selectedUserForPermission, setSelectedUserForPermission] = useState(null) const [selectedTeamForPermission, setSelectedTeamForPermission] = useState(null) const [selectedPermissions, setSelectedPermissions] = useState([]) const handleAddUserPermission = (userId: string) => { setSelectedUserForPermission(userId) setSelectedPermissions([]) } const handleAddTeamPermission = (teamId: string) => { setSelectedTeamForPermission(teamId) setSelectedPermissions([]) } const handlePermissionToggle = (permission: string) => { setSelectedPermissions((prev) => prev.includes(permission) ? prev.filter((p) => p !== permission) : [...prev, permission], ) } const handleConfirmUserPermissions = () => { if (selectedUserForPermission && selectedPermissions.length > 0) { setUsers((prev) => prev.map((user) => user.id === selectedUserForPermission ? { ...user, permissions: [...new Set([...user.permissions, ...selectedPermissions])] } : user, ), ) setSelectedUserForPermission(null) setSelectedPermissions([]) } } const handleConfirmTeamPermissions = () => { if (selectedTeamForPermission && selectedPermissions.length > 0) { setTeams((prev) => prev.map((team) => team.id === selectedTeamForPermission ? { ...team, permissions: [...new Set([...team.permissions, ...selectedPermissions])] } : team, ), ) setSelectedTeamForPermission(null) setSelectedPermissions([]) } } const handleSend = () => { if (message.trim()) { console.log("Sending message:", message) setMessage("") } } const handleClear = () => { setMessage("") } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSend() } } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragOver(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setIsDragOver(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragOver(false) const droppedFiles = Array.from(e.dataTransfer.files) droppedFiles.forEach((file) => { const newFile: FileData = { id: Date.now().toString(), name: file.name, size: `${(file.size / 1024 / 1024).toFixed(1)}MB`, uploadDate: new Date().toISOString().split("T")[0], keywords: ["新規", "アップロード", "未分析"], } setFiles((prev) => [...prev, newFile]) }) } const handleUserSelect = (userId: string) => { setSelectedUsers((prev) => (prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId])) } const handleCreateTeam = () => { if (newTeamName && selectedUsers.length > 0) { const newTeam: TeamData = { id: Date.now().toString(), name: newTeamName, members: selectedUsers, permissions: ["読み取り"], createdDate: new Date().toISOString().split("T")[0], } setTeams((prev) => [...prev, newTeam]) setNewTeamName("") setSelectedUsers([]) } } const getUserName = (userId: string) => { return users.find((user) => user.id === userId)?.name || "不明" } const [editingFileId, setEditingFileId] = useState(null) const [editingFileName, setEditingFileName] = useState("") const handleStartEditFileName = (fileId: string, currentName: string) => { setEditingFileId(fileId) setEditingFileName(currentName) } const handleSaveFileName = (fileId: string) => { if (editingFileName.trim()) { setFiles((prev) => prev.map((file) => (file.id === fileId ? { ...file, name: editingFileName.trim() } : file))) } setEditingFileId(null) setEditingFileName("") } const handleCancelEditFileName = () => { setEditingFileId(null) setEditingFileName("") } const handleFileNameKeyPress = (e: React.KeyboardEvent, fileId: string) => { if (e.key === "Enter") { handleSaveFileName(fileId) } else if (e.key === "Escape") { handleCancelEditFileName() } } if (currentView === "userManagement") { return (

{/* Sidebar */}

{/* User Management Content */}

{/* Header */}

ユーザー管理

{/* Users Section */}

ユーザー一覧 ({users.length}名)

選択ユーザー権限 {users.map((user) => ( handleUserSelect(user.id)} />

{user.name}

{user.email}

最終ログイン: {user.lastLogin}

{user.permissions.map((permission) => ( {permission} ))}

))}

{/* Teams Section */}

チーム一覧 ({teams.length}チーム)

{teams.map((team) => (

{team.name}

作成日: {team.createdDate}

メンバー ({team.members.length}名):

{team.members.map((memberId) => ( {getUserName(memberId)} ))}

チーム権限:

{team.permissions.map((permission) => ( {permission} ))}

))}

) } if (currentView === "fileManagement") { return (

{/* Sidebar */}

{/* File Management Content */}

{/* Header */}

ファイルデータ管理

{/* Drag and Drop Area */}

ファイルをドラッグ&ドロップ

または、ここをクリックしてファイルを選択

{/* File List */}

保存されているファイル ({files.length}件)

{files.map((file) => (

{editingFileId === file.id ? (

setEditingFileName(e.target.value)} onKeyPress={(e) => handleFileNameKeyPress(e, file.id)} className="bg-gray-700 border-gray-600 text-white text-lg font-semibold" autoFocus />

) : (

handleStartEditFileName(file.id, file.name)} > {file.name}

)}

{file.size} • {file.uploadDate}

検索キーワード:

{file.keywords.map((keyword, index) => ( {keyword} ))}

))}

) } return (

{/* Sidebar */}

{/* Main Content */}

{/* Header */}

RS AI

{/* File/Folder Selector */}

{/* Chat Area */}

{/* Chat messages would appear here */}

チャットメッセージがここに表示されます

{/* Message Input Area */}

setMessage(e.target.value)} onKeyPress={handleKeyPress} placeholder="Type your message..." className="flex-1 bg-white" />

{/* Checkbox */}

setUseVectorSearch(checked as boolean)} /> 注意事項の抽出にベクトル検索を使用する。（チェックを外すと事前に準備された注意事項一覧からデータを参照します。）

) }