@spacemade/ui 0.0.1

package/src/pages/providers/index.tsx

@@ -0,0 +1,472 @@
+import type { GetServerSideProps, NextPage } from 'next'
+import Link from 'next/link'
+import { useMemo, useState } from 'react'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import Spinner from '@components/common/loading/Spinner'
+import { APIHelpers } from '@helpers/api'
+import { ProductCard } from '@components/marketplace/card/ProductCard'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { SiteLogoIcon } from '@helpers/images'
+import {
+  useListProvidersQuery,
+  useListProvidersWithMySettingsQuery,
+} from '@store/slice/api/providerApiSlice'
+import { createAgentSlug as createSlug } from '@helpers/slugUtils'
+import {
+  PROVIDER_FEATURES,
+  ProviderFeatureSlug,
+} from '@helpers/providers/providerFeatures'
+
+type ProvidersProps = { isLoggedIn: boolean; pageTitle?: string }
+type ConnectionFilter = 'connected' | 'available'
+const FEATURE_DISPLAY_ORDER: ProviderFeatureSlug[] = [
+  'project',
+  'vector-store',
+]
+
+const hasProviderFeature = (provider: any, queryParam: string) => {
+  return provider?.[queryParam] === true
+}
+
+const getProviderConnections = (provider: any) => {
+  if (Array.isArray(provider?.mySettings)) {
+    return provider.mySettings.filter(Boolean)
+  }
+  if (provider?.mySetting) {
+    return [provider.mySetting].filter(Boolean)
+  }
+  return []
+}
+
+const getProviderImage = (provider: any) => {
+  const iconMediaUrl = provider?.iconMedia?.media?.sourceUrl
+  const logoUrl = provider?.logoUrl
+  const isLocalOpenSearch = provider?.key === 'osirus-local'
+  const isOsirusIcon =
+    (typeof iconMediaUrl === 'string' && iconMediaUrl.includes('osirus-icon')) ||
+    (typeof logoUrl === 'string' && logoUrl.includes('osirus-icon'))
+
+  if (isLocalOpenSearch) {
+    return (isOsirusIcon ? null : iconMediaUrl) || (isOsirusIcon ? null : logoUrl) || SiteLogoIcon
+  }
+
+  return iconMediaUrl || logoUrl || SiteLogoIcon
+}
+
+const Providers: NextPage<ProvidersProps> = ({ isLoggedIn }) => {
+  const listArgs = { limit: 100 }
+  const [filterTerm, setFilterTerm] = useState('')
+  const [selectedFeatureSlugs, setSelectedFeatureSlugs] = useState<ProviderFeatureSlug[]>([])
+  const [selectedConnections, setSelectedConnections] = useState<ConnectionFilter[]>([
+    'connected',
+    'available',
+  ])
+  const [sortBy, setSortBy] = useState<'rank' | 'name'>('rank')
+
+  const { data: dataWithSettings, isFetching: isFetchingWithSettings } =
+    useListProvidersWithMySettingsQuery(listArgs, {
+      skip: !isLoggedIn,
+    })
+
+  const { data: dataPublic, isFetching: isFetchingPublic } = useListProvidersQuery(
+    listArgs,
+    {
+      skip: isLoggedIn,
+    }
+  )
+
+  const providers = (isLoggedIn ? dataWithSettings : dataPublic)?.results ?? []
+  const orderedFeatures = useMemo(() => {
+    const rank = new Map(FEATURE_DISPLAY_ORDER.map((slug, index) => [slug, index]))
+    return [...PROVIDER_FEATURES].sort((a, b) => {
+      const aRank = rank.has(a.slug) ? (rank.get(a.slug) as number) : Number.MAX_SAFE_INTEGER
+      const bRank = rank.has(b.slug) ? (rank.get(b.slug) as number) : Number.MAX_SAFE_INTEGER
+      if (aRank !== bRank) return aRank - bRank
+      return a.label.localeCompare(b.label, undefined, { sensitivity: 'base' })
+    })
+  }, [])
+
+  const providerItems = useMemo(() => {
+    return providers.map((provider: any, index: number) => {
+      const name = String(provider?.label ?? provider?.name ?? provider?.key ?? 'Provider')
+      const key = String(provider?.key ?? '').trim()
+      const parsedRank = Number(provider?.rank)
+      const rank = Number.isFinite(parsedRank) ? parsedRank : Number.MAX_SAFE_INTEGER
+      const featureSlugs = PROVIDER_FEATURES
+        .filter((feature) => hasProviderFeature(provider, feature.queryParam))
+        .map((feature) => feature.slug)
+      const isConnected = getProviderConnections(provider).length > 0
+      const isFeatured = provider?.isFeatured === true
+      const filterText = [
+        name,
+        key,
+        provider?.description ?? '',
+        ...featureSlugs,
+        ...featureSlugs
+          .map((slug) => PROVIDER_FEATURES.find((feature) => feature.slug === slug)?.label || '')
+          .filter(Boolean),
+      ]
+        .join(' ')
+        .toLowerCase()
+
+      return {
+        provider,
+        index,
+        name,
+        key,
+        rank,
+        isFeatured,
+        featureSlugs,
+        isConnected,
+        filterText,
+      }
+    })
+  }, [providers])
+
+  const featuredHeroItem = useMemo(() => {
+    const featured = providerItems.filter((item) => item.isFeatured)
+    if (featured.length === 0) return null
+    return [...featured].sort((a, b) => {
+      if (a.rank !== b.rank) return a.rank - b.rank
+      return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
+    })[0]
+  }, [providerItems])
+
+  const featureOptions = useMemo(() => {
+    return orderedFeatures.map((feature) => ({
+      slug: feature.slug,
+      label: feature.label,
+      count: providerItems.filter((item) => item.featureSlugs.includes(feature.slug)).length,
+    })).filter((feature) => feature.count > 0)
+  }, [orderedFeatures, providerItems])
+
+  const connectionCounts = useMemo(
+    () => ({
+      connected: providerItems.filter((item) => item.isConnected).length,
+      available: providerItems.filter((item) => !item.isConnected).length,
+    }),
+    [providerItems]
+  )
+
+  const filteredProviders = useMemo(() => {
+    const needle = filterTerm.trim().toLowerCase()
+    const filtered = providerItems
+      .filter((item) => !needle || item.filterText.includes(needle))
+      .filter((item) =>
+        selectedFeatureSlugs.length === 0
+          ? true
+          : selectedFeatureSlugs.some((slug) => item.featureSlugs.includes(slug))
+      )
+      .filter((item) => {
+        if (!isLoggedIn) return true
+        const status: ConnectionFilter = item.isConnected ? 'connected' : 'available'
+        return selectedConnections.includes(status)
+      })
+
+    if (sortBy === 'name') {
+      return [...filtered].sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
+      )
+    }
+
+    return [...filtered].sort((a, b) => {
+      if (a.rank !== b.rank) return a.rank - b.rank
+      return a.index - b.index
+    })
+  }, [isLoggedIn, providerItems, filterTerm, selectedFeatureSlugs, selectedConnections, sortBy])
+
+  const isLoading =
+    (isLoggedIn ? isFetchingWithSettings : isFetchingPublic) &&
+    providerItems.length === 0
+
+  const toggleFeature = (slug: ProviderFeatureSlug) => {
+    setSelectedFeatureSlugs((prev) =>
+      prev.includes(slug)
+        ? prev.filter((entry) => entry !== slug)
+        : [...prev, slug]
+    )
+  }
+
+  const toggleConnection = (value: ConnectionFilter) => {
+    setSelectedConnections((prev) =>
+      prev.includes(value)
+        ? prev.filter((entry) => entry !== value)
+        : [...prev, value]
+    )
+  }
+
+  return (
+    <SideNavLayout useMainContentAreaId={false}>
+      <div className="container py-4">
+        <div className="provider-marketplace-header border rounded-3 p-3 p-lg-4 mb-4">
+          <div className="input-group">
+            <span className="input-group-text bg-white border-end-0">
+              <i className="bi bi-funnel text-muted" />
+            </span>
+            <input
+              className="form-control border-start-0"
+              value={filterTerm}
+              onChange={(event) => setFilterTerm(event.target.value)}
+              placeholder="Filter providers by name, feature, and capability"
+            />
+          </div>
+
+          <div className="mt-3 d-flex align-items-center flex-wrap gap-2">
+            <span className="small text-muted">Try:</span>
+            <button
+              type="button"
+              onClick={() => setSelectedFeatureSlugs([])}
+              className={`btn btn-sm ${selectedFeatureSlugs.length === 0 ? 'btn-dark text-white' : 'btn-outline-dark'}`}
+            >
+              All providers
+            </button>
+            {orderedFeatures.map((feature) => (
+              <button
+                key={feature.slug}
+                type="button"
+                onClick={() => setSelectedFeatureSlugs([feature.slug])}
+                className={`btn btn-sm ${selectedFeatureSlugs.length === 1 && selectedFeatureSlugs[0] === feature.slug
+                  ? 'btn-dark text-white'
+                  : 'btn-outline-dark'
+                  }`}
+              >
+                {feature.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {!isLoggedIn && (
+          <div className="alert alert-light border mb-4">
+            Sign in to connect providers.
+          </div>
+        )}
+
+        {isLoggedIn && !isFetchingWithSettings && connectionCounts.connected === 0 && (
+          <div className="alert alert-light border mb-4">
+            Browse providers below. Connect one to start using it.
+          </div>
+        )}
+
+        {featuredHeroItem && (
+          <div className="provider-featured-hero border rounded-3 p-3 p-lg-4 mb-4">
+            <div className="row align-items-center g-3 g-lg-4">
+              <div className="col-12 col-md-2 text-center">
+                <OptimizedImage
+                  src={getProviderImage(featuredHeroItem.provider)}
+                  alt={`${featuredHeroItem.name} logo`}
+                  width={96}
+                  height={96}
+                  className="provider-featured-hero-logo object-fit-contain"
+                />
+              </div>
+              <div className="col-12 col-md-7">
+                <p className="small text-uppercase fw-semibold text-muted mb-2">
+                  Featured Provider
+                </p>
+                <h2 className="h4 mb-2">{featuredHeroItem.name}</h2>
+                <p className="mb-0 text-muted">
+                  {featuredHeroItem.provider?.description || 'Connect this provider to start using it across apps.'}
+                </p>
+              </div>
+              <div className="col-12 col-md-3 text-md-end">
+                <Link
+                  href={`/providers/${createSlug(featuredHeroItem.name)}`}
+                  className="btn btn-dark"
+                >
+                  {featuredHeroItem.isConnected ? 'Manage provider' : isLoggedIn ? 'Connect provider' : 'View provider'}
+                </Link>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="row g-4">
+          <div className="col-lg-3">
+            <aside className="border rounded-3 p-3 provider-marketplace-sidebar">
+              <h2 className="h6 fw-semibold mb-3">Features</h2>
+              <div className="d-flex flex-column gap-2">
+                {featureOptions.length === 0 ? (
+                  <p className="small text-muted mb-0">No feature filters yet.</p>
+                ) : (
+                  featureOptions.map((feature) => (
+                    <label
+                      key={feature.slug}
+                      className="form-check d-flex align-items-center justify-content-between gap-2 mb-0"
+                    >
+                      <span className="text-truncate">
+                        <input
+                          className="form-check-input me-2"
+                          type="checkbox"
+                          checked={selectedFeatureSlugs.includes(feature.slug)}
+                          onChange={() => toggleFeature(feature.slug)}
+                        />
+                        <span className="small">{feature.label}</span>
+                      </span>
+                      <span className="badge bg-light text-muted border">{feature.count}</span>
+                    </label>
+                  ))
+                )}
+              </div>
+
+              {isLoggedIn && (
+                <>
+                  <hr className="my-3" />
+                  <h3 className="h6 fw-semibold mb-3">Status</h3>
+                  <div className="d-flex flex-column gap-2">
+                    <label className="form-check d-flex align-items-center justify-content-between gap-2 mb-0">
+                      <span>
+                        <input
+                          className="form-check-input me-2"
+                          type="checkbox"
+                          checked={selectedConnections.includes('connected')}
+                          onChange={() => toggleConnection('connected')}
+                        />
+                        <span className="small">Connected</span>
+                      </span>
+                      <span className="badge bg-light text-muted border">
+                        {connectionCounts.connected}
+                      </span>
+                    </label>
+                    <label className="form-check d-flex align-items-center justify-content-between gap-2 mb-0">
+                      <span>
+                        <input
+                          className="form-check-input me-2"
+                          type="checkbox"
+                          checked={selectedConnections.includes('available')}
+                          onChange={() => toggleConnection('available')}
+                        />
+                        <span className="small">Available</span>
+                      </span>
+                      <span className="badge bg-light text-muted border">
+                        {connectionCounts.available}
+                      </span>
+                    </label>
+                  </div>
+                </>
+              )}
+            </aside>
+          </div>
+
+          <div className="col-lg-9">
+            <div className="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
+              <p className="mb-0 small text-muted">
+                Showing {filteredProviders.length} of {providerItems.length} providers
+              </p>
+              <div className="d-flex align-items-center gap-2">
+                <label htmlFor="provider-sort" className="small text-muted mb-0">
+                  Sort
+                </label>
+                <select
+                  id="provider-sort"
+                  className="form-select form-select-sm"
+                  value={sortBy}
+                  onChange={(event) => setSortBy(event.target.value as 'rank' | 'name')}
+                >
+                  <option value="rank">Rank</option>
+                  <option value="name">Name A-Z</option>
+                </select>
+              </div>
+            </div>
+
+            {isLoading ? (
+              <div className="py-5 d-flex justify-content-center">
+                <Spinner color="primary" />
+              </div>
+            ) : filteredProviders.length === 0 ? (
+              <div className="alert alert-light border mb-0">
+                No providers match your current filters.
+              </div>
+            ) : (
+              <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 g-4">
+                {filteredProviders.map((item) => {
+                  const provider = item.provider
+                  const name = item.name
+                  const slug = createSlug(name)
+                  const buttonLabel = item.isConnected
+                    ? 'Connected'
+                    : isLoggedIn
+                      ? 'Connect'
+                      : 'View details'
+
+                  const productLike: any = {
+                    id: provider.id,
+                    name,
+                    slug,
+                    intro: provider.description ?? '',
+                    modelSetting: { provider: provider.key },
+                  }
+
+                  return (
+                    <ProductCard
+                      key={provider.id}
+                      product={productLike}
+                      basePath="/providers"
+                      customPath={`/providers/${slug}`}
+                      buttonLabel={buttonLabel}
+                      isLoggedIn={isLoggedIn}
+                    />
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .provider-marketplace-header {
+          background: linear-gradient(135deg, #fbfcfe 0%, #f3f6fa 100%);
+          border-color: #dbe4ef !important;
+        }
+
+        .provider-marketplace-sidebar {
+          background: #fbfdff;
+          border-color: #dbe4ef !important;
+        }
+
+        .provider-featured-hero {
+          background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
+          border-color: #dbe4ef !important;
+        }
+
+        .provider-featured-hero-logo {
+          width: 96px;
+          height: 96px;
+          object-fit: contain;
+          border-radius: 18px;
+          border: 1px solid #dbe4ef;
+          background: #fff;
+          padding: 10px;
+        }
+
+        @media (min-width: 992px) {
+          .provider-marketplace-sidebar {
+            position: sticky;
+            top: 84px;
+            max-height: calc(100vh - 110px);
+            overflow: auto;
+          }
+        }
+      `}</style>
+    </SideNavLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<ProvidersProps> = async (ctx) => {
+  const cookie = ctx.req?.headers?.cookie || ''
+  let isLoggedIn = false
+
+  try {
+    const session = await APIHelpers.get('/auth/user', { Cookie: cookie })
+    isLoggedIn = Boolean(session?.user)
+  } catch {
+    isLoggedIn = false
+  }
+
+  return {
+    props: { isLoggedIn, pageTitle: 'Providers' },
+  }
+}
+
+export default Providers

package/src/pages/reset.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect } from 'react'
+import type { GetServerSideProps, NextPage } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { toast } from 'react-toastify'
+import {
+	UserTokenAction,
+	useVerifyTokenQuery,
+} from '@store/slice/api/authApiSlice'
+import ResetPasswordForm from '@components/auth/form/ResetPasswordForm'
+import LoadingScreen from '@components/common/loading/LoadingScreen'
+import { SiteLogoIcon } from '@helpers/images'
+import { PageProps } from '@helpers/types/page-props'
+
+const ResetPassword: NextPage<PageProps> = () => {
+	const {
+		query: { token },
+		push: redirect,
+	} = useRouter()
+	const { isSuccess, isError } = useVerifyTokenQuery(
+		{ token: token as string, action: UserTokenAction.reset_password },
+		{ skip: !token }
+	)
+
+	useEffect(() => {
+		if (isError) {
+			redirect('/forgot')
+			toast.error(
+				'The token was invalid or has expired. Please request a new one'
+			)
+		}
+	}, [isError, redirect])
+
+	if (!isSuccess) {
+		return <LoadingScreen />
+	}
+
+	return (
+		<div className='card-flow-container mt-7'>
+			<div className='d-flex justify-content-center align-items-center p-3 p-md-5'>
+				<div className="bg-white shadow-lg p-4 p-lg-5 rounded-xl" style={{ maxWidth: '600px', width: '100%' }}>
+					<div className='text-center'>
+						<Link href='/' aria-label='Osirus AI home'>
+							<span className='d-block p-2 bg-primary w-fit-content rounded-md mx-auto'>
+								<img
+									alt='Osirus Logo'
+									src={SiteLogoIcon}
+									className='img-fluid w-xs-80p invert-filter'
+								/>
+							</span>
+						</Link>
+					</div>
+					<h1 className='pb-3 text-center mt-4 pt-2 display-6'>
+						Set a password
+					</h1>
+					{isSuccess && <ResetPasswordForm token={token as string} />}
+				</div>
+			</div>
+		</div>
+	)
+}
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+		pageTitle: 'Reset Password',
+		excludeTopNav: true,
+	},
+})
+export default ResetPassword

package/src/pages/settings/billing/index.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable @next/next/no-img-element */
+
+import type { GetServerSideProps, NextPage } from 'next'
+import WithAuth from '@components/hoc/WithAuth'
+import { PageProps } from '@helpers/types/page-props'
+import { BillingHistory } from '@components/billing/block/BillingHistory'
+import { useGetSubscriptionQuery } from '@store/slice/api/stripeApiSlice'
+import Spinner from '@components/common/loading/Spinner'
+import { SettingsLayout } from '@components/settings/SettingsLayout'
+import { BillingDetailsCard } from '@components/billing/block/BillingDetailsCard'
+
+const Billing: NextPage<PageProps> = () => {
+  const { isLoading, isFetching } = useGetSubscriptionQuery()
+
+  return (
+    <SettingsLayout>
+      <div className="container p-4">
+        {(isFetching || isLoading) ? (
+          <div className="w-100 h-100 d-flex justify-content-center align-items-center mt-6">
+            <Spinner color="primary" />
+          </div>
+        ) : (
+          <>
+            {/* Billing history and details */}
+            <BillingHistory />
+
+            <div className="mt-5">
+              <BillingDetailsCard />
+            </div>
+          </>
+        )}
+      </div>
+    </SettingsLayout>
+  )
+}
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+    pageTitle: 'Billing',
+  },
+})
+export default WithAuth(Billing)