@allbluecn/web-app 0.4.17 → 0.4.18

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>
+  )
+}

package/src/components/settings/ai/provider-grid.tsx

@@ -1,23 +1,6 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-// apps/web/src/components/settings/ai/provider-grid.tsx
 import { useEffect, useMemo, useState } from "react"
-import { Search } from "lucide-react"
+import { useQuery } from "@tanstack/react-query"
+import { Plus, Search } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { Input } from "@/components/ui/input"
 import {
@@ -27,10 +10,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { useLiveQuery } from "@tanstack/react-db"
-import { aiProvidersCollection } from "@/lib/collections/ai/ai-providers-collection"
+import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
+import { listAiProvidersFn } from "@/server/serverFns/ai/providers"
 import { ProviderCard } from "./provider-card"
+import { CreateCustomProviderDialog } from "./create-custom-provider-dialog"
 
 type SortMode = "default" | "name" | "configured-first"
 
@@ -42,9 +26,10 @@ function ProviderResults({
   sort: SortMode
 }) {
   const { t } = useTranslation("settings")
-  const { data: providers } = useLiveQuery((q) =>
-    q.from({ p: aiProvidersCollection })
-  )
+  const { data: providers } = useQuery({
+    queryKey: ["ai-providers"],
+    queryFn: listAiProvidersFn,
+  })
 
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase()
@@ -73,9 +58,30 @@ function ProviderResults({
 
   const enabledProviders = filtered.filter((p) => p.config.enabled)
   const disabledProviders = filtered.filter((p) => !p.config.enabled)
+  const customCount = filtered.filter(
+    (p) => p.meta.providerId.startsWith("custom-"),
+  ).length
 
   return (
     <>
+      {customCount > 0 && (
+        <div className="space-y-3">
+          <h3 className="text-xs font-medium text-muted-foreground">
+            {t("ai.customProviders", { count: customCount })}
+          </h3>
+          <div className={cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4")}>
+            {filtered
+              .filter((p) => p.meta.providerId.startsWith("custom-"))
+              .map(({ meta, config, platformEnabled }) => (
+                <ProviderCard
+                  key={meta.providerId}
+                  data={{ meta, config, platformEnabled }}
+                />
+              ))}
+          </div>
+        </div>
+      )}
+
       {enabledProviders.length > 0 && (
         <div className="space-y-3">
           <h3 className="text-xs font-medium text-muted-foreground">
@@ -120,6 +126,7 @@ function ProviderResults({
 export function ProviderGrid() {
   const [query, setQuery] = useState("")
   const [sort, setSort] = useState<SortMode>("default")
+  const [createDialogOpen, setCreateDialogOpen] = useState(false)
   const [mounted, setMounted] = useState(false)
   const { t } = useTranslation("settings")
 
@@ -149,9 +156,23 @@ export function ProviderGrid() {
             <SelectItem value="configured-first">{t("ai.sortConfiguredFirst")}</SelectItem>
           </SelectContent>
         </Select>
+        <Button
+          variant="outline"
+          size="sm"
+          className="gap-1.5"
+          onClick={() => setCreateDialogOpen(true)}
+        >
+          <Plus className="size-3.5" />
+          {t("ai.createCustomProvider")}
+        </Button>
       </div>
 
       {mounted && <ProviderResults query={query} sort={sort} />}
+
+      <CreateCustomProviderDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+      />
     </div>
   )
-}
+}

package/src/components/settings/personal-team/team/team-client.tsx

@@ -25,10 +25,15 @@ import {
   listTeamInvitationsFn,
   listTeamUsersFn,
   createTeamInvitationFn,
+  refreshTeamInvitationLinkFn,
   revokeTeamInvitationFn,
   resendTeamInvitationFn,
+  approveTeamInvitationFn,
+  approveTeamJoinRequestFn,
+  rejectTeamJoinRequestFn,
   removeTeamMemberFn,
   leaveTeamFn,
+  clearExpiredInvitationsFn,
 } from "@/server/serverFns/team"
 import { Button } from "@/components/ui/button"
 import {
@@ -59,7 +64,7 @@ import {
   FieldTitle,
 } from "@/components/ui/field"
 import { Trash2, Infinity as InfinityIcon } from "lucide-react"
-import TeamInvitations, { type TeamInvitation } from "@/components/settings/personal-team/team/team-invitations"
+import TeamInvitations, { type TeamInvitation, type TeamJoinRequestItem } from "@/components/settings/personal-team/team/team-invitations"
 import TeamMemberList, { type TeamMember } from "@/components/settings/personal-team/team/team-member-list"
 
 type TeamClientProps = {
@@ -85,16 +90,17 @@ export default function TeamClient({ user }: TeamClientProps) {
   const seats = useResource("seats")
   const guestSeats = useResource("guestSeats")
 
-  const { data: members = [] } = useQuery({
+  const { data: members = [], isLoading: membersLoading } = useQuery({
     queryKey: ["teamMembers"],
     queryFn: () => listTeamMembersFn(),
   })
 
-  const { data: invitations = [] } = useQuery({
+  const { data: inviteData } = useQuery({
     queryKey: ["teamInvitations"],
     queryFn: () => listTeamInvitationsFn(),
     enabled: members.length > 0,
   })
+  const invitations = inviteData?.invitations ?? []
 
   const { data: teamUsers = [] } = useQuery({
     queryKey: ["teamUsers"],
@@ -114,8 +120,13 @@ export default function TeamClient({ user }: TeamClientProps) {
   }
 
   const createInviteMutation = useMutation({
-    mutationFn: (data: { seatType: "member" | "guest"; channel: "email" | "link"; email?: string }) =>
-      createTeamInvitationFn({ data }),
+    mutationFn: (data: {
+      seatType: "member" | "guest"
+      channel: "email" | "link"
+      email?: string
+      expiresInDays?: number
+      message?: string
+    }) => createTeamInvitationFn({ data }),
     onSuccess: () => {
       toast.success(t("team.inviteSent"))
       invalidate()
@@ -159,7 +170,7 @@ export default function TeamClient({ user }: TeamClientProps) {
   })
 
   const leaveTeamMutation = useMutation({
-    mutationFn: () => leaveTeamFn(),
+    mutationFn: () => leaveTeamFn({ data: {} }),
     onSuccess: () => {
       toast.success(t("team.leaveTeam"))
       window.location.reload()
@@ -169,6 +180,23 @@ export default function TeamClient({ user }: TeamClientProps) {
     },
   })
 
+  const approveLinkMutation = useMutation({
+    mutationFn: ({ invitationId, seatType }: { invitationId: string; seatType: 'member' | 'guest' }) =>
+      approveTeamInvitationFn({ data: { invitationId, seatType } }),
+    onSuccess: () => {
+      toast.success(t("team.inviteApproved"))
+      invalidate()
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : t("team.inviteCreateFailed"))
+    },
+  })
+
+  const handleApproveLink = async (invitationId: string, role: "admin" | "member" | "viewer") => {
+    const seatType = role === "viewer" ? "guest" : "member"
+    await approveLinkMutation.mutateAsync({ invitationId, seatType })
+  }
+
   const membershipIdByUserId = members.reduce<Record<string, string>>((acc, m) => {
     acc[m.member.id] = m.id
     return acc
@@ -176,10 +204,12 @@ export default function TeamClient({ user }: TeamClientProps) {
 
   const mappedInvitations: TeamInvitation[] = invitations.map((inv) => ({
     id: inv.id,
-    email: inv.channel === "email" ? inv.email : undefined,
+    email: inv.channel === "email" && inv.email ? inv.email : undefined,
     link: inv.channel === "link" ? `${APP_URL}/invite/${inv.token}` : undefined,
-    role: inv.seatType === "member" ? "member" : "viewer",
-    status: inv.status as "pending" | "accepted" | "expired" | "revoked",
+    role: inv.channel === "email" ? (inv.seatType === "member" ? "member" : "viewer") : undefined,
+    channel: inv.channel as "email" | "link",
+    status: inv.status as "pending" | "pending_approval" | "accepted" | "expired" | "revoked",
+    applicantEmail: inv.applicantEmail ?? undefined,
     invitedBy: {
       name: inv.owner?.username ?? user.name ?? t("team.you"),
       email: inv.owner?.email ?? user.email ?? "",
@@ -188,6 +218,16 @@ export default function TeamClient({ user }: TeamClientProps) {
     createdAt: new Date(inv.createdAt),
   }))
 
+  const mappedJoinRequests: TeamJoinRequestItem[] = (inviteData?.joinRequests ?? []).map((r) => ({
+    id: r.id,
+    email: r.email,
+    status: r.status as TeamJoinRequestItem["status"],
+    seatType: r.seatType as "member" | "guest",
+    createdAt: new Date(r.createdAt),
+    processedAt: r.processedAt ? new Date(r.processedAt) : undefined,
+    applicantName: r.applicant?.username ?? undefined,
+  }))
+
   const mappedMembers: TeamMember[] = members.map((m) => ({
     id: m.member.id,
     name: m.member.username ?? "",
@@ -195,6 +235,9 @@ export default function TeamClient({ user }: TeamClientProps) {
     role: seatTypeToRole(m.seatType as "member" | "guest" | "owner"),
     status: "active",
     joinedAt: new Date(m.joinedAt),
+    avatarConfig: m.member.avatarConfig as TeamMember["avatarConfig"],
+    bgShape: m.member.bgShape as TeamMember["bgShape"],
+    bgColor: m.member.bgColor as TeamMember["bgColor"],
   }))
 
   const handleCreate = async (data: {
@@ -209,7 +252,10 @@ export default function TeamClient({ user }: TeamClientProps) {
       seatType,
       channel,
       email: data.email,
+      expiresInDays: data.expiresInDays,
+      message: data.message,
     })
+    const expiresDays = data.expiresInDays ?? 7
     return {
       id: result.invitationId,
       email: data.email,
@@ -217,7 +263,7 @@ export default function TeamClient({ user }: TeamClientProps) {
       status: "pending",
       invitedBy: { name: user.name ?? t("team.you"), email: user.email ?? "" },
       createdAt: new Date(),
-      expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
+      expiresAt: new Date(Date.now() + expiresDays * 24 * 60 * 60 * 1000),
     } as TeamInvitation
   }
 
@@ -229,9 +275,60 @@ export default function TeamClient({ user }: TeamClientProps) {
     await resendMutation.mutateAsync(invitationId)
   }
 
-  const handleCopyLink = async (link: string) => {
-    await navigator.clipboard.writeText(link)
-    toast.success(t("team.linkCopied", { link: link.slice(0, 30) }))
+  const handleClearExpired = async () => {
+    await clearExpiredInvitationsFn({ data: {} })
+    invalidate()
+  }
+
+  const handleRefreshLink = async (expiresInDays?: number) => {
+    const days = expiresInDays ?? 7
+    const result = await refreshTeamInvitationLinkFn({ data: { expiresInDays: days } })
+    void qc.invalidateQueries({ queryKey: ["teamInvitations"] })
+    void qc.invalidateQueries({ queryKey: ["teamMembers"] })
+    return {
+      id: result.invitationId,
+      email: undefined,
+      link: `${APP_URL}/invite/${result.token}`,
+      role: "member",
+      status: "pending",
+      invitedBy: { name: user.name ?? t("team.you"), email: user.email ?? "" },
+      createdAt: new Date(),
+      expiresAt: new Date(Date.now() + days * 24 * 60 * 60 * 1000),
+    } as TeamInvitation
+  }
+
+  const approveRequestMutation = useMutation({
+    mutationFn: ({ requestId, seatType }: { requestId: string; seatType: "member" | "guest" }) =>
+      approveTeamJoinRequestFn({ data: { requestId, seatType } }),
+    onSuccess: () => {
+      toast.success(t("team.inviteApproved"))
+      invalidate()
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : t("team.inviteCreateFailed"))
+    },
+  })
+
+  const rejectRequestMutation = useMutation({
+    mutationFn: (requestId: string) => rejectTeamJoinRequestFn({ data: { requestId } }),
+    onSuccess: () => {
+      toast.success(t("team.joinRequests.requestRejected"))
+      invalidate()
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : t("team.inviteCreateFailed"))
+    },
+  })
+
+  const handleApproveRequest = async (requestId: string, role: "admin" | "member" | "viewer") => {
+    await approveRequestMutation.mutateAsync({
+      requestId,
+      seatType: role === "viewer" ? "guest" : "member",
+    })
+  }
+
+  const handleRejectRequest = async (requestId: string) => {
+    await rejectRequestMutation.mutateAsync(requestId)
   }
 
   const handleRemove = async (memberId: string) => {
@@ -313,9 +410,10 @@ export default function TeamClient({ user }: TeamClientProps) {
         <p className="text-sm text-muted-foreground">{t("team.subtitle")}</p>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-2">
+      <div className="grid gap-4 xl:grid-cols-2 border rounded-lg p-4">
         <SeatCard
           title={t("team.seatMembers")}
+          description={t("team.seatMembersHint")}
           usage={seatUsage}
           limit={seatLimit}
         />
@@ -329,10 +427,15 @@ export default function TeamClient({ user }: TeamClientProps) {
 
       <TeamInvitations
         invitations={mappedInvitations}
+        joinRequests={mappedJoinRequests}
         onCreate={handleCreate}
+        onRefreshLink={handleRefreshLink}
         onRevoke={handleRevoke}
         onResend={handleResend}
-        onCopyLink={handleCopyLink}
+        onApproveLink={handleApproveLink}
+        onApproveRequest={handleApproveRequest}
+        onRejectRequest={handleRejectRequest}
+        onClearExpired={handleClearExpired}
       />
 
       <TeamMemberList