@tablestore/tablestore-agent-cli 0.2.10 → 0.3.1

package/dist/dashboard-runtime/dashboard/src/components/memory/memory-create-form.tsx

@@ -6,7 +6,13 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { toast } from "sonner";
-import { Brain, Database, FolderTree, Sparkles } from "lucide-react";
+import {
+  Brain,
+  Database,
+  FilePenLine,
+  FolderTree,
+  Sparkles,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -23,39 +29,69 @@ import { useCreateMemoryStore } from "@/hooks/use-create-memory-store";
 import { useLocaleRevalidation } from "@/hooks/use-locale-revalidation";
 import { cn } from "@/lib/utils";
 import {
-  storageModeDescription,
-  storageModeLabel,
-  type StorageMode,
+  memoryStorageSelectionForInput,
+  storageSelectionToMode,
+  toggleMemoryFileStorage,
 } from "@/lib/memory-storage-mode";
 import { useI18n } from "@/i18n/i18n-context";
 import type { TranslateFn } from "@/i18n/i18n-context";
+import type { CreateMemoryStoreRequest } from "@/types/memory";
 
 function buildCreateMemoryStoreSchema(t: TranslateFn) {
-  return z.object({
-    memoryStoreName: z
-      .string()
-      .trim()
-      .min(1, t("memory.create.nameRequired"))
-      .max(32, t("memory.create.nameMaxLength"))
-      .regex(/^[a-zA-Z0-9_]+$/, t("memory.create.namePattern")),
-    description: z
-      .string()
-      .trim()
-      .max(256, t("memory.create.descriptionMaxLength"))
-      .optional(),
-    storageMode: z.enum(["ots", "oss+ots"]),
-    extractInstructions: z
-      .string()
-      .trim()
-      .max(4096, t("memory.create.extractMaxLength"))
-      .optional(),
-  });
+  return z
+    .object({
+      memoryStoreName: z
+        .string()
+        .trim()
+        .min(1, t("memory.create.nameRequired"))
+        .max(32, t("memory.create.nameMaxLength"))
+        .regex(/^[a-zA-Z0-9_]+$/, t("memory.create.namePattern")),
+      description: z
+        .string()
+        .trim()
+        .max(256, t("memory.create.descriptionMaxLength"))
+        .optional(),
+      inputType: z.enum(["short-term", "file"]),
+      storageStructures: z
+        .array(z.enum(["structured", "file"]))
+        .min(1, t("memory.create.storageStructureRequired")),
+      extractInstructions: z
+        .string()
+        .trim()
+        .max(4096, t("memory.create.extractMaxLength"))
+        .optional(),
+    })
+    .superRefine((values, context) => {
+      try {
+        storageSelectionToMode(values);
+      } catch {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["storageStructures"],
+          message: t("memory.create.storageStructureInvalid"),
+        });
+      }
+    });
 }
 
 type CreateMemoryStoreInput = z.infer<
   ReturnType<typeof buildCreateMemoryStoreSchema>
 >;
 
+export function buildCreateMemoryStoreRequest(
+  values: CreateMemoryStoreInput,
+): CreateMemoryStoreRequest {
+  const storageMode = storageSelectionToMode(values);
+  const extractInstructions = values.extractInstructions?.trim();
+  return {
+    memoryStoreName: values.memoryStoreName,
+    description: values.description?.length ? values.description : undefined,
+    storageMode,
+    extractInstructions:
+      storageMode === "filemem" ? undefined : extractInstructions || undefined,
+  };
+}
+
 export function MemoryCreateForm() {
   const router = useRouter();
   const createStore = useCreateMemoryStore();
@@ -71,25 +107,18 @@ export function MemoryCreateForm() {
     defaultValues: {
       memoryStoreName: "",
       description: "",
-      storageMode: "ots",
+      inputType: "short-term",
+      storageStructures: ["structured"],
       extractInstructions: "",
     },
   });
 
   useLocaleRevalidation(form);
