Use uuid for message ID generation instead of crypto method (#882)

Because `crypto.randomUUID()` is not available on non-secure contexts
(for example `http` versions of chat-ui), this would break on non-https
deployments of chat-ui.


This should fix #870 and fix #868

Author: nsarrazin

package-lock.json

@@ -24,6 +24,7 @@
 		"@types/jsdom": "^21.1.1",
 		"@types/marked": "^4.0.8",
 		"@types/parquetjs": "^0.10.3",
+		"@types/uuid": "^9.0.8",
 		"@typescript-eslint/eslint-plugin": "^6.x",
 		"@typescript-eslint/parser": "^6.x",
 		"eslint": "^8.28.0",
@@ -71,6 +72,7 @@
 		"sharp": "^0.33.2",
 		"tailwind-scrollbar": "^3.0.0",
 		"tailwindcss": "^3.4.0",
+		"uuid": "^9.0.1",
 		"zod": "^3.22.3"
 	},
 	"optionalDependencies": {

package.json

@@ -1,10 +1,11 @@
 import type { MessageUpdate } from "./MessageUpdate";
 import type { Timestamps } from "./Timestamps";
 import type { WebSearch } from "./WebSearch";
+import type { v4 } from "uuid";
 
 export type Message = Partial<Timestamps> & {
 	from: "user" | "assistant" | "system";
-	id: ReturnType<typeof crypto.randomUUID>;
+	id: ReturnType<typeof v4>;
 	content: string;
 	updates?: MessageUpdate[];
 	webSearchId?: WebSearch["_id"]; // legacy version

src/lib/types/Message.ts

@@ -1,5 +1,6 @@
 import type { Conversation } from "$lib/types/Conversation";
 import type { Message } from "$lib/types/Message";
+import { v4 } from "uuid";
 
 export function addChildren(
 	conv: Pick<Conversation, "messages" | "rootMessageId">,
@@ -8,7 +9,7 @@ export function addChildren(
 ): Message["id"] {
 	// if this is the first message we just push it
 	if (conv.messages.length === 0) {
-		const messageId = crypto.randomUUID();
+		const messageId = v4();
 		conv.rootMessageId = messageId;
 		conv.messages.push({
 			...message,
@@ -22,7 +23,7 @@ export function addChildren(
 		throw new Error("You need to specify a parentId if this is not the first message");
 	}
 
-	const messageId = crypto.randomUUID();
+	const messageId = v4();
 	if (!conv.rootMessageId) {
 		// if there is no parentId we just push the message
 		if (!!parentId && parentId !== conv.messages[conv.messages.length - 1].id) {

src/lib/utils/tree/addChildren.ts

@@ -1,5 +1,6 @@
 import type { Conversation } from "$lib/types/Conversation";
 import type { Message } from "$lib/types/Message";
+import { v4 } from "uuid";
 
 export function addSibling(
 	conv: Pick<Conversation, "messages" | "rootMessageId">,
@@ -23,7 +24,7 @@ export function addSibling(
 		throw new Error("The sibling message is the root message, therefore we can't add a sibling");
 	}
 
-	const messageId = crypto.randomUUID();
+	const messageId = v4();
 
 	conv.messages.push({
 		...message,

src/lib/utils/tree/addSibling.ts

@@ -1,5 +1,6 @@
 import type { Conversation } from "$lib/types/Conversation";
 import type { Message } from "$lib/types/Message";
+import { v4 } from "uuid";
 
 export function convertLegacyConversation(
 	conv: Pick<Conversation, "messages" | "rootMessageId" | "preprompt">
@@ -12,7 +13,7 @@ export function convertLegacyConversation(
 			content: conv.preprompt ?? "",
 			createdAt: new Date(),
 			updatedAt: new Date(),
-			id: crypto.randomUUID(),
+			id: v4(),
 		} satisfies Message,
 		...conv.messages,
 	];

src/lib/utils/tree/convertLegacyConversation.ts

@@ -1,9 +1,10 @@
 import { describe, expect, it } from "vitest";
 import { isMessageId } from "./isMessageId";
+import { v4 } from "uuid";
 
 describe("isMessageId", () => {
 	it("should return true for a valid message id", () => {
-		expect(isMessageId(crypto.randomUUID())).toBe(true);
+		expect(isMessageId(v4())).toBe(true);
 	});
 	it("should return false for an invalid message id", () => {
 		expect(isMessageId("1-2-3-4")).toBe(false);

src/lib/utils/tree/isMessageId.spec.ts

@@ -7,6 +7,7 @@ import { z } from "zod";
 import type { Message } from "$lib/types/Message";
 import { models, validateModel } from "$lib/server/models";
 import { defaultEmbeddingModel } from "$lib/server/embeddingModels";
+import { v4 } from "uuid";
 
 export const POST: RequestHandler = async ({ locals, request }) => {
 	const body = await request.text();
@@ -24,7 +25,7 @@ export const POST: RequestHandler = async ({ locals, request }) => {
 
 	let messages: Message[] = [
 		{
-			id: crypto.randomUUID(),
+			id: v4(),
 			from: "system",
 			content: values.preprompt ?? "",
 			createdAt: new Date(),

src/routes/conversation/+server.ts

@@ -18,6 +18,7 @@
 	import { addChildren } from "$lib/utils/tree/addChildren";
 	import { addSibling } from "$lib/utils/tree/addSibling";
 	import { createConvTreeStore } from "$lib/stores/convTree";
+	import type { v4 } from "uuid";
 
 	export let data;
 
@@ -72,7 +73,7 @@
 		isContinue = false,
 	}: {
 		prompt?: string;
-		messageId?: ReturnType<typeof crypto.randomUUID>;
+		messageId?: ReturnType<typeof v4>;
 		isRetry?: boolean;
 		isContinue?: boolean;
 	}): Promise<void> {

src/routes/conversation/[id]/+page.svelte

@@ -26,6 +26,6 @@ export default defineConfig({
 		loadTTFAsArrayBuffer(),
 	],
 	optimizeDeps: {
-		include: ["browser-image-resizer"],
+		include: ["browser-image-resizer", "uuid"],
 	},
 });