@allbluecn/web-app 0.4.17 → 0.4.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/web-app",
-  "version": "0.4.17",
+  "version": "0.4.19",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "files": [
@@ -27,7 +27,7 @@
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@iconify/react": "^6.0.2",
-    "@lobehub/icons": "^5.10.0",
+    "@lobehub/icons": "^5.16.0",
     "@prisma/client": "^7.8.0",
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -135,14 +135,14 @@
     "three": "^0.180.0",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.4.3",
-    "@allbluecn/ai-gateway": "0.4.12",
     "@allbluecn/kernel": "0.3.0",
-    "@allbluecn/database": "0.4.12",
-    "@allbluecn/plugins-core": "0.4.12",
-    "@allbluecn/prototype": "0.1.1",
-    "@allbluecn/ui": "0.4.12",
-    "@allbluecn/shared": "0.4.12",
-    "@allbluecn/tiptap": "0.4.12"
+    "@allbluecn/shared": "0.4.14",
+    "@allbluecn/database": "0.4.14",
+    "@allbluecn/tiptap": "0.4.13",
+    "@allbluecn/ui": "0.4.14",
+    "@allbluecn/ai-gateway": "0.4.14",
+    "@allbluecn/plugins-core": "0.4.13",
+    "@allbluecn/prototype": "0.1.1"
   },
   "devDependencies": {
     "@babel/parser": "^8.0.4",
@@ -197,8 +197,8 @@
     "setup": "pnpm --filter @allbluecn/database generate && pnpm --filter @allbluecn/database migrate:dev",
     "check:features": "tsx scripts/check-feature-keys.ts",
     "assemble": "pnpm -w exec tsx packages/kernel/src/bin.ts --profile oss --assemble --app-dir apps/web",
-    "predev": "pnpm assemble",
-    "prebuild": "pnpm assemble",
+    "predev": "pnpm assemble && node scripts/check-sdk-versions.mjs",
+    "prebuild": "pnpm assemble && node scripts/check-sdk-versions.mjs",
     "pretest": "pnpm assemble",
     "pretest:run": "pnpm assemble"
   }

package/src/components/billing/checkout-redirect.ts

