@tablestore/tablestore-agent-cli 0.2.1 → 0.2.4

package/dist/dashboard-runtime/dashboard/src/components/chat/chat-config-context.tsx

@@ -15,9 +15,34 @@ import type {
   ChatSessionMount,
 } from "@/hooks/use-chat-history";
 import { assembleRetrievalConfiguration } from "@/components/retrieval/assemble-retrieval-configuration";
+import { newId } from "@/lib/random-id";
 
 export type MountItem = ChatSessionMount;
 
+/**
+ * 绑定里存的 scope 是*写* scope：四个字段都齐全且非通配符。
+ * 服务端在检索时自行派生读 scope（agentId="*", runId="*"），客户端
+ * 永远不发通配符。
+ */
+export interface ChatMemoryWriteScope {
+  appId: string;
+  tenantId: string;
+  agentId: string;
+  runId: string;
+}
+
+export interface ChatMemoryBinding {
+  id: string;
+  memoryStoreName: string;
+  scope: ChatMemoryWriteScope;
+  topK?: number;
+  autoSave: boolean;
+}
+
+export type ChatMemoryPatch =
+  Partial<Omit<ChatMemoryBinding, "id" | "scope">> &
+    { scope?: Partial<ChatMemoryWriteScope> };
+
 export interface ChatConfigState {
   providerId: string;
   model: string;
@@ -27,6 +52,7 @@ export interface ChatConfigState {
   perKbTopK: number;
   retrieval: ChatRetrievalConfig;
   mounts: MountItem[];
+  memory?: ChatMemoryBinding;
 }
 
 /** Default aggregate topK applied when a session is first created. Mirrors
@@ -51,7 +77,7 @@ export const DEFAULT_RETRIEVAL: ChatRetrievalConfig = {
   weightFullText: 0.3,
 };
 
-const INITIAL_STATE: ChatConfigState = {
+export const INITIAL_STATE: ChatConfigState = {
   providerId: "",
   model: "",
   systemPrompt: "",
@@ -72,12 +98,15 @@ type Action =
   | { type: "SET_RETRIEVAL"; value: ChatRetrievalConfig }
   | { type: "ADD_MOUNT"; mount: MountItem }
   | { type: "UPDATE_MOUNT"; id: string; patch: Partial<MountItem> }
+  | { type: "RESET_MOUNT_RETRIEVAL"; id: string }
   | { type: "REMOVE_MOUNT"; id: string }
   | { type: "REORDER_MOUNTS"; ids: string[] }
+  | { type: "SET_MEMORY"; binding: Omit<ChatMemoryBinding, "id"> | undefined }
+  | { type: "UPDATE_MEMORY"; patch: ChatMemoryPatch }
   | { type: "HYDRATE"; state: Partial<ChatConfigState> }
   | { type: "RESET" };
 
-function reducer(state: ChatConfigState, action: Action): ChatConfigState {
+export function reducer(state: ChatConfigState, action: Action): ChatConfigState {
   switch (action.type) {
     case "SET_PROVIDER":
       return { ...state, providerId: action.providerId, model: action.model };
@@ -108,6 +137,21 @@ function reducer(state: ChatConfigState, action: Action): ChatConfigState {
           m.id === action.id ? { ...m, ...action.patch } : m,
         ),
       };
+    // 清除单 KB 的自定义检索参数：透过 partial spread 调用者不能以 undefined
+    // 重置字段（{ retrieval: undefined } 仍会使原始键存在），这里重建 mount
+    // 折叠对象，确保字段从存在变为不存在，让后续 `??` fallback 生效。
+    case "RESET_MOUNT_RETRIEVAL":
+      return {
+        ...state,
+        mounts: state.mounts.map((m) => {
+          if (m.id !== action.id) return m;
+          // 按需保留 id / knowledgeBaseName / subspace；丢弃 retrieval / topK。
+          const { retrieval: _retrieval, topK: _topK, ...rest } = m;
+          void _retrieval;
+          void _topK;
+          return rest;
+        }),
+      };
     case "REMOVE_MOUNT":
       return { ...state, mounts: state.mounts.filter((m) => m.id !== action.id) };
     case "REORDER_MOUNTS": {
@@ -119,6 +163,31 @@ function reducer(state: ChatConfigState, action: Action): ChatConfigState {
     }
     case "HYDRATE":
       return { ...state, ...action.state };
+    // SET_MEMORY 同一绑定的 id 保持稳定；只有从无到有时才铸新 id，避免不必要的 React key 抖动。
+    case "SET_MEMORY": {
+      if (!action.binding) return { ...state, memory: undefined };
+      const runId = action.binding.scope.runId || newId("run");
+      return {
+        ...state,
+        memory: {
+          id: state.memory?.id ?? newId("memory"),
+          ...action.binding,
+          scope: { ...action.binding.scope, runId },
+        },
+      };
+    }
+    case "UPDATE_MEMORY": {
+      if (!state.memory) return state;
+      const { scope: patchScope, ...rest } = action.patch;
+      return {
+        ...state,
+        memory: {
+          ...state.memory,
+          ...rest,
+          scope: { ...state.memory.scope, ...(patchScope ?? {}) },
+        },
+      };
+    }
     case "RESET":
       return INITIAL_STATE;
     default:
@@ -136,8 +205,12 @@ export interface ChatConfigContextValue extends ChatConfigState {
   setRetrieval(value: ChatRetrievalConfig): void;
   addMount(mount: MountItem): void;
   updateMount(id: string, patch: Partial<MountItem>): void;
+  /** Drop the per-KB retrieval/topK overrides for `id` so it inherits global defaults. */
+  resetMountRetrieval(id: string): void;
   removeMount(id: string): void;
   reorderMounts(ids: string[]): void;
+  setMemory(binding: Omit<ChatMemoryBinding, "id"> | undefined): void;
+  updateMemory(patch: ChatMemoryPatch): void;
   hydrate(state: Partial<ChatConfigState>): void;
   reset(): void;
   /** Serialize the current config for persistence into a chat session. */
@@ -162,8 +235,12 @@ export function ChatConfigProvider({ children }: { children: ReactNode }) {
       setRetrieval: (v) => dispatch({ type: "SET_RETRIEVAL", value: v }),
       addMount: (m) => dispatch({ type: "ADD_MOUNT", mount: m }),
       updateMount: (id, patch) => dispatch({ type: "UPDATE_MOUNT", id, patch }),
+      resetMountRetrieval: (id) =>
+        dispatch({ type: "RESET_MOUNT_RETRIEVAL", id }),
       removeMount: (id) => dispatch({ type: "REMOVE_MOUNT", id }),
       reorderMounts: (ids) => dispatch({ type: "REORDER_MOUNTS", ids }),
+      setMemory: (b) => dispatch({ type: "SET_MEMORY", binding: b }),
+      updateMemory: (p) => dispatch({ type: "UPDATE_MEMORY", patch: p }),
       hydrate: (s) => dispatch({ type: "HYDRATE", state: s }),
       reset: () => dispatch({ type: "RESET" }),
       toSessionConfig: () => ({
@@ -175,6 +252,7 @@ export function ChatConfigProvider({ children }: { children: ReactNode }) {
         perKbTopK: state.perKbTopK,
         retrieval: state.retrieval,
         mounts: state.mounts,
+        memory: state.memory,
       }),
     }),
     [state],
@@ -198,31 +276,50 @@ export function useChatConfig(): ChatConfigContextValue {
  * return undefined when no KB is mounted. Kept as a plain helper so it can
  * run outside React rendering (e.g. in onClick handlers).
  *
- * The same `retrievalConfiguration` (searchType / rerank strategy / weights)
- * is applied to every mounted KB: cross-KB score comparability only holds
- * when each KB is scored under identical rules. `topK` is likewise uniform
- * per KB, and the caller (chat route) applies a global aggregate cap after
- * merging by score.
+ * 每个 mount 优先使用自己的 `retrieval` / `topK` override；未设置时 fallback
+ * 到会话级的 `state.retrieval` / `state.perKbTopK`。上层在 chat route 合并后
+ * 仍由 `state.aggregateTopK` 统一截断，跨 KB 的打分可比性责任交给服务端。
  */
 export function buildRagFromMounts(state: ChatConfigState) {
   if (!state.mounts.length) return undefined;
-  const retrievalConfiguration = assembleRetrievalConfiguration(
-    state.retrieval,
-    state.perKbTopK,
-  );
   return {
-    knowledgeBases: state.mounts.map((m) => ({
-      knowledgeBaseName: m.knowledgeBaseName,
-      ...(m.subspace?.length ? { subspace: m.subspace } : {}),
-      ...(retrievalConfiguration
-        ? { retrievalConfiguration: retrievalConfiguration as Record<string, unknown> }
-        : {}),
-      topK: state.perKbTopK,
-    })),
+    knowledgeBases: state.mounts.map((m) => {
+      const effectiveRetrieval = m.retrieval ?? state.retrieval;
+      const effectiveTopK = m.topK ?? state.perKbTopK;
+      const retrievalConfiguration = assembleRetrievalConfiguration(
+        effectiveRetrieval,
+        effectiveTopK,
+      );
+      return {
+        knowledgeBaseName: m.knowledgeBaseName,
+        ...(m.subspace?.length ? { subspace: m.subspace } : {}),
+        ...(retrievalConfiguration
+          ? { retrievalConfiguration: retrievalConfiguration as Record<string, unknown> }
+          : {}),
+        topK: effectiveTopK,
+      };
+    }),
     topK: state.aggregateTopK,
   };
 }
 
+/**
+ * 把当前绑定序列化成 `/api/v1/llm/chat` 请求体里的 `memory` 段。
+ * 任一 scope 字段为空 ⇒ 视作未绑定，返回 undefined。
+ */
+export function buildMemoryFromBinding(state: ChatConfigState) {
+  const m = state.memory;
+  if (!m) return undefined;
+  const { appId, tenantId, agentId, runId } = m.scope;
+  if (!appId || !tenantId || !agentId || !runId) return undefined;
+  return {
+    memoryStoreName: m.memoryStoreName,
+    scope: { appId, tenantId, agentId, runId },
+    ...(typeof m.topK === "number" ? { topK: m.topK } : {}),
+    autoSave: m.autoSave,
+  };
+}
+
 /** Hook shortcut so downstream components don't have to re-derive the rag. */
 export function useChatRag() {
   const cfg = useChatConfig();

package/dist/dashboard-runtime/dashboard/src/components/chat/chat-mount-config.tsx

@@ -25,6 +25,7 @@ import { TemperatureSlider } from "@/components/shared/temperature-slider";
 import { newId } from "@/lib/random-id";
 
 import { AddMountRow } from "./add-mount-row";
+import { MemoryBindSection } from "./memory-bind-section";
 import { MountEmptyState } from "./mount-empty-state";
 import { MountRow } from "./mount-row";
 import { UnifiedRetrievalSection } from "./unified-retrieval-section";
@@ -186,6 +187,7 @@ export function ChatMountConfig({ open, onOpenChange, onSave }: ChatMountConfigP
                         key={mount.id}
                         mount={mount}
                         subspaceEnabled={kb?.subspace === true}
+                        knowledgeBase={kb}
                       />
                     );
                   })}
