@spacemade/ui 0.0.1

package/src/components/projects/actions/ProjectCreateModal.tsx

@@ -0,0 +1,577 @@
+'use client'
+
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react'
+import { useRouter } from '@lib/next-router'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import { CheckBox } from '@components/common/forms/CheckBox'
+
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { useListProvidersWithMySettingsQuery } from '@store/slice/api/providerApiSlice'
+import { useGetVectorStoresQuery } from '@store/slice/api/vectorStoreApiSlice'
+import { SiteLogoIcon } from '@helpers/images'
+import { transformToURLFormat } from '@helpers/string'
+import { BASE_API_URL } from '@helpers/api'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+
+interface FormValues extends FieldValues {
+  name: string
+  providerSettingId?: string
+  vectorStoreId?: string
+  addProjectStorage?: boolean
+}
+
+const createSseParser = (
+  onEvent: (evt: { event: string; data: string }) => void
+) => {
+  let buffer = ''
+  let eventType = 'message'
+  let dataLines: string[] = []
+
+  const flushEvent = () => {
+    if (dataLines.length === 0) return
+    onEvent({ event: eventType || 'message', data: dataLines.join('\n') })
+    eventType = 'message'
+    dataLines = []
+  }
+
+  const feed = (chunk: string) => {
+    buffer += chunk
+
+    while (true) {
+      const nlIndex = buffer.indexOf('\n')
+      if (nlIndex === -1) break
+
+      let line = buffer.slice(0, nlIndex)
+      if (line.endsWith('\r')) line = line.slice(0, -1)
+      buffer = buffer.slice(nlIndex + 1)
+
+      if (line === '') {
+        flushEvent()
+        continue
+      }
+
+      if (line.startsWith(':')) continue
+
+      if (line.startsWith('event:')) {
+        eventType = line.slice('event:'.length).trim() || 'message'
+        continue
+      }
+
+      if (line.startsWith('data:')) {
+        let d = line.slice('data:'.length)
+        if (d.startsWith(' ')) d = d.slice(1)
+        dataLines.push(d)
+        continue
+      }
+
+      const t = line.trim()
+      if (t.startsWith('{') || t === '[DONE]') dataLines.push(t)
+    }
+  }
+
+  const end = () => flushEvent()
+
+  return { feed, end }
+}
+
+export default function ProjectCreateModal({
+  isOpen,
+  onClose,
+  onCreate,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onCreate: (data: {
+    name: string
+    providerSettingId?: string
+    vectorStoreId?: string
+    addProjectStorage?: boolean
+  }) => Promise<{ id: string }> | Promise<void> | void
+}) {
+  const router = useRouter()
+  const { user } = useUserAuthContext()
+  const streamAbortRef = useRef<AbortController | null>(null)
+  const logsContainerRef = useRef<HTMLDivElement | null>(null)
+  const [streamLogs, setStreamLogs] = useState<string[]>([])
+  const [streamError, setStreamError] = useState<string | null>(null)
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [showLogs, setShowLogs] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setError,
+    setValue,
+    control,
+    watch,
+    reset,
+    formState: { errors, isSubmitting, isSubmitSuccessful },
+  } = useForm<FormValues>({
+    defaultValues: {
+      name: '',
+      providerSettingId: undefined,
+      vectorStoreId: undefined,
+      addProjectStorage: false,
+    },
+  })
+
+  const providerSettingId = watch('providerSettingId')
+  const addProjectStorage = watch('addProjectStorage')
+
+  const { data: providersResp } = useListProvidersWithMySettingsQuery(
+    {
+      page: 1,
+      limit: 50,
+      isConnected: true,
+      hasProject: true,
+    },
+    { skip: !isOpen || !user?.id }
+  )
+
+  const getProviderSettings = (provider: any) => {
+    const list = Array.isArray(provider?.mySettings) ? provider.mySettings : []
+    if (list.length > 0) return list
+    return provider?.mySetting ? [provider.mySetting] : []
+  }
+
+  const providerSettingOptions = useMemo(() => {
+    const rows = providersResp?.results ?? []
+
+    const filtered = rows.flatMap((p: any) => {
+      const isConnected = p?.isConnected === true
+      const hasProject = p?.hasProject === true
+      const isActive = (p?.status ?? 'active') === 'active'
+      if (!isConnected || !hasProject || !isActive) return []
+
+      const settings = getProviderSettings(p)
+      if (!settings.length) return []
+
+      return settings.map((setting: any) => {
+        const provider = p
+
+        const image =
+          provider?.iconMedia?.media?.sourceUrl ||
+          provider?.logoUrl ||
+          SiteLogoIcon
+
+        return {
+          value: setting.id,
+          label: `${provider.label} - ${setting.name ?? 'Default'}`,
+          image,
+        }
+      })
+    })
+
+    return [
+      ...filtered,
+      { value: 'browse-providers', label: 'Connect Providers' },
+    ]
+  }, [providersResp])
+
+
+
+  const formatProviderSettingOption = (opt: any) => {
+    if (opt?.value === 'browse-providers') return opt.label
+    return (
+      <div className="d-flex align-items-center gap-2">
+        <div
+          className="bg-white d-flex align-items-center justify-content-center rounded"
+          style={{ width: 28, height: 28, overflow: 'hidden' }}
+        >
+          <img
+            src={opt.image || SiteLogoIcon}
+            alt=""
+            style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+          />
+        </div>
+        <div className="d-flex flex-column" style={{ lineHeight: 1.1 }}>
+          <span className="fw-semibold">{opt.label}</span>
+        </div>
+      </div>
+    )
+  }
+
+  const handleProviderSettingChange = (input: any) => {
+    const value = typeof input === 'string' ? input : input?.value
+
+    if (value === 'browse-providers') {
+      router.push('/providers')
+      setValue('providerSettingId', undefined)
+      setValue('vectorStoreId', undefined)
+      setValue('addProjectStorage', false)
+      return
+    }
+
+    setValue('providerSettingId', value)
+    setValue('vectorStoreId', undefined)
+    setValue('addProjectStorage', false)
+  }
+  const { data: vectorStoresResp } = useGetVectorStoresQuery(
+    providerSettingId
+      ? ({ page: 1, limit: 50, providerSettingId } as any)
+      : ({ page: 1, limit: 50 } as any),
+    { skip: !isOpen || !providerSettingId }
+  )
+
+  const vectorStoreOptions = useMemo(
+  () => [
+    ...(vectorStoresResp?.results ?? []).map((store: any) => ({
+      value: store.id,
+      label: (
+        <div className="d-flex align-items-center gap-2">
+          <i className="bi bi-database-fill"></i>
+          <span className="fw-semibold text-dark">{store.name}</span>
+        </div>
+      ),
+    })),
+    {
+      value: 'browse-vector-stores',
+      label: (
+        <div className="d-flex align-items-center gap-2">
+          <i className="bi bi-search"></i>
+          <span className="fw-semibold text-dark">Browse Storage</span>
+        </div>
+      ),
+    },
+  ],
+  [vectorStoresResp]
+)
+
+
+  const handleVectorStoreChange = (input: any) => {
+    const value = input?.value ?? input?.target?.value ?? input
+
+    if (value === 'browse-vector-stores') {
+      router.push('/storage')
+      setValue('vectorStoreId', undefined)
+      return
+    }
+
+    setValue('vectorStoreId', value)
+  }
+  useEffect(() => {
+    if (!isOpen) {
+      streamAbortRef.current?.abort()
+      setIsStreaming(false)
+      setStreamLogs([])
+      setStreamError(null)
+      setShowLogs(false)
+      reset({
+        name: '',
+        providerSettingId: undefined,
+        vectorStoreId: undefined,
+        addProjectStorage: false,
+      })
+    }
+  }, [isOpen, reset])
+
+  useEffect(() => {
+    if (!showLogs) return
+    const container = logsContainerRef.current
+    if (!container) return
+    container.scrollTop = container.scrollHeight
+  }, [streamLogs, streamError, showLogs])
+
+  useEffect(() => {
+    return () => {
+      streamAbortRef.current?.abort()
+    }
+  }, [])
+
+  const handleClose = () => {
+    streamAbortRef.current?.abort()
+    onClose()
+  }
+
+  const createVectorStoreWithLogs = async ({
+    name,
+    providerSettingId,
+  }: {
+    name: string
+    providerSettingId?: string
+  }) => {
+    if (!providerSettingId) {
+      throw new Error('Provider connection is required to create storage.')
+    }
+
+    setStreamLogs([])
+    setStreamError(null)
+    setShowLogs(true)
+    streamAbortRef.current?.abort()
+
+    const controller = new AbortController()
+    streamAbortRef.current = controller
+    setIsStreaming(true)
+
+    try {
+      const res = await fetch(`${BASE_API_URL}/storage?stream=1`, {
+        method: 'POST',
+        credentials: 'include',
+        signal: controller.signal,
+        headers: {
+          Accept: 'text/event-stream',
+          'Content-Type': 'application/json; charset=utf-8',
+        },
+        body: JSON.stringify({
+          name,
+          description: null,
+          providerSettingId,
+        }),
+      })
+
+      if (!res.ok) {
+        const errorBody = await res.json().catch(() => null)
+        const message =
+          errorBody?.message ||
+          `Failed to create storage: ${res.status}`
+        throw new Error(message)
+      }
+
+      if (!res.body) {
+        throw new Error('Stream response body is empty.')
+      }
+
+      const reader = res.body.getReader()
+      const decoder = new TextDecoder()
+      let createdStore: any | null = null
+      let streamFailed = false
+
+      const sse = createSseParser((evt) => {
+        if (!evt.data || evt.data === '[DONE]') return
+        let parsed: any = null
+        try {
+          parsed = JSON.parse(evt.data)
+        } catch {
+          return
+        }
+
+        if (evt.event === 'log') {
+          const message =
+            typeof parsed?.message === 'string' ? parsed.message : ''
+          if (message) {
+            setStreamLogs((prev) => [...prev, message])
+          }
+          return
+        }
+
+        if (evt.event === 'error') {
+          const message =
+            typeof parsed?.message === 'string'
+              ? parsed.message
+              : DEFAULT_ERROR_MESSAGE
+          streamFailed = true
+          setStreamError(message)
+          toast.error(message)
+          return
+        }
+
+        if (evt.event === 'done') {
+          createdStore = parsed?.vectorStore ?? null
+        }
+      })
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        sse.feed(decoder.decode(value, { stream: true }))
+        if (createdStore || streamFailed) break
+      }
+
+      sse.end()
+
+      try {
+        await reader.cancel()
+      } catch {
+        // ignore
+      }
+
+      if (streamFailed) return null
+      if (!createdStore) {
+        throw new Error('Stream finished without a result.')
+      }
+
+      return createdStore
+    } finally {
+      setIsStreaming(false)
+      streamAbortRef.current = null
+    }
+  }
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    const name = data.name.trim()
+    if (!name) {
+      setError('name', { message: 'Project name is required' })
+      return
+    }
+
+    try {
+      let vectorStoreId =
+        data.vectorStoreId && data.vectorStoreId !== 'browse-vector-stores'
+          ? data.vectorStoreId
+          : undefined
+
+      if (data.addProjectStorage) {
+        const createdStore = await createVectorStoreWithLogs({
+          name,
+          providerSettingId: data.providerSettingId,
+        })
+        if (!createdStore) return
+        vectorStoreId = createdStore.id
+      }
+
+      const response = await onCreate({
+        name,
+        providerSettingId:
+          data.providerSettingId && data.providerSettingId !== 'browse-providers'
+            ? data.providerSettingId
+            : undefined,
+        vectorStoreId,
+        addProjectStorage: !!data.addProjectStorage,
+      })
+
+      toast.success('Project created successfully')
+
+      if ((response as any)?.id) {
+        router.push(`/projects/${(response as any).id}/${transformToURLFormat(name)}`)
+      }
+
+      onClose()
+    } catch {
+      toast.error('Failed to create project')
+    }
+  }
+
+  const canPickVectorStore =
+    !!providerSettingId && providerSettingId !== 'browse-providers'
+
+  useEffect(() => {
+    if (addProjectStorage) {
+      setValue('vectorStoreId', undefined)
+    }
+  }, [addProjectStorage, setValue])
+
+  return (
+    <Drawer isOpen={isOpen} onClose={handleClose} size="xl">
+      <DrawerOverlay />
+      <DrawerContent className="drawer">
+        <DrawerCloseButton />
+        <DrawerHeader>Create Project</DrawerHeader>
+
+        <DrawerBody className="d-flex flex-column">
+          {showLogs && addProjectStorage ? (
+            <div className="d-flex flex-column flex-grow-1 mt-3">
+              <label>Creation Logs</label>
+              <p className="small mt-1 text-muted">
+                Streaming setup logs while the provider prepares your storage
+              </p>
+              <div
+                ref={logsContainerRef}
+                className="border rounded bg-light p-2 flex-grow-1"
+                style={{ overflowY: 'auto' }}
+              >
+                {streamLogs.length > 0 ? (
+                  <pre className="mb-0 small" style={{ whiteSpace: 'pre-wrap' }}>
+                    {streamLogs.join('\n')}
+                  </pre>
+                ) : (
+                  <span className="text-muted small">
+                    {streamError || 'Waiting for logs...'}
+                  </span>
+                )}
+              </div>
+            </div>
+          ) : (
+            <form id="create-project-form" onSubmit={handleSubmit(onSubmit)}>
+              <div className="mt-3 mb-4">
+                <label>Project Name</label>
+                <Input
+                  register={register('name', { required: 'This field is required' })}
+                  placeholder="Enter your project name"
+                  label="Project Name"
+                  getValues={getValues}
+                  errors={errors}
+                />
+              </div>
+
+              <div className="mb-4">
+                <label>Provider Connection</label>
+                <Select
+                  label="Select provider connection"
+                  register={register('providerSettingId')}
+                  control={control}
+                  options={providerSettingOptions}
+                  onChange={handleProviderSettingChange}
+                  getValues={getValues}
+                  setFirstAsDefault={false}
+                  errors={errors}
+                  formatOptionLabel={formatProviderSettingOption}
+                />
+              </div>
+
+              {canPickVectorStore && (
+                <div className="mb-5">
+                  <label>Storage</label>
+                  <Select
+                    label="Add Storage"
+                    register={register('vectorStoreId')}
+                    control={control}
+                    options={vectorStoreOptions}
+                    onChange={handleVectorStoreChange}
+                    getValues={getValues}
+                    setFirstAsDefault={false}
+                    errors={errors}
+                    isDisabled={addProjectStorage}
+                    helperText={
+                      addProjectStorage
+                        ? 'Project storage will be created automatically.'
+                        : 'Choose an existing store for this project.'
+                    }
+                  />
+                </div>
+              )}
+
+              {canPickVectorStore && (
+                <div>
+                  <CheckBox
+                    control={control}
+                    name="addProjectStorage"
+                    label="Add project storage"
+                  />
+                </div>
+              )}
+            </form>
+          )}
+        </DrawerBody>
+
+        <DrawerFooter>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button
+            type="submit"
+            className="text-white"
+            color="primary"
+            form="create-project-form"
+            isLoading={isSubmitting || isStreaming}
+            disabled={isSubmitting || isSubmitSuccessful || isStreaming}
+          >
+            Save
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}