@spacemade/ui 0.0.1

package/src/components/storage/table/vectorStoreTable.tsx

@@ -0,0 +1,461 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useRouter } from 'next/router'
+
+import { VectorStore } from '@store/model'
+import { ProviderIconMap, ProviderKey } from '@store/model/provider.model'
+import { useGetActiveProjectQuery } from '@store/slice/api/projectApiSlice'
+import { useGetVectorStoresQuery } from '@store/slice/api/vectorStoreApiSlice'
+
+import Badge from '@components/common/badge/Badge'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Spinner from '@components/common/loading/Spinner'
+
+import { defaultAvatar } from '@helpers/images'
+import { getUserNameFromUser, truncateString } from '@helpers/string'
+import type { ThemeColorsKeys } from '@helpers/theme/colors'
+
+const PAGE_SIZE_OPTIONS = [10, 15, 25, 50]
+
+const normalizeText = (value?: string) => (value || '').trim().toLowerCase()
+
+const toTime = (value?: string) => {
+  const ms = new Date(String(value || '')).getTime()
+  return Number.isFinite(ms) ? ms : 0
+}
+
+const formatTimestamp = (value?: string) => {
+  const ms = toTime(value)
+  if (!ms) return '-'
+  return new Date(ms).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+const getStatusBadgeProps = (
+  status?: 'ready' | 'pending' | 'failed' | null
+): {
+  bgColor: ThemeColorsKeys
+  textColor: ThemeColorsKeys
+  label: string
+} => {
+  switch (status) {
+    case 'ready':
+      return {
+        bgColor: 'success',
+        textColor: 'white',
+        label: 'Ready',
+      }
+    case 'failed':
+      return {
+        bgColor: 'danger',
+        textColor: 'white',
+        label: 'Failed',
+      }
+    default:
+      return {
+        bgColor: 'warning',
+        textColor: 'dark',
+        label: 'Pending',
+      }
+  }
+}
+
+const getProviderIcon = (store: VectorStore) => {
+  const providerSetting = (store as any).providerSetting || (store as any).provider_setting
+  const provider = providerSetting?.provider
+  const providerKey = provider?.key
+
+  if (!providerKey) return null
+  return ProviderIconMap[providerKey as ProviderKey]
+}
+
+const VectorStoresTable = ({
+  skipPaging = false,
+  onCreate,
+  onEmptyStateChange,
+}: {
+  skipPaging?: boolean
+  onCreate?: () => void
+  onEmptyStateChange?: (isEmptyState: boolean) => void
+}) => {
+  const router = useRouter()
+
+  const [searchQuery, setSearchQuery] = useState('')
+  const [statusFilter, setStatusFilter] = useState<'all' | 'ready' | 'pending' | 'failed'>('all')
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(15)
+  const lastActiveProjectIdRef = useRef<string>('')
+
+  const { data: activeProjectData } = useGetActiveProjectQuery()
+  const activeProjectId =
+    typeof activeProjectData?.projectId === 'string'
+      ? activeProjectData.projectId.trim()
+      : ''
+
+  const { data, isLoading, isFetching, refetch } = useGetVectorStoresQuery({
+    limit: 500,
+    page: 1,
+  })
+
+  useEffect(() => {
+    if (lastActiveProjectIdRef.current === activeProjectId) return
+    lastActiveProjectIdRef.current = activeProjectId
+    void refetch()
+  }, [activeProjectId, refetch])
+
+  const rows = useMemo(() => {
+    const list = [...(data?.results || [])]
+    return list.sort((a, b) => toTime((b as any).updatedAt || (b as any).updated_at) - toTime((a as any).updatedAt || (a as any).updated_at))
+  }, [data?.results])
+
+  const filteredRows = useMemo(() => {
+    const normalizedSearch = normalizeText(searchQuery)
+    return rows.filter((store: VectorStore) => {
+      const normalizedStatus = (store.providerStatus || 'pending') as 'ready' | 'pending' | 'failed'
+      if (statusFilter !== 'all' && normalizedStatus !== statusFilter) return false
+      if (!normalizedSearch) return true
+
+      const providerSetting = (store as any).providerSetting || (store as any).provider_setting
+      const owner =
+        (store as any).owner ||
+        providerSetting?.user ||
+        providerSetting?.owner
+      const ownerName = getUserNameFromUser(owner)
+      const haystack = normalizeText(
+        `${store.id} ${store.name} ${store.description || ''} ${ownerName || ''} ${normalizedStatus}`
+      )
+      return haystack.includes(normalizedSearch)
+    })
+  }, [rows, searchQuery, statusFilter])
+
+  const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize))
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages)
+  }, [page, totalPages])
+
+  useEffect(() => {
+    if (!onEmptyStateChange) return
+    if (isLoading || isFetching) return
+    onEmptyStateChange(rows.length === 0)
+  }, [isLoading, isFetching, onEmptyStateChange, rows.length])
+
+  const visibleRows = useMemo(() => {
+    const start = (page - 1) * pageSize
+    return filteredRows.slice(start, start + pageSize)
+  }, [filteredRows, page, pageSize])
+
+  const onRowClick = (store: VectorStore) => {
+    router.push(`/storage/${store.id}/${encodeURIComponent(store.name || 'store')}`)
+  }
+
+  return (
+    <div className="storage-fullscreen-table">
+      <div className="storage-table-toolbar">
+        <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
+          <div className="d-flex align-items-center gap-2">
+            <h2 className="h6 mb-0 fw-bold text-dark">Storage Directory</h2>
+            <span className="small text-muted">{filteredRows.length.toLocaleString('en-US')} stores</span>
+          </div>
+          {onCreate && (
+            <button
+              type="button"
+              onClick={onCreate}
+              className="btn btn-primary btn-sm rounded-pill fw-bold px-3"
+            >
+              + Add Storage
+            </button>
+          )}
+        </div>
+
+        <div className="toolbar-controls">
+          <input
+            type="search"
+            className="form-control"
+            placeholder="Search by storage, owner, id, or description"
+            value={searchQuery}
+            onChange={(event) => {
+              setSearchQuery(event.target.value)
+              setPage(1)
+            }}
+            aria-label="Search storage"
+          />
+
+          <select
+            className="form-select"
+            value={statusFilter}
+            onChange={(event) => {
+              setStatusFilter(event.target.value as 'all' | 'ready' | 'pending' | 'failed')
+              setPage(1)
+            }}
+            aria-label="Filter by status"
+          >
+            <option value="all">All Statuses</option>
+            <option value="ready">Ready</option>
+            <option value="pending">Pending</option>
+            <option value="failed">Failed</option>
+          </select>
+
+          <button
+            type="button"
+            className="btn btn-light"
+            onClick={() => {
+              setSearchQuery('')
+              setStatusFilter('all')
+              setPage(1)
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div className="storage-table-shell">
+        <div className="table-responsive storage-table-scroll custom-scroll-bar">
+          <table className="table align-middle mb-0 storage-table-modern">
+            <thead>
+              <tr>
+                <th style={{ minWidth: 340 }}>Storage</th>
+                <th style={{ minWidth: 220 }}>Owner</th>
+                <th style={{ minWidth: 130 }}>Status</th>
+                <th style={{ minWidth: 170 }}>Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {visibleRows.map((store: VectorStore) => {
+                const ProviderIcon = getProviderIcon(store)
+                const providerSetting = (store as any).providerSetting || (store as any).provider_setting
+                const owner =
+                  (store as any).owner ||
+                  providerSetting?.user ||
+                  providerSetting?.owner
+                const ownerAvatar = owner?.profileMedia?.media?.sourceUrl || defaultAvatar
+                const ownerName = String(getUserNameFromUser(owner) || 'Unknown owner')
+                const updatedAt = (store as any).updatedAt || (store as any).updated_at
+
+                return (
+                  <tr
+                    key={store.id}
+                    className="cursor-pointer"
+                    onClick={() => onRowClick(store)}
+                  >
+                    <td>
+                      <div className="d-flex align-items-center gap-3 min-width-0">
+                        <span
+                          className="rounded-circle border d-inline-flex align-items-center justify-content-center flex-shrink-0 bg-white"
+                          style={{ width: 36, height: 36, borderColor: '#d7e2ec' }}
+                        >
+                          {ProviderIcon ? (
+                            typeof ProviderIcon === 'string' ? (
+                              <img
+                                src={ProviderIcon}
+                                alt=""
+                                width={22}
+                                height={22}
+                                style={{ objectFit: 'contain' }}
+                              />
+                            ) : (
+                              <ProviderIcon width={22} height={22} />
+                            )
+                          ) : (
+                            <i className="bi bi-hdd-stack text-muted" aria-hidden="true" />
+                          )}
+                        </span>
+
+                        <div className="d-flex flex-column min-width-0">
+                          <span className="fw-semibold text-truncate">{store.name || 'Untitled storage'}</span>
+                          <span className="text-muted small text-truncate">
+                            {truncateString(store.description || 'No description', 120)}
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+
+                    <td>
+                      <div className="d-flex align-items-center gap-2">
+                        <OptimizedImage
+                          src={ownerAvatar}
+                          alt={ownerName}
+                          width={30}
+                          height={30}
+                          className="rounded-circle object-fit-cover flex-shrink-0"
+                        />
+                        <span className="text-truncate">{ownerName}</span>
+                      </div>
+                    </td>
+
+                    <td>
+                      <Badge
+                        className="px-3"
+                        {...getStatusBadgeProps(store.providerStatus ?? null)}
+                      />
+                    </td>
+
+                    <td>{formatTimestamp(updatedAt)}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {!isLoading && !isFetching && visibleRows.length === 0 && (
+          <div className="text-muted text-center py-4">No storage entries match the current filters.</div>
+        )}
+
+        {(isLoading || isFetching) && (
+          <div className="d-flex justify-content-center py-4">
+            <Spinner size="sm" />
+          </div>
+        )}
+      </div>
+
+      {!skipPaging && (
+        <div className="paging-shell">
+          <div className="d-flex align-items-center gap-2">
+            <span className="small text-muted">Rows</span>
+            <select
+              className="form-select form-select-sm"
+              value={pageSize}
+              onChange={(event) => {
+                setPageSize(Number(event.target.value))
+                setPage(1)
+              }}
+              style={{ width: 90 }}
+              aria-label="Rows per page"
+            >
+              {PAGE_SIZE_OPTIONS.map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="d-flex align-items-center gap-2">
+            <span className="small text-muted">
+              Page {page} of {totalPages}
+            </span>
+            <button
+              type="button"
+              className="btn btn-sm btn-light"
+              onClick={() => setPage(1)}
+              disabled={page <= 1}
+            >
+              {'<<'}
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm btn-light"
+              onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+              disabled={page <= 1}
+            >
+              {'<'}
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm btn-light"
+              onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+              disabled={page >= totalPages}
+            >
+              {'>'}
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm btn-light"
+              onClick={() => setPage(totalPages)}
+              disabled={page >= totalPages}
+            >
+              {'>>'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      <style jsx>{`
+        .storage-fullscreen-table {
+          width: 100%;
+          display: grid;
+          gap: 0.85rem;
+        }
+
+        .storage-table-toolbar {
+          border: 1px solid #dde3ea;
+          border-radius: 14px;
+          background: linear-gradient(180deg, #f9fbfd 0%, #f4f7fb 100%);
+          padding: 0.85rem;
+          display: grid;
+          gap: 0.75rem;
+        }
+
+        .toolbar-controls {
+          display: grid;
+          gap: 0.65rem;
+          grid-template-columns: minmax(260px, 1fr) 170px auto;
+        }
+
+        .storage-table-shell {
+          border: 1px solid #dce3eb;
+          border-radius: 14px;
+          overflow: hidden;
+          background: #fff;
+        }
+
+        .storage-table-scroll {
+          max-height: calc(100vh - 350px);
+          min-height: 260px;
+          overflow: auto;
+        }
+
+        :global(.storage-table-modern thead th) {
+          position: sticky;
+          top: 0;
+          background: #f2f5f9;
+          border-bottom: 1px solid #dce3eb;
+          color: #2a3a51;
+          font-size: 0.76rem;
+          letter-spacing: 0.03em;
+          text-transform: uppercase;
+          z-index: 1;
+        }
+
+        :global(.storage-table-modern tbody tr:hover) {
+          background: #f7fafe;
+        }
+
+        :global(.storage-table-modern tbody td) {
+          border-color: #edf1f6;
+        }
+
+        :global(.min-width-0) {
+          min-width: 0;
+        }
+
+        .paging-shell {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          flex-wrap: wrap;
+        }
+
+        @media (max-width: 920px) {
+          .toolbar-controls {
+            grid-template-columns: 1fr;
+          }
+
+          .storage-table-scroll {
+            max-height: none;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default VectorStoresTable

package/src/components/storage/vectorFilesModal.tsx

@@ -0,0 +1,209 @@
+'use client'
+
+import React, { useState } from 'react'
+import { X } from 'lucide-react'
+import { toast } from 'react-toastify'
+import { useForm, FieldValues } from 'react-hook-form'
+import DropZone from '@components/common/forms/Dropzone'
+import Spinner from '@components/common/loading/Spinner'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+
+import {
+  useCreateVectorStoreFileMutation,
+} from '@store/slice/api/vectorStoreFileApiSlice'
+
+interface FormValues extends FieldValues {
+  files: File[]
+}
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes"
+
+  const k = 1024
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
+}
+
+export const VectorStoreFilesModal = ({
+  isOpen,
+  onClose,
+  vectorStoreId,
+  vectorStoreName,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  vectorStoreId: string
+  vectorStoreName: string
+}) => {
+  const [isUploading, setIsUploading] = useState(false)
+
+  const {
+    register,
+    clearErrors,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<FormValues>()
+
+  const filesToUpload = watch('files') || []
+
+  const [uploadVectorStoreFile] = useCreateVectorStoreFileMutation()
+
+  const handleClose = () => {
+    onClose()
+    setValue('files', [])
+  }
+
+  const handleUpload = async () => {
+    if (!filesToUpload?.length) return
+
+    setIsUploading(true)
+
+    try {
+      for (const file of filesToUpload) {
+        await uploadVectorStoreFile({
+          vectorStoreId,
+          file,
+        }).unwrap()
+      }
+
+      toast.success('File(s) uploaded successfully.')
+
+      setValue('files', [])
+      onClose()
+    } catch (error: any) {
+      toast.error(
+        error?.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+          ? error.data.message
+          : DEFAULT_ERROR_MESSAGE
+      )
+    } finally {
+      setIsUploading(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
+      style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)', zIndex: 1500 }}
+      onClick={handleClose}
+    >
+      <div
+        className="position-relative rounded-3 shadow-lg mx-3 d-flex flex-column"
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          backgroundColor: '#ffffff',
+          width: '700px',
+          maxHeight: '80vh',
+          height: '520px',
+        }}
+      >
+        {/* Header */}
+        <div className="d-flex align-items-center justify-content-between p-3 border-bottom">
+          <h5 className="mb-0 text-dark">
+            Upload files to <strong>{vectorStoreName}</strong>
+          </h5>
+          <button
+            onClick={handleClose}
+            className="btn btn-sm p-1"
+            style={{ backgroundColor: 'transparent', border: 'none' }}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Upload Area */}
+        <div className="flex-grow-1 p-4 mt-0 position-relative">
+          {isUploading && (
+            <div
+              className="position-absolute top-0 bottom-0 left-0 right-0 d-flex align-items-center justify-content-center"
+              style={{ backgroundColor: 'rgba(255,255,255,0.8)', zIndex: 10 }}
+            >
+              <Spinner />
+            </div>
+          )}
+          <DropZone
+            register={register}
+            name="files"
+            setFormValue={setValue}
+            clearFormErrors={clearErrors}
+            errors={errors}
+            label="Drop files to upload"
+            helperText="Supports docs, PDFs, images, text files (Max: 50MB each)"
+            isMultiple
+            align="center"
+            verticalMode
+            className="w-100"
+          />
+          {filesToUpload.length > 0 && (
+            <div
+              className="mt-3 border rounded p-3"
+              style={{
+                maxHeight: '150px',
+                overflowY: 'auto',
+                background: '#fafafa',
+              }}
+            >
+              <h6 className="mb-2">Files to upload:</h6>
+
+              {filesToUpload.map((file: File, idx: number) => (
+                <div
+                  key={idx}
+                  className="d-flex align-items-center justify-content-between border-bottom py-2"
+                >
+                  <div className="d-flex align-items-center">
+                    {file.type.startsWith('image/') && (
+                      <img
+                        src={URL.createObjectURL(file)}
+                        alt={file.name}
+                        style={{
+                          width: 40, height: 40, marginRight: 12, borderRadius: 6, objectFit: 'cover', border: '1px solid #ddd',
+                        }}
+                      />
+                    )}
+                    <div>
+                      <div className="fw-bold text-dark">{file.name}</div>
+                      <small className="text-muted">{formatFileSize(file.size)}</small>
+                    </div>
+                  </div>
+                  <button
+                    className="btn btn-sm btn-link text-danger p-0"
+                    onClick={() =>
+                      setValue(
+                        'files',
+                        filesToUpload.filter((_, i) => i !== idx)
+                      )
+                    }
+                  >
+                    <i className="bi bi-trash"></i>
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="modal-footer d-flex justify-content-end gap-2">
+          <button
+            className="btn btn-outline-secondary"
+            onClick={handleClose}
+            disabled={isUploading}
+          >
+            Cancel
+          </button>
+
+          <button
+            className="btn btn-primary text-white"
+            disabled={!filesToUpload.length || isUploading}
+            onClick={handleUpload}
+          >
+            Upload
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}