feat: #920 migrate id to nanoid

app/store/mask.ts

@@ -5,9 +5,11 @@ import { getLang, Lang } from "../locales";
 import { DEFAULT_TOPIC, ChatMessage } from "./chat";
 import { ModelConfig, useAppConfig } from "./config";
 import { StoreKey } from "../constant";
+import { nanoid } from "nanoid";
 
 export type Mask = {
-  id: number;
+  id: string;
+  createdAt: number;
   avatar: string;
   name: string;
   hideContext?: boolean;
@@ -19,25 +21,23 @@ export type Mask = {
 };
 
 export const DEFAULT_MASK_STATE = {
-  masks: {} as Record<number, Mask>,
-  globalMaskId: 0,
+  masks: {} as Record<string, Mask>,
 };
 
 export type MaskState = typeof DEFAULT_MASK_STATE;
 type MaskStore = MaskState & {
   create: (mask?: Partial<Mask>) => Mask;
-  update: (id: number, updater: (mask: Mask) => void) => void;
-  delete: (id: number) => void;
+  update: (id: string, updater: (mask: Mask) => void) => void;
+  delete: (id: string) => void;
   search: (text: string) => Mask[];
-  get: (id?: number) => Mask | null;
+  get: (id?: string) => Mask | null;
   getAll: () => Mask[];
 };
 
-export const DEFAULT_MASK_ID = 1145141919810;
 export const DEFAULT_MASK_AVATAR = "gpt-bot";
 export const createEmptyMask = () =>
   ({
-    id: DEFAULT_MASK_ID,
+    id: nanoid(),
     avatar: DEFAULT_MASK_AVATAR,
     name: DEFAULT_TOPIC,
     context: [],
@@ -45,6 +45,7 @@ export const createEmptyMask = () =>
     modelConfig: { ...useAppConfig.getState().modelConfig },
     lang: getLang(),
     builtin: false,
+    createdAt: Date.now(),
   } as Mask);
 
 export const useMaskStore = create<MaskStore>()(
@@ -53,9 +54,8 @@ export const useMaskStore = create<MaskStore>()(
       ...DEFAULT_MASK_STATE,
 
       create(mask) {
-        set(() => ({ globalMaskId: get().globalMaskId + 1 }));
-        const id = get().globalMaskId;
         const masks = get().masks;
+        const id = nanoid();
         masks[id] = {
           ...createEmptyMask(),
           ...mask,
@@ -87,7 +87,7 @@ export const useMaskStore = create<MaskStore>()(
       },
       getAll() {
         const userMasks = Object.values(get().masks).sort(
-          (a, b) => b.id - a.id,
+          (a, b) => b.createdAt - a.createdAt,
         );
         const config = useAppConfig.getState();
         if (config.hideBuiltinMasks) return userMasks;
@@ -109,7 +109,18 @@ export const useMaskStore = create<MaskStore>()(
     }),
     {
       name: StoreKey.Mask,
-      version: 2,
+      version: 3,
+
+      migrate(state, version) {
+        const newState = JSON.parse(JSON.stringify(state)) as MaskState;
+
+        // migrate mask id to nanoid
+        if (version < 3) {
+          Object.values(newState.masks).forEach((m) => (m.id = nanoid()));
+        }
+
+        return newState as any;
+      },
     },
   ),
 );