@@ -214,6 +216,9 @@ export function ChatMountConfig({ open, onOpenChange, onSave }: ChatMountConfigP
                 : undefined
             }
           />
+
+          {/* ---------- Memory binding ---------- */}
+          <MemoryBindSection />
         </div>
 
         <SheetFooter className="gap-2 border-t border-[hsl(var(--border))] bg-[hsl(var(--surface))] px-6 py-3 sm:items-center sm:justify-between sm:space-x-0">

package/dist/dashboard-runtime/dashboard/src/components/chat/memory-bind-section.tsx

@@ -0,0 +1,372 @@
+"use client";
+
+import Link from "next/link";
+import { useId, useState } from "react";
+import { Brain, Check, Copy, Plus, Sparkles, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { useMemoryStores } from "@/hooks/use-memory-stores";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useChatConfig } from "@/components/chat/chat-config-context";
+import { cn } from "@/lib/utils";
+
+/**
+ * 抽屉里的「记忆库」区块。
+ *
+ * 骨架与同抽屉里的「挂载的知识库 / 统一检索参数」section 严格对齐：
+ * - 同样的 `border-t pt-4` 外壳 + 「标题 + 副标题 + 右侧紧凑数字输入」的 header
+ * - 未绑定 → 与 MountEmptyState 同款 hero 卡片（gradient bg、primary-soft icon tile）
+ * - 已绑定 → 与 MountRow 同款单行 chip 展示选中的 store；下方独立配置子区
+ *
+ * 绑定状态来自抽屉 reducer（跨会话 hydrate），故继续用受控 Input/Select，
+ * 不迁 react-hook-form —— 双向同步成本远高于收益。
+ */
+export function MemoryBindSection() {
+  const cfg = useChatConfig();
+  const { data: storesPage, isLoading } = useMemoryStores();
+  const stores = storesPage?.items ?? [];
+  const binding = cfg.memory;
+  const topKId = useId();
+
+  return (
+    <div className="space-y-3 border-t border-[hsl(var(--border))] pt-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <Label className="text-sm font-medium">绑定的记忆库</Label>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {binding
+              ? `每轮检索 Top-${binding.topK ?? 5}，对话后写回当前范围`
+              : "绑定后服务端在每轮对话前检索、对话后写回；同一应用 + 租户下记忆跨智能体可共享"}
+          </p>
+        </div>
+        {binding && (
+          <div className="flex items-center gap-1.5">
+            <Label
+              htmlFor={topKId}
+              className="text-xs text-muted-foreground"
+              title="每轮检索返回的记忆条数上限"
+            >
+              Top-K
+            </Label>
+            <Input
+              id={topKId}
+              type="number"
+              min={1}
+              max={50}
+              className="h-8 w-20"
+              value={binding.topK ?? 5}
+              onChange={(e) => {
+                const n = parseInt(e.target.value, 10);
+                const clamped =
+                  Number.isFinite(n) && n >= 1 && n <= 50 ? n : 5;
+                cfg.updateMemory({ topK: clamped });
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      {!binding ? (
+        <MemoryBindEmptyState
+          stores={stores}
+          isLoading={isLoading}
+          onBind={() =>
+            cfg.setMemory({
+              memoryStoreName: stores[0]?.memoryStoreName ?? "",
+              scope: { appId: "", tenantId: "", agentId: "", runId: "" },
+              autoSave: true,
+              topK: 5,
+            })
+          }
+        />
+      ) : (
+        <>
+          <MemoryStoreRow
+            value={binding.memoryStoreName}
+            stores={stores}
+            onChange={(v) => cfg.updateMemory({ memoryStoreName: v })}
+            onUnbind={() => cfg.setMemory(undefined)}
+          />
+
+          <MemoryBindingForm
+            appId={binding.scope.appId}
+            tenantId={binding.scope.tenantId}
+            agentId={binding.scope.agentId}
+            runId={binding.scope.runId}
+            autoSave={binding.autoSave}
+            onScopeChange={(patch) => cfg.updateMemory({ scope: patch })}
+            onAutoSaveChange={(v) => cfg.updateMemory({ autoSave: v })}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 未绑定时的 hero 空态。结构、token、动效与 `MountEmptyState` 一致：
+ * gradient 背景 + dashed primary 边框 + 居中 icon tile + 行动按钮。
+ */
+function MemoryBindEmptyState(props: {
+  stores: ReadonlyArray<{ memoryStoreName: string }>;
+  isLoading: boolean;
+  onBind: () => void;
+}) {
+  const { stores, isLoading, onBind } = props;
+  const hasNoStores = !isLoading && stores.length === 0;
+
+  return (
+    <div
+      className="animate-home-reveal relative overflow-hidden rounded-lg border border-dashed border-[hsl(var(--primary)/0.35)] bg-gradient-to-br from-[hsl(var(--primary-soft))] via-[hsl(var(--surface))] to-[hsl(var(--surface))] px-5 py-6 text-center"
+      role="region"
+      aria-label="绑定记忆库"
+    >
+      <Sparkles
+        className="pointer-events-none absolute right-3 top-3 h-3.5 w-3.5 text-[hsl(var(--primary)/0.45)]"
+        aria-hidden
+      />
+
+      <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-[hsl(var(--primary-soft))] ring-1 ring-[hsl(var(--primary)/0.18)]">
+        <Brain className="h-6 w-6 text-[hsl(var(--primary))]" />
+      </div>
+
+      <h3 className="text-sm font-semibold text-[hsl(var(--foreground))]">
+        {hasNoStores ? "还没有任何记忆库" : "绑定记忆库以让对话拥有长期记忆"}
+      </h3>
+      <p className="mx-auto mt-1 max-w-[320px] text-xs leading-relaxed text-[hsl(var(--muted-foreground))]">
+        {hasNoStores
+          ? "创建第一个记忆库后，即可在对话中绑定并自动写回 / 检索"
+          : "绑定后服务端会在每轮对话前检索相关记忆注入到 system prompt，对话结束后自动写回到当前范围"}
+      </p>
+
+      <div className="mt-4 flex flex-col items-center gap-2">
+        {hasNoStores ? (
+          <Button asChild size="default" className="h-9 px-4">
+            <Link href="/memory/create">
+              <Brain className="h-4 w-4" />
+              创建记忆库
+            </Link>
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            size="default"
+            className="h-9 px-4"
+            disabled={isLoading}
+            onClick={onBind}
+          >
+            <Plus className="h-4 w-4" />
+            绑定记忆库
+          </Button>
+        )}
+
+        {!hasNoStores && !isLoading ? (
+          <p className="text-[11px] text-[hsl(var(--muted-foreground))]">
+            从已有的{" "}
+            <span className="font-medium text-[hsl(var(--foreground))]">
+              {stores.length}
+            </span>{" "}
+            个记忆库中选择
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 已绑定时展示选中的 store —— 与 MountRow 同款 chip：圆角浅 muted 背景 +
+ * 单行 + 末尾删除（解除绑定）。把"切换 store"做成行内 Select，避免再起一行。
+ */
+function MemoryStoreRow(props: {
+  value: string;
+  stores: ReadonlyArray<{ memoryStoreName: string }>;
+  onChange: (v: string) => void;
+  onUnbind: () => void;
+}) {
+  return (
+    <div className="flex items-center gap-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.3)] px-3 py-2">
+      <Brain className="h-3.5 w-3.5 shrink-0 text-[hsl(var(--primary))]" />
+      <Select value={props.value} onValueChange={props.onChange}>
+        <SelectTrigger className="h-8 flex-1 border-0 bg-transparent px-1 text-sm font-medium shadow-none hover:bg-[hsl(var(--muted)/0.5)] focus:ring-0 focus:ring-offset-0">
+          <SelectValue placeholder="选择记忆库" />
+        </SelectTrigger>
+        <SelectContent>
+          {props.stores.map((s) => (
+            <SelectItem key={s.memoryStoreName} value={s.memoryStoreName}>
+              {s.memoryStoreName}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7"
+        onClick={props.onUnbind}
+        title="解除绑定"
+      >
+        <Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * 写 scope + autoSave + runId 的配置子区。
+ *
+ * 视觉对齐 UnifiedRetrievalSection：浅分割线起头，本区共享同一种「次级
+ * label」节奏（`text-xs font-medium uppercase tracking-wider text-muted-foreground`）。
+ */
+function MemoryBindingForm(props: {
+  appId: string;
+  tenantId: string;
+  agentId: string;
+  runId: string;
+  autoSave: boolean;
+  onScopeChange: (patch: {
+    appId?: string;
+    tenantId?: string;
+    agentId?: string;
+  }) => void;
+  onAutoSaveChange: (v: boolean) => void;
+}) {
+  return (
+    <div className="space-y-4 border-t border-[hsl(var(--border-light))] pt-3">
+      <div className="space-y-2.5">
+        <div>
+          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+            写入范围
+          </Label>
+          <p className="mt-1 text-[11px] leading-relaxed text-muted-foreground">
+            服务端在检索时把「智能体 / 会话」派生为通配 <code className="rounded bg-muted px-1 py-0.5 font-mono text-[10px]">*</code>，
+            因此同一应用 + 租户下不同智能体 / 不同会话可以读取彼此的记忆
+          </p>
+        </div>
+        <div className="grid grid-cols-2 gap-3">
+          <ScopeField
+            label="应用 *"
+            value={props.appId}
+            onChange={(v) => props.onScopeChange({ appId: v })}
+          />
+          <ScopeField
+            label="租户 *"
+            value={props.tenantId}
+            onChange={(v) => props.onScopeChange({ tenantId: v })}
+          />
+          <div className="col-span-2">
+            <ScopeField
+              label="智能体 *"
+              value={props.agentId}
+              onChange={(v) => props.onScopeChange({ agentId: v })}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-row items-center justify-between gap-4 rounded-md border border-[hsl(var(--border))] p-3">
+        <div className="space-y-0.5">
+          <Label className="text-sm">对话后自动写入记忆</Label>
+          <p className="text-xs text-muted-foreground">
+            自动归档：把本轮用户 / 助手消息写入当前范围
+          </p>
+        </div>
+        <Switch
+          checked={props.autoSave}
+          onCheckedChange={props.onAutoSaveChange}
+        />
+      </div>
+
+      <RunIdField runId={props.runId} />
+    </div>
+  );
+}
+
+function ScopeField(props: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const id = useId();
+  const invalid = !props.value;
+  return (
+    <div className="space-y-1">
+      <Label htmlFor={id} className="text-xs">
+        {props.label}
+      </Label>
+      <Input
+        id={id}
+        value={props.value}
+        onChange={(e) => props.onChange(e.target.value)}
+        aria-invalid={invalid}
+        className={cn(
+          "h-9",
+          invalid && "border-[hsl(var(--destructive))]",
+        )}
+      />
+    </div>
+  );
+}
+
+function RunIdField({ runId }: { runId: string }) {
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy() {
+    if (!runId) return;
+    try {
+      await navigator.clipboard.writeText(runId);
+      setCopied(true);
+      toast.success("已复制会话 ID");
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error("复制失败，请手动选择文本");
+    }
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          会话 ID
+        </Label>
+        <span
+          className="text-[10px] text-muted-foreground"
+          title="会话 ID 由当前对话自动生成并在整个对话内复用，用于串联同一会话的记忆"
+        >
+          自动生成 · 自动复用
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        <code className="flex-1 truncate rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.35)] px-2.5 py-1.5 font-mono text-[11px] text-muted-foreground">
+          {runId || "—"}
+        </code>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 shrink-0"
+          aria-label="复制会话 ID"
+          disabled={!runId}
+          onClick={handleCopy}
+        >
+          {copied ? (
+            <Check className="h-3.5 w-3.5 text-[hsl(var(--primary))]" />
+          ) : (
+            <Copy className="h-3.5 w-3.5" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}