Use nanoid for message ids.

package.json

@@ -107,6 +107,7 @@
     "dotenv": "^16.4.5",
     "mobx-react-lite": "^4.0.7",
     "mobx-state-tree": "^7.0.0",
+    "nanoid": "^5.0.9",
     "openai": "^4.72.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/models/chat-transcript-model.ts

@@ -1,5 +1,6 @@
 import { Instance, types } from "mobx-state-tree";
-import { createMessageId, timeStamp } from "../utils/utils";
+import { nanoid } from "nanoid";
+import { timeStamp } from "../utils/utils";
 import { MessageContent } from "../types";
 
 const MessageModel = types.model("MessageModel", {
@@ -26,7 +27,7 @@ export const ChatTranscriptModel = types
         speaker,
         messageContent,
         timestamp: timeStamp(),
-        id: createMessageId(),
+        id: nanoid(),
       });
     },
     clearTranscript() {

src/utils/utils.ts

@@ -3,18 +3,6 @@ export const timeStamp = (): string => {
   return now.toLocaleString();
 };
 
-const idChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-export const createMessageId = (): string => {
-  const result: string[] = [];
-
-  while (result.length < 10) {
-    const randomIndex = Math.floor(Math.random() * idChars.length);
-    result.push(idChars.charAt(randomIndex));
-  }
-
-  return result.join("");
-};
-
 export const formatJsonMessage = (json: any) => {
   return JSON.stringify(json, null, 2);
 };