feat(fe): file uploading

web/src/app/home/knowledge/components/kb-docs/FileUploadZone.tsx

@@ -0,0 +1,145 @@
+import React, { useCallback, useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+
+interface FileUploadZoneProps {
+  kbId: string;
+  onUploadSuccess: () => void;
+  onUploadError: (error: string) => void;
+}
+
+export default function FileUploadZone({
+  kbId,
+  onUploadSuccess,
+  onUploadError,
+}: FileUploadZoneProps) {
+  const { t } = useTranslation();
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const handleUpload = useCallback(
+    async (file: File) => {
+      if (isUploading) return;
+
+      setIsUploading(true);
+      const toastId = toast.loading(t('knowledge.documentsTab.uploadingFile'));
+
+      try {
+        // Step 1: Upload file to server
+        const uploadResult = await httpClient.uploadDocumentFile(file);
+
+        // Step 2: Associate file with knowledge base
+        await httpClient.uploadKnowledgeBaseFile(kbId, uploadResult.file_id);
+
+        toast.success(t('knowledge.documentsTab.uploadSuccess'), {
+          id: toastId,
+        });
+        onUploadSuccess();
+      } catch (error) {
+        console.error('File upload failed:', error);
+        const errorMessage = t('knowledge.documentsTab.uploadError');
+        toast.error(errorMessage, { id: toastId });
+        onUploadError(errorMessage);
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [kbId, isUploading, onUploadSuccess, onUploadError],
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragOver(false);
+
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length > 0) {
+        handleUpload(files[0]);
+      }
+    },
+    [handleUpload],
+  );
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        handleUpload(files[0]);
+      }
+    },
+    [handleUpload],
+  );
+
+  return (
+    <Card className="mb-4">
+      <CardContent className="p-6">
+        <div
+          className={`
+            relative border-2 border-dashed rounded-lg p-8 text-center transition-colors
+            ${
+              isDragOver
+                ? 'border-blue-500 bg-blue-50'
+                : 'border-gray-300 hover:border-gray-400'
+            }
+            ${isUploading ? 'opacity-50 pointer-events-none' : ''}
+          `}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          <input
+            type="file"
+            id="file-upload"
+            className="hidden"
+            onChange={handleFileSelect}
+            accept=".pdf,.doc,.docx,.txt,.md"
+            disabled={isUploading}
+          />
+
+          <label htmlFor="file-upload" className="cursor-pointer block">
+            <div className="space-y-4">
+              <div className="mx-auto w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
+                <svg
+                  className="w-6 h-6 text-gray-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  />
+                </svg>
+              </div>
+
+              <div>
+                <p className="text-lg font-medium text-gray-900">
+                  {isUploading
+                    ? t('knowledge.documentsTab.uploading')
+                    : t('knowledge.documentsTab.dragAndDrop')}
+                </p>
+                <p className="text-sm text-gray-500 mt-1">
+                  {t('knowledge.documentsTab.supportedFormats')}
+                </p>
+              </div>
+            </div>
+          </label>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

web/src/app/home/knowledge/components/kb-docs/KBDoc.tsx

@@ -1,5 +1,48 @@
 import { useEffect, useState } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { KnowledgeBaseFile } from '@/app/infra/entities/api';
+import { columns, DocumentFile } from './documents/columns';
+import { DataTable } from './documents/data-table';
+import FileUploadZone from './FileUploadZone';
 
 export default function KBDoc({ kbId }: { kbId: string }) {
-  return <div>Documents</div>;
+  const [documentsList, setDocumentsList] = useState<DocumentFile[]>([]);
+
+  useEffect(() => {
+    getDocumentsList();
+  }, []);
+
+  async function getDocumentsList() {
+    const resp = await httpClient.getKnowledgeBaseFiles(kbId);
+    setDocumentsList(
+      resp.files.map((file: KnowledgeBaseFile) => {
+        return {
+          id: file.file_id,
+          name: file.file_name,
+          status: file.status,
+        };
+      }),
+    );
+  }
+
+  const handleUploadSuccess = () => {
+    // Refresh document list after successful upload
+    getDocumentsList();
+  };
+
+  const handleUploadError = (error: string) => {
+    // Error messages are already handled by toast in FileUploadZone component
+    console.error('Upload failed:', error);
+  };
+
+  return (
+    <div className="container mx-auto py-4">
+      <FileUploadZone
+        kbId={kbId}
+        onUploadSuccess={handleUploadSuccess}
+        onUploadError={handleUploadError}
+      />
+      <DataTable columns={columns()} data={documentsList} />
+    </div>
+  );
 }

web/src/app/home/knowledge/components/kb-docs/doc-card/DocumentCard.tsx

@@ -1,9 +0,0 @@
-export default function DocumentCard({
-  kbId,
-  fileId,
-}: {
-  kbId: string;
-  fileId: string;
-}) {
-  return <div></div>;
-}

web/src/app/home/knowledge/components/kb-docs/documents/columns.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { useTranslation } from 'react-i18next';
+
+export type DocumentFile = {
+  id: string;
+  name: string;
+  status: string;
+};
+
+export const columns = (): ColumnDef<DocumentFile>[] => {
+  const { t } = useTranslation();
+  return [
+    {
+      accessorKey: 'name',
+      header: t('knowledge.documentsTab.name'),
+    },
+    {
+      accessorKey: 'status',
+      header: t('knowledge.documentsTab.status'),
+    },
+  ];
+};

web/src/app/home/knowledge/components/kb-docs/documents/data-table.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useTranslation } from 'react-i18next';
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const { t } = useTranslation();
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && 'selected'}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                {t('knowledge.documentsTab.noResults')}
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