@@ -38,7 +38,7 @@ export async function redirectToPortal(): Promise<void> {
   }
 
   try {
-    const { url } = await createCustomerPortalSessionFn()
+    const { url } = await createCustomerPortalSessionFn({ data: {} })
     window.location.href = url
   } catch (error) {
     toast.error(

package/src/components/changelog/changelog-page.tsx

@@ -378,7 +378,7 @@ function SdkGroupSection({
                 className="flex items-center justify-between gap-2 py-1.5 group"
               >
                 <span className="text-xs font-medium text-muted-foreground group-hover:text-primary transition-colors truncate">
-                  {sdk.name}
+                  {sdk.displayName || sdk.name}
                 </span>
                 <code className="text-[10px] font-mono text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded shrink-0 group-hover:text-primary transition-colors">
                   {sdk.version}

package/src/components/layout/sidebar-03/user-menu.tsx

@@ -77,7 +77,7 @@ export function UserMenu() {
 
   const handleSignOut = async () => {
     if (isLocalGuest) {
-      await logoutRemoteFn();
+      await logoutRemoteFn({ data: {} });
       toast.success(t('sidebar.userMenu.logoutToGuest'));
       queryClient.resetQueries({ queryKey: ['session'] });
       queryClient.resetQueries({ queryKey: ['effective-plan'] });

package/src/components/notifications/notification-list.tsx

@@ -0,0 +1,232 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { useCallback, useState } from 'react'
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { format } from 'date-fns'
+import { zhCN } from 'date-fns/locale'
+import { Bell, CreditCard, MessageSquare, Megaphone, ShieldCheck, Trash2, Users } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { cn } from '@/lib/utils'
+import type { NotificationCategory } from '@allbluecn/shared'
+import {
+  deleteNotificationFn,
+  listNotificationsFn,
+  markAllNotificationsReadFn,
+  markNotificationReadFn,
+} from '@/server/serverFns/notifications'
+import {
+  NOTIFICATION_LIST_KEY,
+  NOTIFICATION_UNREAD_KEY,
+} from '@/hooks/use-notifications'
+
+export const CATEGORY_ICONS: Record<NotificationCategory, LucideIcon> & { all: LucideIcon } = {
+  all: Bell,
+  team: Users,
+  collaboration: MessageSquare,
+  system: Megaphone,
+  billing: CreditCard,
+  security: ShieldCheck,
+}
+
+const TABS: { key: 'all' | NotificationCategory; labelKey: string }[] = [
+  { key: 'all', labelKey: 'tabs.all' },
+  { key: 'team', labelKey: 'tabs.team' },
+  { key: 'collaboration', labelKey: 'tabs.collaboration' },
+  { key: 'system', labelKey: 'tabs.system' },
+  { key: 'billing', labelKey: 'tabs.billing' },
+  { key: 'security', labelKey: 'tabs.security' },
+]
+
+export interface NotificationListProps {
+  category?: NotificationCategory
+}
+
+export function NotificationList({ category }: NotificationListProps) {
+  const { t } = useTranslation('notifications')
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [activeTab, setActiveTab] = useState<'all' | NotificationCategory>(category ?? 'all')
+
+  const { data, isLoading, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: [...NOTIFICATION_LIST_KEY, activeTab === 'all' ? undefined : activeTab],
+    queryFn: async ({ pageParam }) => {
+      const base = activeTab === 'all' ? {} : { category: activeTab }
+      return listNotificationsFn({
+        data: pageParam ? { ...base, cursor: pageParam } : base,
+      })
+    },
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.hasMore ? lastPage.items[lastPage.items.length - 1].id : undefined,
+  })
+
+  const handleMarkRead = useCallback(
+    async (id: string) => {
+      await markNotificationReadFn({ data: { id } })
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
+    },
+    [queryClient]
+  )
+
+  const handleDelete = useCallback(
+    async (id: string, e: React.MouseEvent) => {
+      e.stopPropagation()
+      await deleteNotificationFn({ data: { id } })
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
+    },
+    [queryClient]
+  )
+
+  const handleMarkAll = useCallback(async () => {
+    await markAllNotificationsReadFn({ data: {} })
+    queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+    queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
+  }, [queryClient])
+
+  const handleClickItem = useCallback(
+    (item: { id: string; link: string | null; readAt: string | null }) => {
+      if (!item.readAt) {
+        void handleMarkRead(item.id)
+      }
+      if (item.link) {
+        navigate({ to: item.link as never })
+      }
+    },
+    [handleMarkRead, navigate]
+  )
+
+  const formatRelativeTime = (createdAt: string) => {
+    const date = new Date(createdAt)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMin = Math.floor(diffMs / 60000)
+    const diffHour = Math.floor(diffMs / 3600000)
+    const diffDay = Math.floor(diffMs / 86400000)
+
+    if (diffMin < 1) return t('relativeTime.justNow')
+    if (diffMin < 60) return t('relativeTime.minutesAgo', { count: diffMin })
+    if (diffHour < 24) return t('relativeTime.hoursAgo', { count: diffHour })
+    if (diffDay < 30) return t('relativeTime.daysAgo', { count: diffDay })
+    return format(date, 'MM/dd/yyyy HH:mm', { locale: zhCN })
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-3 rounded-lg border p-3">
+            <Skeleton className="size-9 shrink-0 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-3 w-1/2" />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  const items = data?.pages.flatMap((page) => page.items) ?? []
+  const hasMore = hasNextPage ?? false
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <div className="flex gap-1">
+          {TABS.map((tab) => {
+            const Icon = CATEGORY_ICONS[tab.key]
+            return (
+              <Button
+                key={tab.key}
+                variant={activeTab === tab.key ? 'secondary' : 'ghost'}
+                size="sm"
+                className="gap-1.5"
+                onClick={() => setActiveTab(tab.key)}
+              >
+                <Icon className="size-4" />
+                {t(tab.labelKey)}
+              </Button>
+            )
+          })}
+        </div>
+        {items.some((item) => !item.readAt) && (
+          <Button variant="ghost" size="sm" onClick={handleMarkAll}>
+            {t('actions.markAllRead')}
+          </Button>
+        )}
+      </div>
+
+      {items.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <Bell className="size-12 text-muted-foreground/40" />
+          <p className="mt-2 text-sm text-muted-foreground">
+            {activeTab === 'all' ? t('empty') : t('emptyFiltered')}
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-1">
+          {items.map((item) => {
+            const Icon = CATEGORY_ICONS[item.category]
+            const isUnread = !item.readAt
+            return (
+              <div
+                key={item.id}
+                className={cn(
+                  'group flex items-start gap-3 rounded-lg border p-3 transition-colors',
+                  isUnread ? 'bg-muted/30' : 'opacity-70',
+                  'hover:bg-muted/50 cursor-pointer'
+                )}
+                onClick={() => handleClickItem(item)}
+              >
+                <Avatar className="size-9 shrink-0">
+                  <AvatarFallback className="bg-primary/10 text-primary">
+                    <Icon className="size-4" />
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <div className="flex items-center gap-2">
+                    {isUnread && <span className="size-2 shrink-0 rounded-full bg-primary" />}
+                    <span className={cn('text-sm font-medium', isUnread ? '' : 'text-muted-foreground')}>
+                      {item.title}
+                    </span>
+                    <span className="ml-auto shrink-0 text-xs text-muted-foreground">
+                      {formatRelativeTime(item.createdAt)}
+                    </span>
+                  </div>
+                  {item.body && (
+                    <span className="line-clamp-2 text-xs text-muted-foreground">{item.body}</span>
+                  )}
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 shrink-0 opacity-0 group-hover:opacity-100"
+                  onClick={(e) => handleDelete(item.id, e)}
+                >
+                  <Trash2 className="size-3.5" />
+                </Button>
+              </div>
+            )
+          })}
+          {hasMore && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="mt-1 mx-auto"
+              onClick={() => void fetchNextPage()}
+              disabled={isFetchingNextPage}
+            >
+              {t('actions.loadMore')}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/notifications/notification-preferences.tsx

@@ -0,0 +1,156 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { useEffect, useState } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { useNotifications } from '@/hooks/use-notifications'
+import { getNotificationPreferencesFn, updateNotificationPreferencesFn } from '@/server/serverFns/notifications'
+import type { CategoryPreferences, NotificationCategory, NotificationPreferences } from '@allbluecn/shared'
+
+const CATEGORY_META: { key: NotificationCategory; labelKey: string; descKey: string }[] = [
+  { key: 'team', labelKey: 'preferences.categories.team', descKey: 'preferences.categories.teamDesc' },
+  { key: 'collaboration', labelKey: 'preferences.categories.collaboration', descKey: 'preferences.categories.collaborationDesc' },
+  { key: 'system', labelKey: 'preferences.categories.system', descKey: 'preferences.categories.systemDesc' },
+  { key: 'billing', labelKey: 'preferences.categories.billing', descKey: 'preferences.categories.billingDesc' },
+  { key: 'security', labelKey: 'preferences.categories.security', descKey: 'preferences.categories.securityDesc' },
+]
+
+export function NotificationPreferences() {
+  const { t } = useTranslation('notifications')
+  const queryClient = useQueryClient()
+  const { setUnreadCount } = useNotifications()
+
+  const { data: prefsData, isLoading } = useQuery({
+    queryKey: ['notifications', 'preferences'],
+    queryFn: () => getNotificationPreferencesFn({ data: {} }),
+  })
+
+  const [categories, setCategories] = useState<CategoryPreferences | null>(null)
+  const [dndEnabled, setDndEnabled] = useState(false)
+  const [dndStart, setDndStart] = useState('22:00')
+  const [dndEnd, setDndEnd] = useState('08:00')
+
+  useEffect(() => {
+    if (prefsData) {
+      setCategories(prefsData.categories)
+      setDndEnabled(prefsData.dndEnabled)
+      setDndStart(prefsData.dndStart)
+      setDndEnd(prefsData.dndEnd)
+    }
+  }, [prefsData])
+
+  const save = async () => {
+    if (!categories) return
+    await updateNotificationPreferencesFn({
+      data: {
+        categories,
+        dndEnabled,
+        dndStart,
+        dndEnd,
+      },
+    })
+    queryClient.invalidateQueries({ queryKey: ['notifications', 'preferences'] })
+    toast.success(t('preferences.saved'))
+  }
+
+  const toggleCategory = (key: NotificationCategory) => {
+    setCategories((prev) => (prev ? { ...prev, [key]: !prev[key] } : prev))
+  }
+
+  if (isLoading) {
+    return <div className="space-y-4">{Array.from({ length: 4 }).map((_, i) => <div key={i} className="h-16 rounded-lg border bg-muted/30" />)}</div>
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-3">
+        {CATEGORY_META.map((meta) => (
+          <div key={meta.key} className="flex items-center justify-between rounded-lg border p-4">
+            <div className="flex flex-col gap-0.5">
+              <span className="text-sm font-medium">{t(meta.labelKey)}</span>
+              <span className="text-xs text-muted-foreground">{t(meta.descKey)}</span>
+            </div>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={categories?.[meta.key] ?? false}
+              className={
+                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ' +
+                ((categories?.[meta.key] ?? false) ? 'bg-primary' : 'bg-input')
+              }
+              onClick={() => toggleCategory(meta.key)}
+            >
+              <span
+                className={
+                  'pointer-events-none block size-4 translate-x-0.5 rounded-full bg-background shadow ring-0 transition-transform ' +
+                  ((categories?.[meta.key] ?? false) ? 'translate-x-5' : '')
+                }
+              />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <div className="rounded-lg border p-4 space-y-4">
+        <div className="flex flex-col gap-0.5">
+          <span className="text-sm font-medium">{t('preferences.dnd.title')}</span>
+          <span className="text-xs text-muted-foreground">{t('preferences.dnd.desc')}</span>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <span className="text-sm">{t('preferences.dnd.enabled')}</span>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={dndEnabled}
+            className={
+              'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ' +
+              (dndEnabled ? 'bg-primary' : 'bg-input')
+            }
+            onClick={() => setDndEnabled(!dndEnabled)}
+          >
+            <span
+              className={
+                'pointer-events-none block size-4 translate-x-0.5 rounded-full bg-background shadow ring-0 transition-transform ' +
+                (dndEnabled ? 'translate-x-5' : '')
+              }
+            />
+          </button>
+        </div>
+
+        {dndEnabled && (
+          <div className="flex gap-4">
+            <div className="flex-1 space-y-1">
+              <label className="text-xs text-muted-foreground">{t('preferences.dnd.start')}</label>
+              <input
+                type="time"
+                value={dndStart}
+                onChange={(e) => setDndStart(e.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+              />
+            </div>
+            <div className="flex-1 space-y-1">
+              <label className="text-xs text-muted-foreground">{t('preferences.dnd.end')}</label>
+              <input
+                type="time"
+                value={dndEnd}
+                onChange={(e) => setDndEnd(e.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end">
+        <button
+          type="button"
+          onClick={save}
+          className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90"
+        >
+          {t('actions.save', { defaultValue: '保存' })}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/settings/ai/create-custom-provider-dialog.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useState } from "react"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { useTranslation } from "react-i18next"
+import { toast } from '@/components/ui/sonner'
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { createCustomProviderFn } from "@/server/serverFns/ai/providers"
+
+interface FormState {
+  displayName: string
+  baseUrl: string
+  apiKey: string
+  defaultModel: string
+}
+
+const EMPTY_FORM: FormState = {
+  displayName: "",
+  baseUrl: "https://api.openai.com/v1",
+  apiKey: "",
+  defaultModel: "",
+}
+
+export function CreateCustomProviderDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+}) {
+  const [form, setForm] = useState<FormState>(EMPTY_FORM)
+  const { t } = useTranslation("settings")
+  const queryClient = useQueryClient()
+
+  useEffect(() => {
+    setForm(EMPTY_FORM)
+  }, [open])
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      createCustomProviderFn({
+        data: {
+          displayName: form.displayName,
+          baseUrl: form.baseUrl,
+          apiKey: form.apiKey,
+          defaultModel: form.defaultModel,
+        },
+      }),
+    onSuccess: async () => {
+      onOpenChange(false)
+      await queryClient.invalidateQueries({ queryKey: ["ai-providers"] })
+      await queryClient.invalidateQueries({ queryKey: ["ai-enabled-models"] })
+      toast.success(t("ai.providerCreated"))
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : t("ai.operationFailed"))
+    },
+  })
+
+  const handleSubmit = () => {
+    if (!form.displayName.trim()) {
+      toast.error(`${t("ai.customProviderName")} 不能为空`)
+      return
+    }
+    if (!form.defaultModel.trim()) {
+      toast.error(`${t("ai.customDefaultModel")} 不能为空`)
+      return
+    }
+    mutation.mutate()
+  }
+
+  const update = (field: keyof FormState, value: string) =>
+    setForm((prev) => ({ ...prev, [field]: value }))
+
+  const isValid = form.displayName.trim() && form.defaultModel.trim()
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("ai.createCustomProvider")}</DialogTitle>
+          <DialogDescription>
+            {t("ai.createCustomProviderDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4">
+          <div className="grid gap-1.5">
+            <Label>{t("ai.customProviderName")} <span className="text-red-500">*</span></Label>
+            <Input
+              value={form.displayName}
+              onChange={(e) => update("displayName", e.target.value)}
+              placeholder={t("ai.customProviderNamePlaceholder")}
+            />
+          </div>
+          <div className="grid gap-1.5">
+            <Label>{t("ai.customBaseUrl")}</Label>
+            <Input
+              value={form.baseUrl}
+              onChange={(e) => update("baseUrl", e.target.value)}
+              placeholder={t("ai.customBaseUrlPlaceholder")}
+            />
+          </div>
+          <div className="grid gap-1.5">
+            <Label>{t("ai.customApiKey")}</Label>
+            <Input
+              type="password"
+              value={form.apiKey}
+              onChange={(e) => update("apiKey", e.target.value)}
+              placeholder="sk-..."
+            />
+          </div>
+          <div className="grid gap-1.5">
+            <Label>{t("ai.customDefaultModel")} <span className="text-red-500">*</span></Label>
+            <Input
+              value={form.defaultModel}
+              onChange={(e) => update("defaultModel", e.target.value)}
+              placeholder={t("ai.customDefaultModelPlaceholder")}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={mutation.isPending || !isValid}
+          >
+            {mutation.isPending ? t("ai.creatingProvider") : t("ai.createProvider")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}