+  const selectedInputType = form.watch("inputType");
 
   async function onSubmit(values: CreateMemoryStoreInput) {
     try {
-      await createStore.mutateAsync({
-        memoryStoreName: values.memoryStoreName,
-        description: values.description?.length
-          ? values.description
-          : undefined,
-        storageMode: values.storageMode,
-        extractInstructions: values.extractInstructions?.length
-          ? values.extractInstructions
-          : undefined,
-      });
+      await createStore.mutateAsync(buildCreateMemoryStoreRequest(values));
       toast.success(t("memory.list.createSuccess"));
       router.push("/memory");
     } catch (error) {
@@ -159,29 +188,47 @@ export function MemoryCreateForm() {
 
         <section className="rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-5 shadow-sm">
           <FormSectionHeader
-            title={t("memory.create.storageModeSection")}
-            description={t("memory.create.storageModeSectionDesc")}
+            title={t("memory.create.inputTypeSection")}
+            description={t("memory.create.inputTypeSectionDesc")}
           />
           <FormField
             control={form.control}
-            name="storageMode"
+            name="inputType"
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <div className="grid gap-3 sm:grid-cols-2">
-                    <StorageModeOption
-                      value="ots"
+                  <div className="grid gap-3 md:grid-cols-2">
+                    <SelectionOption
                       icon={<Database className="h-5 w-5" />}
-                      selected={field.value === "ots"}
-                      onSelect={() => field.onChange("ots")}
-                      t={t}
+                      label={t("memory.create.shortTermInputLabel")}
+                      description={t("memory.create.shortTermInputDescription")}
+                      selected={field.value === "short-term"}
+                      onSelect={() => {
+                        const selection =
+                          memoryStorageSelectionForInput("short-term");
+                        field.onChange(selection.inputType);
+                        form.setValue(
+                          "storageStructures",
+                          selection.storageStructures,
+                          { shouldDirty: true, shouldValidate: true },
+                        );
+                      }}
                     />
-                    <StorageModeOption
-                      value="oss+ots"
-                      icon={<FolderTree className="h-5 w-5" />}
-                      selected={field.value === "oss+ots"}
-                      onSelect={() => field.onChange("oss+ots")}
-                      t={t}
+                    <SelectionOption
+                      icon={<FilePenLine className="h-5 w-5" />}
+                      label={t("memory.create.fileInputLabel")}
+                      description={t("memory.create.fileInputDescription")}
+                      selected={field.value === "file"}
+                      onSelect={() => {
+                        const selection =
+                          memoryStorageSelectionForInput("file");
+                        field.onChange(selection.inputType);
+                        form.setValue(
+                          "storageStructures",
+                          selection.storageStructures,
+                          { shouldDirty: true, shouldValidate: true },
+                        );
+                      }}
                     />
                   </div>
                 </FormControl>
@@ -193,32 +240,78 @@ export function MemoryCreateForm() {
 
         <section className="rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-5 shadow-sm">
           <FormSectionHeader
-            title={t("memory.create.extractSection")}
-            description={t("memory.create.extractSectionDesc")}
+            title={t("memory.create.storageStructureSection")}
+            description={t("memory.create.storageStructureSectionDesc")}
           />
           <FormField
             control={form.control}
-            name="extractInstructions"
+            name="storageStructures"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>{t("memory.create.extractLabel")}</FormLabel>
                 <FormControl>
-                  <Textarea
-                    placeholder={t("memory.create.extractPlaceholder")}
-                    className="resize-none"
-                    rows={5}
-                    {...field}
-                  />
+                  <div className="grid gap-3 md:grid-cols-2">
+                    <SelectionOption
+                      icon={<Database className="h-5 w-5" />}
+                      label={t("memory.create.structuredStorageLabel")}
+                      description={t(
+                        "memory.create.structuredStorageDescription",
+                      )}
+                      selected={field.value.includes("structured")}
+                      disabled
+                      onSelect={() => undefined}
+                    />
+                    <SelectionOption
+                      icon={<FolderTree className="h-5 w-5" />}
+                      label={t("memory.create.fileStorageLabel")}
+                      description={t("memory.create.fileStorageDescription")}
+                      selected={field.value.includes("file")}
+                      disabled={selectedInputType === "file"}
+                      onSelect={() => {
+                        const selection = toggleMemoryFileStorage({
+                          inputType: selectedInputType,
+                          storageStructures: field.value,
+                        });
+                        field.onChange(selection.storageStructures);
+                      }}
+                    />
+                  </div>
                 </FormControl>
-                <FormDescription>
-                  {t("memory.create.extractHelp")}
-                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
           />
         </section>
 
+        {selectedInputType === "short-term" && (
+          <section className="rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-5 shadow-sm">
+            <FormSectionHeader
+              title={t("memory.create.extractSection")}
+              description={t("memory.create.extractSectionDesc")}
+            />
+            <FormField
+              control={form.control}
+              name="extractInstructions"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("memory.create.extractLabel")}</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder={t("memory.create.extractPlaceholder")}
+                      className="resize-none"
+                      rows={5}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    {t("memory.create.extractHelp")}
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </section>
+        )}
+
         <div className="flex justify-end gap-3 border-t border-[hsl(var(--border-light))] pt-4">
           <Button
             type="button"
@@ -281,33 +374,33 @@ function CreateMemoryHero() {
   );
 }
 
-/**
- * 存储模式选择卡片：仅 API 记忆（ots）/ 支持文件记忆（oss+ots）。文案取自
- * storageModeLabel/Description，保证与列表徽标、设置页说明一致。
- */
-function StorageModeOption({
-  value,
+function SelectionOption({
   icon,
+  label,
+  description,
   selected,
+  disabled = false,
   onSelect,
-  t,
 }: {
-  value: StorageMode;
   icon: React.ReactNode;
+  label: string;
+  description: string;
   selected: boolean;
+  disabled?: boolean;
   onSelect: () => void;
-  t: TranslateFn;
 }) {
   return (
     <button
       type="button"
       onClick={onSelect}
       aria-pressed={selected}
+      disabled={disabled}
       className={cn(
         "flex flex-col items-start gap-2 rounded-lg border p-4 text-left transition-colors",
         selected
           ? "border-[hsl(var(--primary)/0.5)] bg-[hsl(var(--primary-soft))] ring-1 ring-[hsl(var(--primary)/0.18)]"
           : "border-[hsl(var(--border))] hover:bg-[hsl(var(--muted)/0.4)]",
+        disabled && "cursor-default opacity-75",
       )}
     >
       <div className="flex items-center gap-2">
@@ -321,12 +414,10 @@ function StorageModeOption({
         >
           {icon}
         </span>
-        <span className="text-sm font-semibold text-foreground">
-          {storageModeLabel(value, t)}
-        </span>
+        <span className="text-sm font-semibold text-foreground">{label}</span>
       </div>
       <p className="text-xs leading-relaxed text-muted-foreground">
-        {storageModeDescription(value, t)}
+        {description}
       </p>
     </button>
   );