web/src/app/infra/http/HttpClient.ts

@@ -433,7 +433,17 @@ class HttpClient {
 
   // ============ File management API ============
   public uploadDocumentFile(file: File): Promise<{ file_id: string }> {
-    return this.post('/api/v1/files/documents', file);
+    const formData = new FormData();
+    formData.append('file', file);
+
+    return this.request<{ file_id: string }>({
+      method: 'post',
+      url: '/api/v1/files/documents',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
   }
 
   // ============ Knowledge Base API ============

web/src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

web/src/i18n/locales/en-US.ts

@@ -251,6 +251,18 @@ const enUS = {
     embeddingModelDescription:
       'Used to vectorize the text, you can configure it in the Models page',
     updateTime: 'Updated ',
+    documentsTab: {
+      name: 'Name',
+      status: 'Status',
+      noResults: 'No results',
+      dragAndDrop: 'Drag and drop files here or click to upload',
+      uploading: 'Uploading...',
+      supportedFormats:
+        'Supports PDF, Word, TXT, Markdown and other document formats',
+      uploadSuccess: 'File uploaded successfully!',
+      uploadError: 'File upload failed, please try again',
+      uploadingFile: 'Uploading file...',
+    },
   },
   register: {
     title: 'Initialize LangBot 👋',

web/src/i18n/locales/ja-JP.ts

@@ -234,7 +234,38 @@ const jaJP = {
   },
   knowledge: {
     title: '知識ベース',
-    description: 'LLMの応答品質を向上させるための知識ベースを設定します',
+    createKnowledgeBase: '知識ベースを作成',
+    editKnowledgeBase: '知識ベースを編集',
+    editDocument: 'ドキュメント',
+    description: 'LLMの回答品質向上のための知識ベースを設定します',
+    metadata: 'メタデータ',
+    documents: 'ドキュメント',
+    kbNameRequired: '知識ベース名は必須です',
+    kbDescriptionRequired: '知識ベースの説明は必須です',
+    embeddingModelUUIDRequired: '埋め込みモデルは必須です',
+    daysAgo: '日前',
+    today: '今日',
+    kbName: '知識ベース名',
+    kbDescription: '知識ベースの説明',
+    defaultDescription: '知識ベース',
+    embeddingModelUUID: '埋め込みモデル',
+    selectEmbeddingModel: '埋め込みモデルを選択',
+    embeddingModelDescription:
+      'テキストのベクトル化に使用する埋め込みモデルを管理します',
+    updateTime: '更新日時',
+    documentsTab: {
+      name: '名前',
+      status: 'ステータス',
+      noResults: '結果がありません',
+      dragAndDrop:
+        'ファイルをここにドラッグ&ドロップするか、クリックしてアップロードしてください',
+      uploading: 'アップロード中...',
+      supportedFormats:
+        'PDF、Word、TXT、Markdownなどのドキュメントファイルをサポートしています',
+      uploadSuccess: 'ファイルのアップロードに成功しました！',
+      uploadError: 'ファイルのアップロードに失敗しました。再度お試しください',
+      uploadingFile: 'ファイルをアップロード中...',
+    },
   },
   register: {
     title: 'LangBot を初期化 👋',

web/src/i18n/locales/zh-Hans.ts

@@ -227,7 +227,35 @@ const zhHans = {
   },
   knowledge: {
     title: '知识库',
+    createKnowledgeBase: '创建知识库',
+    editKnowledgeBase: '编辑知识库',
+    editDocument: '文档',
     description: '配置可用于提升模型回复质量的知识库',
+    metadata: '元数据',
+    documents: '文档',
+    kbNameRequired: '知识库名称不能为空',
+    kbDescriptionRequired: '知识库描述不能为空',
+    embeddingModelUUIDRequired: '嵌入模型不能为空',
+    daysAgo: '天前',
+    today: '今天',
+    kbName: '知识库名称',
+    kbDescription: '知识库描述',
+    defaultDescription: '一个知识库',
+    embeddingModelUUID: '嵌入模型',
+    selectEmbeddingModel: '选择嵌入模型',
+    embeddingModelDescription: '用于向量化文本，可在模型配置页面配置',
+    updateTime: '更新于',
+    documentsTab: {
+      name: '名称',
+      status: '状态',
+      noResults: '暂无结果',
+      dragAndDrop: '拖拽文件到此处或点击上传',
+      uploading: '上传中...',
+      supportedFormats: '支持 PDF、Word、TXT、Markdown 等文档格式',
+      uploadSuccess: '文件上传成功！',
+      uploadError: '文件上传失败，请重试',
+      uploadingFile: '上传文件中...',
+    },
   },
   register: {
     title: '初始化 LangBot 👋',