@spacemade/ui 0.0.1

package/src/pages/storage/[vectorStoreId]/[name].tsx

@@ -0,0 +1,653 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+
+import type { GetServerSideProps, NextPage } from 'next';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useDisclosure } from '@chakra-ui/react';
+import { useEffect, useState, type FormEvent } from 'react';
+import { toast } from 'react-toastify';
+
+import SideNavLayout from '@components/common/layout/SideNavLayout';
+import WithAuth from '@components/hoc/WithAuth';
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog';
+import { VectorStoreFilesModal } from '@components/storage/vectorFilesModal';
+import VectorStoreFileGrid from '@components/storage/vectorStoreFileGrid';
+import VectorStoreActions from '@components/storage/actions';
+import {
+  VectorStoreProvider,
+  useVectorStoreContext,
+} from '@context/VectorStoreContext';
+
+import type { PageProps } from '@helpers/types';
+import { APIHelpers } from '@helpers/api';
+import { FullDateAndTimeFormat } from '@helpers/date';
+import { getIconMappedWithFileType } from '@helpers/images';
+import type { VectorStore } from '@store/model/vector-store.model';
+import {
+  useDeleteVectorStoreFileMutation,
+  useGetOneVectorStoreFileQuery,
+  useUpdateVectorStoreFileMutation,
+} from '@store/slice/api/vectorStoreFileApiSlice';
+
+// ✅ same helper you use for agents, or swap for a generic createSlug
+import { createAgentSlug } from '@helpers/slugUtils';
+
+// ✅ provider icons
+import { ProviderIconMap, ProviderKey } from '@store/model/provider.model';
+
+type VectorStoreDetailPageProps = PageProps & {
+  initialVectorStore: VectorStore;
+};
+
+// 🔁 Hydrator: try to refetch, but don't crash if the query hasn't started yet
+const VectorStoreHydrator = () => {
+  const { vectorStoreId, refetchVectorStore } = useVectorStoreContext();
+
+  useEffect(() => {
+    if (!vectorStoreId || typeof refetchVectorStore !== 'function') return;
+
+    try {
+      refetchVectorStore();
+    } catch (err: any) {
+      if (
+        !(err instanceof Error) ||
+        !err.message?.includes('has not been started yet')
+      ) {
+        // eslint-disable-next-line no-console
+        console.error('Error refetching vector store', err);
+      }
+      // If it hasn't started yet, we just rely on initialVectorStore / normal query flow.
+    }
+  }, [vectorStoreId, refetchVectorStore]);
+
+  return null;
+};
+
+function formatBytes(bytes?: number | null) {
+  if (!bytes || bytes <= 0) return '—'
+  const kb = bytes / 1024
+  if (kb < 1024) return `${kb.toFixed(1)} KB`
+  return `${(kb / 1024).toFixed(2)} MB`
+}
+
+function normalizeFileStatus(status?: string | null) {
+  const safeStatus = String(status || 'pending').toLowerCase().trim()
+  if (safeStatus === 'completed') return { label: 'Completed', klass: 'bg-success' }
+  if (safeStatus === 'failed') return { label: 'Failed', klass: 'bg-danger' }
+  if (safeStatus === 'ready') return { label: 'Ready', klass: 'bg-info text-dark' }
+  return { label: 'Pending', klass: 'bg-warning text-dark' }
+}
+
+const VectorStoreFileDetailsPanel = ({
+  vectorStoreId,
+  fileId,
+  onClearSelection,
+}: {
+  vectorStoreId: string
+  fileId: string
+  onClearSelection: () => void
+}) => {
+  const [isDeleteOpen, setDeleteOpen] = useState(false)
+  const [nextFileName, setNextFileName] = useState('')
+
+  const [updateFile, { isLoading: isUpdating }] = useUpdateVectorStoreFileMutation()
+  const [deleteFile, { isLoading: isDeleting }] = useDeleteVectorStoreFileMutation()
+
+  const {
+    data: file,
+    isLoading,
+    isFetching,
+    isError,
+  } = useGetOneVectorStoreFileQuery(
+    { vectorStoreId, fileId },
+    { skip: !vectorStoreId || !fileId }
+  )
+
+  useEffect(() => {
+    if (file?.fileName) setNextFileName(file.fileName)
+  }, [file?.fileName])
+
+  const handleRename = async (event: FormEvent) => {
+    event.preventDefault()
+    if (!file) return
+
+    const trimmed = nextFileName.trim()
+    if (!trimmed) {
+      toast.error('File name cannot be empty')
+      return
+    }
+    if (trimmed === file.fileName) return
+
+    try {
+      await updateFile({
+        vectorStoreId,
+        fileId: file.id,
+        fileName: trimmed,
+      }).unwrap()
+      toast.success('File name updated')
+    } catch {
+      toast.error('Failed to rename file')
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!file) return
+    await deleteFile({ vectorStoreId, fileId: file.id }).unwrap()
+    toast.success('File deleted')
+    onClearSelection()
+    setDeleteOpen(false)
+  }
+
+  const handleCopyId = async () => {
+    if (!file?.id) return
+    try {
+      await navigator.clipboard.writeText(file.id)
+      toast.success('File ID copied')
+    } catch {
+      toast.error('Unable to copy file ID')
+    }
+  }
+
+  if (isLoading || isFetching) {
+    return (
+      <div className="file-details-panel">
+        <div className="file-panel-head">
+          <h3>File Details</h3>
+        </div>
+        <p className="text-muted mb-0">Loading file details...</p>
+      </div>
+    )
+  }
+
+  if (isError || !file) {
+    return (
+      <div className="file-details-panel">
+        <div className="file-panel-head">
+          <h3>File Details</h3>
+          <button type="button" className="btn btn-sm btn-light" onClick={onClearSelection}>
+            Close
+          </button>
+        </div>
+        <p className="text-muted mb-0">File not found. It may have been deleted.</p>
+      </div>
+    )
+  }
+
+  const status = normalizeFileStatus(file.fileStatus)
+  const isRenameDisabled =
+    isUpdating ||
+    !nextFileName.trim() ||
+    nextFileName.trim() === String(file.fileName || '').trim()
+
+  return (
+    <div className="file-details-panel">
+      <div className="file-panel-head">
+        <h3>File Details</h3>
+        <button type="button" className="btn btn-sm btn-light" onClick={onClearSelection}>
+          Close
+        </button>
+      </div>
+
+      <div className="file-main-meta">
+        <div className="file-icon-wrap">
+          <i className={getIconMappedWithFileType(file.mimeType || 'application/octet-stream')} />
+        </div>
+        <div className="min-width-0">
+          <p className="mb-1 fw-semibold text-truncate">{file.fileName || 'Unnamed file'}</p>
+          <p className="mb-0 text-muted small">
+            {formatBytes(file.fileSizeBytes)} {file.mimeType ? `• ${file.mimeType}` : ''}
+          </p>
+        </div>
+      </div>
+
+      <form onSubmit={handleRename} className="rename-form">
+        <label htmlFor="fileNameInput" className="form-label fw-semibold mb-1">
+          Rename
+        </label>
+        <div className="d-flex gap-2">
+          <input
+            id="fileNameInput"
+            type="text"
+            className="form-control"
+            value={nextFileName}
+            onChange={(event) => setNextFileName(event.target.value)}
+            maxLength={180}
+          />
+          <button type="submit" className="btn btn-primary" disabled={isRenameDisabled}>
+            Save
+          </button>
+        </div>
+      </form>
+
+      <div className="action-row">
+        <button type="button" className="btn btn-outline-secondary" onClick={handleCopyId}>
+          Copy File ID
+        </button>
+        <button
+          type="button"
+          className="btn btn-outline-danger"
+          onClick={() => setDeleteOpen(true)}
+          disabled={isDeleting}
+        >
+          Delete File
+        </button>
+      </div>
+
+      <dl className="details-grid mb-0">
+        <dt>Status</dt>
+        <dd>
+          <span className={`badge ${status.klass}`}>{status.label}</span>
+        </dd>
+
+        <dt>Created</dt>
+        <dd>
+          {file.createdAt && !isNaN(new Date(file.createdAt).getTime())
+            ? FullDateAndTimeFormat(file.createdAt)
+            : '-'}
+        </dd>
+
+        <dt>Updated</dt>
+        <dd>
+          {file.updatedAt && !isNaN(new Date(file.updatedAt).getTime())
+            ? FullDateAndTimeFormat(file.updatedAt)
+            : '-'}
+        </dd>
+
+        <dt>File ID</dt>
+        <dd className="text-break">{file.id || '-'}</dd>
+
+        <dt>Provider File ID</dt>
+        <dd className="text-break">{file.vectorFileId || '-'}</dd>
+      </dl>
+
+      <DeleteDialog
+        isOpen={isDeleteOpen}
+        onClose={() => setDeleteOpen(false)}
+        titleOverride={`Delete "${file.fileName}" from storage?`}
+        entityDescription="file"
+        onDelete={handleDelete}
+      />
+
+      <style jsx>{`
+        .file-details-panel {
+          border: 1px solid #dce3eb;
+          border-radius: 14px;
+          background: #fff;
+          padding: 1rem;
+          display: grid;
+          gap: 1rem;
+          min-height: 360px;
+        }
+
+        .file-panel-head {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+
+        .file-panel-head h3 {
+          font-size: 1rem;
+          margin: 0;
+          font-weight: 700;
+          color: #28374d;
+        }
+
+        .file-main-meta {
+          border: 1px solid #ecf1f6;
+          border-radius: 12px;
+          background: #f8fafd;
+          padding: 0.85rem;
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          min-width: 0;
+        }
+
+        .file-icon-wrap {
+          width: 44px;
+          height: 44px;
+          border-radius: 10px;
+          border: 1px solid #dce3eb;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          background: #ffffff;
+          color: #4f6279;
+          font-size: 1.2rem;
+          flex-shrink: 0;
+        }
+
+        .rename-form {
+          border-top: 1px solid #ecf1f6;
+          border-bottom: 1px solid #ecf1f6;
+          padding: 0.9rem 0;
+        }
+
+        .action-row {
+          display: flex;
+          gap: 0.6rem;
+          flex-wrap: wrap;
+        }
+
+        .details-grid {
+          display: grid;
+          grid-template-columns: minmax(120px, 150px) 1fr;
+          gap: 0.5rem 0.75rem;
+          font-size: 0.92rem;
+        }
+
+        .details-grid dt {
+          color: #5f6f86;
+          font-weight: 600;
+          margin: 0;
+        }
+
+        .details-grid dd {
+          margin: 0;
+          color: #2e3f56;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+const VectorStoreDetailHero = ({
+  initialVectorStore,
+  safeName,
+}: {
+  initialVectorStore: VectorStore
+  safeName: string
+}) => {
+  const { vectorStore } = useVectorStoreContext();
+
+  const storeForIcon = vectorStore ?? initialVectorStore;
+
+  const providerSetting =
+    (storeForIcon as any)?.providerSetting ??
+    (storeForIcon as any)?.provider_setting ??
+    null;
+
+  const provider = providerSetting?.provider ?? null;
+
+  const IconComponent = provider?.key
+    ? ProviderIconMap[provider.key as ProviderKey]
+    : null;
+
+  const HeroIconComponent = IconComponent;
+
+  return (
+    <div className="mt-6 w-100 px-3 px-md-0">
+      <div
+        className="p-5 rounded-3 border-0"
+        style={{
+          background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
+        }}
+      >
+        <div className="row align-items-center g-4">
+          {HeroIconComponent && (
+            <div className="col-lg-3 text-center">
+              <div className="bg-white d-flex align-items-center justify-content-center w-xs-120p h-xs-120p shadow mx-auto">
+                {typeof HeroIconComponent === 'string' ? (
+                  <img
+                    src={HeroIconComponent}
+                    alt={provider?.label || 'provider icon'}
+                    className="w-100 h-100 object-fit-contain"
+                  />
+                ) : (
+                  <HeroIconComponent width={72} height={72} />
+                )}
+              </div>
+            </div>
+          )}
+          <div className="col-lg-6">
+            <p className="text-uppercase small fw-semibold mb-2">Storage</p>
+            <h1 className="display-6 fw-bold mb-2 d-flex align-items-center gap-2">
+              <span className="text-truncate">{safeName}</span>
+            </h1>
+            {storeForIcon?.description?.trim() && (
+              <p className="lead mb-0">{storeForIcon.description}</p>
+            )}
+          </div>
+          <div className="col-lg-3 d-flex align-items-center justify-content-end">
+            <div className="d-flex align-items-center gap-2">
+              <VectorStoreActions />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const VectorStoreDetailPage: NextPage<VectorStoreDetailPageProps> = ({
+  initialVectorStore,
+}) => {
+  const router = useRouter();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const storageBackHref = '/storage';
+
+  const safeId =
+    typeof router.query.vectorStoreId === 'string'
+      ? router.query.vectorStoreId
+      : initialVectorStore?.id;
+
+  const safeName =
+    typeof router.query.name === 'string'
+      ? router.query.name
+      : initialVectorStore?.name ?? '';
+  const selectedFileId =
+    typeof router.query.fileId === 'string' ? router.query.fileId : '';
+
+  if (!safeId) return null;
+
+  const handleSelectFile = (file: { id: string }) => {
+    if (!file?.id) return;
+    router.replace(
+      {
+        pathname: router.pathname,
+        query: { ...router.query, fileId: file.id },
+      },
+      undefined,
+      { shallow: true, scroll: false }
+    );
+  };
+
+  const clearSelectedFile = () => {
+    const nextQuery: Record<string, any> = { ...router.query };
+    delete nextQuery.fileId;
+    router.replace(
+      {
+        pathname: router.pathname,
+        query: nextQuery,
+      },
+      undefined,
+      { shallow: true, scroll: false }
+    );
+  };
+
+  return (
+    <VectorStoreProvider
+      vectorStoreId={safeId}
+      initialVectorStore={initialVectorStore}
+    >
+      <>
+        {/* ⬇️ attempts to refetch latest store data when possible */}
+        <VectorStoreHydrator />
+
+        <VectorStoreFilesModal
+          isOpen={isOpen}
+          onClose={onClose}
+          vectorStoreId={safeId}
+          vectorStoreName={safeName}
+        />
+
+        <SideNavLayout
+          useMainContentAreaId={false}
+          sidebarTopContent={() => (
+            <>
+              <h2 className="sidebar-heading">Storage</h2>
+              <ul className="sidebar-list mb-5">
+                <li className="sidebar-item" title="Back to Storage">
+                  <Link href={storageBackHref} className="sidebar-link">
+                    <i className="bi bi-arrow-left" /> <span>Back</span>
+                  </Link>
+                </li>
+              </ul>
+            </>
+          )}
+          renderMainNav={() => null}
+        >
+          <VectorStoreDetailHero
+            initialVectorStore={initialVectorStore}
+            safeName={safeName}
+          />
+
+          <div className="mt-4 storage-workspace px-3 px-md-0">
+            <div className="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+              <div>
+                <h2 className="h5 fw-bold mb-1">Storage Workspace</h2>
+                <p className="text-muted mb-0 small">
+                  Browse files, then select one for detail actions.
+                </p>
+              </div>
+              <button
+                onClick={onOpen}
+                className="btn btn-primary rounded-pill fw-bold px-4"
+              >
+                + Upload Files
+              </button>
+            </div>
+            <div className="workspace-grid">
+              <div className="workspace-left">
+                <VectorStoreFileGrid
+                  vectorStoreId={safeId}
+                  selectedFileId={selectedFileId || null}
+                  onSelectFile={handleSelectFile}
+                />
+              </div>
+
+              <div className="workspace-right">
+                {selectedFileId ? (
+                  <VectorStoreFileDetailsPanel
+                    vectorStoreId={safeId}
+                    fileId={selectedFileId}
+                    onClearSelection={clearSelectedFile}
+                  />
+                ) : (
+                  <div className="file-placeholder">
+                    <h3>File Details</h3>
+                    <p>Select a file from the directory to see metadata and actions.</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <style jsx>{`
+            .storage-workspace {
+              padding-bottom: 1.5rem;
+            }
+
+            .workspace-grid {
+              display: grid;
+              gap: 1rem;
+              grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
+              align-items: start;
+            }
+
+            .workspace-left,
+            .workspace-right {
+              min-width: 0;
+            }
+
+            .file-placeholder {
+              border: 1px solid #dce3eb;
+              border-radius: 14px;
+              background: linear-gradient(180deg, #ffffff, #fbfdff);
+              padding: 1rem;
+              min-height: 360px;
+            }
+
+            .file-placeholder h3 {
+              margin: 0 0 0.4rem;
+              font-size: 1rem;
+              font-weight: 700;
+              color: #2a3a51;
+            }
+
+            .file-placeholder p {
+              margin: 0;
+              color: #657790;
+            }
+
+            @media (max-width: 1180px) {
+              .workspace-grid {
+                grid-template-columns: 1fr;
+              }
+            }
+          `}</style>
+        </SideNavLayout>
+      </>
+    </VectorStoreProvider>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps<
+  VectorStoreDetailPageProps
+> = async (context) => {
+  const { vectorStoreId, name } = context.query;
+  const cookie = context.req.headers.cookie || '';
+
+  // Require auth
+  const authUserData = await APIHelpers.get('/auth/user', { Cookie: cookie });
+  if (!authUserData?.user) {
+    return {
+      redirect: {
+        destination: '/login',
+        permanent: false,
+      },
+    };
+  }
+
+  // Validate vector store
+  const data = await APIHelpers.get(`/storage/${vectorStoreId}`, {
+    Cookie: cookie,
+  });
+
+  const store = (data as any)?.store as VectorStore | undefined;
+
+  if (!data || (data as any).error || !store) {
+    return {
+      redirect: {
+        destination: '/storage',
+        permanent: false,
+      },
+    };
+  }
+
+  // ✅ Slug canonicalization (like the agent page)
+  const correctSlug = createAgentSlug(store.name || '');
+  const requestedSlug =
+    typeof name === 'string' ? name : Array.isArray(name) ? name[0] : undefined;
+
+  // If slug missing or wrong -> redirect to canonical /storage/[id]/[slug]
+  if (requestedSlug !== correctSlug) {
+    return {
+      redirect: {
+        destination: `/storage/${store.id}/${correctSlug}`,
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {
+      pageTitle: store.name ?? 'Storage',
+      initialVectorStore: store,
+    },
+  };
+};
+
+export default WithAuth(VectorStoreDetailPage);