@spacemade/ui 0.0.1

package/src/components/storage/addStorageModal.tsx

@@ -0,0 +1,552 @@
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react'
+import { useRouter } from 'next/router'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+
+import { vectorStoreApiSlice } from '@store/slice/api/vectorStoreApiSlice'
+import { useListProvidersWithMySettingsQuery } from '@store/slice/api/providerApiSlice'
+import { useAppDispatch } from '@store/hooks'
+
+import { useUserAuthContext } from '@context/UserAuthContext'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import Button from '@components/common/button/Button'
+
+import { BASE_API_URL } from '@helpers/api'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { SiteLogoIcon } from '@helpers/images'
+
+interface FormValues extends FieldValues {
+  name: string
+  providerSettingId: string
+  description?: string
+}
+
+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 const VectorCreateModal = ({
+  isOpen,
+  onClose,
+  presetProviderSettingId,
+  lockProviderSetting = false,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  presetProviderSettingId?: string | null
+  lockProviderSetting?: boolean
+}) => {
+  const router = useRouter()
+  const scopedProviderSettingId = String(presetProviderSettingId || '').trim()
+  const shouldLockProviderSetting = lockProviderSetting && scopedProviderSettingId.length > 0
+  const { user } = useUserAuthContext()
+  const dispatch = useAppDispatch()
+  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,
+    setError,
+    clearErrors,
+    control,
+    getValues,
+    setValue,
+    reset,
+    formState: { errors, isSubmitting, isSubmitSuccessful },
+  } = useForm<FormValues>({
+    defaultValues: {
+      name: '',
+      providerSettingId: '',
+      description: '',
+    },
+  })
+
+  const { data: providersResp, isLoading: isLoadingSettings } =
+    useListProvidersWithMySettingsQuery(
+      {
+        page: 1,
+        limit: 50,
+        is_connected: true,
+        has_storage: 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 hasStorage = p?.hasStorage === true
+      const isActive = (p?.status ?? 'active') === 'active'
+      if (!isConnected || !hasStorage || !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: String(setting.id),
+          label: `${provider.label} - ${setting.name ?? 'Default'}`,
+          image,
+          providerKey: String(provider?.key || ''),
+        }
+      })
+    })
+
+    const local = filtered.find((option: any) => option.providerKey === 'osirus-local')
+    const rest = filtered.filter((option: any) => option.providerKey !== 'osirus-local')
+    const ordered = local ? [local, ...rest] : filtered
+
+    return [
+      ...ordered,
+      { value: 'browse-providers', label: 'Browse Providers' },
+    ]
+  }, [providersResp])
+  const hasScopedProviderOption = useMemo(
+    () =>
+      scopedProviderSettingId
+        ? providerSettingOptions.some(
+            (option: any) => String(option?.value || '') === scopedProviderSettingId
+          )
+        : false,
+    [providerSettingOptions, scopedProviderSettingId]
+  )
+  const shouldLockProviderField = shouldLockProviderSetting && hasScopedProviderOption
+
+  const formatProviderSettingOption = (opt: any) => {
+    if (opt?.value === 'browse-providers') {
+      return (
+        <div className="d-flex align-items-center gap-2">
+          <i className="bi bi-search" />
+          <span>Browse Providers</span>
+        </div>
+      )
+    }
+
+    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' }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <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 getChangeValue = (
+    input: ChangeEvent<HTMLSelectElement> | { value?: string } | string
+  ) => {
+    if (typeof input === 'string') return input
+    if (input && typeof input === 'object' && 'value' in input) return input.value
+    return (input as ChangeEvent<HTMLSelectElement>)?.target?.value
+  }
+
+  const handleProviderSettingChange = (
+    input: ChangeEvent<HTMLSelectElement> | { value?: string } | string
+  ) => {
+    if (shouldLockProviderField) {
+      setValue('providerSettingId', scopedProviderSettingId, { shouldValidate: true })
+      return
+    }
+    const value = getChangeValue(input)
+
+    if (value === 'browse-providers') {
+      router.push('/providers')
+      setValue('providerSettingId', '' as any, { shouldValidate: true })
+      return
+    }
+
+    setValue('providerSettingId', (value ?? '') as string, {
+      shouldValidate: true,
+    })
+  }
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      setStreamLogs([])
+      setStreamError(null)
+      setShowLogs(true)
+      streamAbortRef.current?.abort()
+
+      const controller = new AbortController()
+      streamAbortRef.current = controller
+      setIsStreaming(true)
+
+      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: data.name,
+          description: data.description || null,
+          provider_setting_id: data.providerSettingId || null,
+        }),
+      })
+
+      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)
+          setError('server-error' as any, {
+            type: 'custom',
+            message: 'server-error',
+          })
+          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
+      if (!createdStore) {
+        throw new Error('Stream finished without a result.')
+      }
+
+      toast.success('Storage created successfully.')
+      dispatch(vectorStoreApiSlice.util.invalidateTags(['VectorStores']))
+
+      reset({
+        name: '',
+        providerSettingId: '',
+        description: '',
+      })
+      clearErrors()
+      onClose()
+    } catch (error: any) {
+      toast.error(
+        error.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+          ? error.data?.message
+          : DEFAULT_ERROR_MESSAGE
+      )
+      setError('server-error' as any, {
+        type: 'custom',
+        message: 'server-error',
+      })
+      setStreamError(error?.message || DEFAULT_ERROR_MESSAGE)
+    } finally {
+      setIsStreaming(false)
+      streamAbortRef.current = null
+    }
+  }
+
+  useEffect(() => {
+    if (!isOpen) {
+      streamAbortRef.current?.abort()
+      setIsStreaming(false)
+      setStreamLogs([])
+      setStreamError(null)
+      setShowLogs(false)
+      reset({
+        name: '',
+        providerSettingId: '',
+        description: '',
+      })
+      clearErrors()
+    }
+  }, [isOpen, reset, clearErrors])
+
+  useEffect(() => {
+    return () => {
+      streamAbortRef.current?.abort()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    if (scopedProviderSettingId) {
+      if (hasScopedProviderOption) {
+        setValue('providerSettingId', scopedProviderSettingId, {
+          shouldValidate: true,
+        })
+        return
+      }
+    }
+
+    const current = getValues('providerSettingId')
+    if (current) return
+
+    const local = providerSettingOptions.find(
+      (option: any) => option?.providerKey === 'osirus-local'
+    )
+    const fallback = providerSettingOptions.find(
+      (option: any) => option?.value && option.value !== 'browse-providers'
+    )
+    const selected = local || fallback
+    if (!selected?.value || selected.value === 'browse-providers') return
+
+    setValue('providerSettingId', String(selected.value), {
+      shouldValidate: true,
+    })
+  }, [getValues, hasScopedProviderOption, isOpen, providerSettingOptions, scopedProviderSettingId, setValue])
+
+  useEffect(() => {
+    if (!showLogs) return
+    const container = logsContainerRef.current
+    if (!container) return
+    container.scrollTop = container.scrollHeight
+  }, [streamLogs, streamError, showLogs])
+
+  const handleClose = () => {
+    streamAbortRef.current?.abort()
+    onClose()
+  }
+
+  return (
+    <Drawer isOpen={isOpen} onClose={handleClose} size="lg">
+      <DrawerOverlay />
+      <DrawerContent className="drawer">
+        <DrawerCloseButton />
+        <DrawerHeader>Add Storage</DrawerHeader>
+
+        <DrawerBody className="d-flex flex-column">
+          {showLogs ? (
+            <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-vector-form" onSubmit={handleSubmit(onSubmit)}>
+              <div className="mb-4 mt-3">
+                <label htmlFor="name">Name</label>
+                <p className="small mt-1 text-muted">
+                  Enter a friendly name for this storage
+                </p>
+                <Input
+                  register={register('name', { required: 'This field is required' })}
+                  errors={errors}
+                  placeholder="Name"
+                  label="Storage Name"
+                  getValues={getValues}
+                />
+              </div>
+
+              <div className="mb-4">
+                <label htmlFor="providerSettingId">Provider Connection</label>
+                <p className="small mt-1 text-muted">
+                  {shouldLockProviderField
+                    ? 'This storage must use the same provider connection as your agent.'
+                    : 'Select which connected provider account should host this. Local is preselected.'}
+                </p>
+                <Select
+                  register={register('providerSettingId', {
+                    required: 'This field is required',
+                  })}
+                  label="Provider Connection"
+                  options={providerSettingOptions}
+                  control={control}
+                  getValues={getValues}
+                  setFirstAsDefault={false}
+                  errors={errors}
+                  isLoading={isLoadingSettings}
+                  isDisabled={isLoadingSettings || shouldLockProviderField}
+                  onChange={handleProviderSettingChange}
+                  formatOptionLabel={formatProviderSettingOption}
+                />
+              </div>
+
+              <div className="mb-4">
+                <label htmlFor="description">Description</label>
+                <p className="small mt-1 text-muted">
+                  Optionally describe the purpose or content
+                </p>
+                <Input
+                  register={register('description')}
+                  errors={errors}
+                  placeholder="Optional description"
+                  label="Description"
+                  getValues={getValues}
+                />
+              </div>
+            </form>
+          )}
+        </DrawerBody>
+
+        <DrawerFooter>
+          <Button ariaLabel="Cancel" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            className="text-white"
+            ariaLabel="Save Storage"
+            color="primary"
+            form="create-vector-form"
+            isLoading={isStreaming || isSubmitting}
+            disabled={isSubmitting || isSubmitSuccessful}
+            onClick={() => clearErrors(['server-error' as any])}
+          >
+            Save
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}