fix(web): use uuid for client-generated ids (#3698)

Author: iscekic

apps/web/src/components/app-builder/AppBuilderChat.tsx

@@ -22,6 +22,7 @@ import React, {
 } from 'react';
 import { User, ArrowDown, ChevronRight, ChevronDown, SquarePen } from 'lucide-react';
 import { format } from 'date-fns';
+import { v4 as uuidv4 } from 'uuid';
 import { TimeAgo } from '@/components/shared/TimeAgo';
 import AssistantLogo from '@/components/AssistantLogo';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
@@ -455,7 +456,7 @@ export function AppBuilderChat({ organizationId }: AppBuilderChatProps) {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
   const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
-  const [messageUuid, setMessageUuid] = useState(() => crypto.randomUUID());
+  const [messageUuid, setMessageUuid] = useState(() => uuidv4());
   const [selectedModel, setSelectedModel] = useState<string>(projectModel ?? '');
   const [hasImages, setHasImages] = useState(false);
   // Track the initial projectModel to detect when a new project loads
@@ -627,7 +628,7 @@ export function AppBuilderChat({ organizationId }: AppBuilderChatProps) {
       }
       manager.sendMessage(value, images, selectedModel || undefined);
       // PromptInput clears itself internally after successful submit
-      setMessageUuid(crypto.randomUUID());
+      setMessageUuid(uuidv4());
     },
     [manager, selectedModel, pendingNewSession, sessions.length]
   );

apps/web/src/components/app-builder/AppBuilderLanding.tsx

@@ -14,6 +14,7 @@
 
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { Clock, FolderOpen, Search, ChevronRight, Trash2, Users, User } from 'lucide-react';
+import { v4 as uuidv4 } from 'uuid';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -527,7 +528,7 @@ export function AppBuilderLanding({ organizationId, onProjectCreated }: AppBuild
   const [hasImages, setHasImages] = useState(false);
   const [isCreatingFromTemplate, setIsCreatingFromTemplate] = useState(false);
   // Generate a stable messageUuid for image uploads - this identifies this initial prompt message
-  const [messageUuid] = useState(() => crypto.randomUUID());
+  const [messageUuid] = useState(() => uuidv4());
   const trpc = useTRPC();
 
   // Fetch eligibility to check if user can use App Builder

apps/web/src/components/cloud-agent-next/CloudChatPage.tsx

@@ -6,6 +6,7 @@ import { useSearchParams } from 'next/navigation';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTRPC } from '@/lib/trpc/utils';
 import { ArrowDown, GitBranch } from 'lucide-react';
+import { v4 as uuidv4 } from 'uuid';
 
 import type { KiloSessionId } from '@/lib/cloud-agent-sdk';
 import { useManager } from './CloudAgentProvider';
@@ -224,7 +225,7 @@ export default function CloudChatPage({ organizationId }: CloudChatPageProps) {
 
   const setSessionConfig = useSetAtom(manager.atoms.sessionConfig);
 
-  const [attachmentMessageUuid] = useState(() => crypto.randomUUID());
+  const [attachmentMessageUuid] = useState(() => uuidv4());
   const [workspaceTabs, setWorkspaceTabs] = useState(createWorkspaceTabsState);
   const [terminalStatuses, setTerminalStatuses] = useState<
     Record<string, TerminalStatusSummary | undefined>
@@ -449,7 +450,7 @@ export default function CloudChatPage({ organizationId }: CloudChatPageProps) {
   }, [setSoundEnabled]);
 
   const handleCreateTerminalTab = useCallback(() => {
-    const terminalId = crypto.randomUUID();
+    const terminalId = uuidv4();
     setWorkspaceTabs(state => addTerminalTab(state, terminalId));
   }, []);
 

apps/web/src/components/cloud-agent-next/NewSessionPanel.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useAtom, useSetAtom } from 'jotai';
 import { toast } from 'sonner';
+import { v4 as uuidv4 } from 'uuid';
 import {
   AlertCircle,
   Brain,
@@ -189,7 +190,7 @@ export function NewSessionPanel({ organizationId, isDevcontainerAvailable }: New
   const [isRepoUserSelected, setIsRepoUserSelected] = useState(false);
   const [showRepositoryRequiredMessage, setShowRepositoryRequiredMessage] = useState(false);
   const [isPreparing, setIsPreparing] = useState(false);
-  const [attachmentMessageUuid, setAttachmentMessageUuid] = useState(() => crypto.randomUUID());
+  const [attachmentMessageUuid, setAttachmentMessageUuid] = useState(() => uuidv4());
 
   // ---------------------------------------------------------------------------
   // GitHub identity awareness
@@ -819,7 +820,7 @@ export function NewSessionPanel({ organizationId, isDevcontainerAvailable }: New
       });
 
       attachmentUpload.clearAttachments();
-      setAttachmentMessageUuid(crypto.randomUUID());
+      setAttachmentMessageUuid(uuidv4());
 
       const basePath = organizationId ? `/organizations/${organizationId}/cloud` : '/cloud';
       router.push(`${basePath}/chat?sessionId=${result.kiloSessionId}`);

apps/web/src/components/cloud-agent/ProfilesListDialog.tsx

@@ -4,6 +4,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { toast } from 'sonner';
+import { v4 as uuidv4 } from 'uuid';
 import {
   FolderCog,
   Star,
@@ -1184,7 +1185,7 @@ type VarsTabProps = {
 type DraftVar = { id: string; key: string; value: string; isSecret: boolean; showValue: boolean };
 
 const makeDraft = (partial?: Partial<DraftVar>): DraftVar => ({
-  id: crypto.randomUUID(),
+  id: uuidv4(),
   key: '',
   value: '',
   isSecret: false,

apps/web/src/hooks/useCloudAgentAttachmentUpload.ts

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { toast } from 'sonner';
+import { v4 as uuidv4 } from 'uuid';
 import { useTRPC } from '@/lib/trpc/utils';
 import {
   CLOUD_AGENT_ATTACHMENT_ALLOWED_TYPES,
@@ -329,7 +330,7 @@ export function useCloudAgentAttachmentUpload(
       const kind = contentType.startsWith('image/') ? ('image' as const) : ('document' as const);
       return [
         {
-          id: crypto.randomUUID(),
+          id: uuidv4(),
           file,
           contentType,
           kind,

apps/web/src/hooks/useImageUpload.ts

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { useTRPC } from '@/lib/trpc/utils';
 import { toast } from 'sonner';
+import { v4 as uuidv4 } from 'uuid';
 import {
   APP_BUILDER_IMAGE_MAX_COUNT,
   APP_BUILDER_IMAGE_MAX_SIZE_BYTES,
@@ -415,7 +416,7 @@ export function useImageUpload(options: UseImageUploadOptions): UseImageUploadRe
       }
 
       const processingImages = filesToAdd.map(file => ({
-        id: crypto.randomUUID(),
+        id: uuidv4(),
         file,
         previewUrl: URL.createObjectURL(file),
         status: 'processing' as const,