fix: use generateId() utility for all client-side UUID generation

Comprehensive fix for HTTP deployments (non-secure contexts).

crypto.randomUUID() only works in HTTPS contexts. In HTTP deployments
(e.g., http://192.168.x.x:3000), it throws TypeError causing white screen.

Changes:
- Add shared generateId() utility in lib/utils/uuid.ts with automatic
  fallback: crypto.randomUUID() → getRandomValues → Math.random
- Replace all 38 client-side crypto.randomUUID() calls with generateId()
  across hooks/, stores/, app/chat/, app/workspace/, serializer/, triggers/
- Server-side code (app/api/, lib/auth/, lib/billing/) unchanged -
  Node.js always has crypto.randomUUID() available

Fixes #3393

Author: guoyangzhen

apps/sim/app/chat/[identifier]/chat.tsx

@@ -1,3 +1,4 @@
+import { generateId } from '../../../lib/utils/uuid'
 'use client'
 
 import { type RefObject, useCallback, useEffect, useRef, useState } from 'react'
@@ -303,7 +304,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     setUserHasScrolled(false)
 
     const userMessage: ChatMessage = {
-      id: crypto.randomUUID(),
+      id: generateId(),
       content: messageToSend || (files && files.length > 0 ? `Sent ${files.length} file(s)` : ''),
       type: 'user',
       timestamp: new Date(),
@@ -416,7 +417,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
       logger.error('Error sending message:', error)
       setIsLoading(false)
       const errorMessage: ChatMessage = {
-        id: crypto.randomUUID(),
+        id: generateId(),
         content: CHAT_ERROR_MESSAGES.GENERIC_ERROR,
         type: 'assistant',
         timestamp: new Date(),

apps/sim/app/chat/components/input/input.tsx

@@ -1,3 +1,4 @@
+import { generateId } from '../../../../lib/utils/uuid'
 'use client'
 
 import type React from 'react'
@@ -147,7 +148,7 @@ export const ChatInput: React.FC<{
       }
 
       newFiles.push({
-        id: crypto.randomUUID(),
+        id: generateId(),
         name: file.name,
         size: file.size,
         type: file.type,

apps/sim/app/chat/hooks/use-chat-streaming.ts

@@ -1,3 +1,4 @@
+import { generateId } from '../../../lib/utils/uuid'
 'use client'
 
 import { useRef, useState } from 'react'
@@ -141,7 +142,7 @@ export function useChatStreaming() {
 
     // Track which blocks have streamed content (like chat panel)
     const messageIdMap = new Map<string, string>()
-    const messageId = crypto.randomUUID()
+    const messageId = generateId()
     setMessages((prev) => [
       ...prev,
       {

apps/sim/app/workspace/[workspaceId]/providers/global-commands-provider.tsx

@@ -1,3 +1,4 @@
+import { generateId } from '../../../../lib/utils/uuid'
 'use client'
 
 import {
@@ -87,7 +88,7 @@ export function GlobalCommandsProvider({ children }: { children: ReactNode }) {
   const register = useCallback((commands: GlobalCommand[]) => {
     const createdIds: string[] = []
     for (const cmd of commands) {
-      const id = cmd.id ?? crypto.randomUUID()
+      const id = cmd.id ?? generateId()
       const parsed = parseShortcut(cmd.shortcut)
       registryRef.current.set(id, {
         ...cmd,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx

@@ -1,3 +1,4 @@
+import { generateId } from '../../../../../../../lib/utils/uuid'
 'use client'
 
 import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -601,7 +602,7 @@ export function Chat() {
       if (typeof result !== 'object') return
 
       if ('stream' in result && result.stream instanceof ReadableStream) {
-        const responseMessageId = crypto.randomUUID()
+        const responseMessageId = generateId()
         addMessage({
           id: responseMessageId,
           content: '',
@@ -799,7 +800,7 @@ export function Chat() {
           const defaultType = fieldName === 'files' ? 'file[]' : 'string'
 
           return {
-            id: crypto.randomUUID(),
+            id: generateId(),
             name: fieldName,
             type: defaultType,
             value: '',
@@ -814,7 +815,7 @@ export function Chat() {
 
       const userId = session?.user?.id || 'unknown'
       addToQueue({
-        id: crypto.randomUUID(),
+        id: generateId(),
         operation: {
           operation: 'subblock-update',
           target: 'subblock',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-file-upload.ts

@@ -1,3 +1,4 @@
+import { generateId } from '../../../../../../../../lib/utils/uuid'
 import { useCallback, useState } from 'react'
 
 export interface ChatFile {
@@ -53,7 +54,7 @@ export function useChatFileUpload() {
         }
 
         validNewFiles.push({
-          id: crypto.randomUUID(),
+          id: generateId(),
           name: file.name,
           size: file.size,
           type: file.type,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments.ts

@@ -1,3 +1,4 @@
+import { generateId } from '../../../../../../../../../../../../lib/utils/uuid'
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -123,7 +124,7 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
         }
 
         const tempFile: AttachedFile = {
-          id: crypto.randomUUID(),
+          id: generateId(),
           name: file.name,
           size: file.size,
           type: file.type,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx

@@ -1,3 +1,4 @@
+import { generateId } from '../../../../../../../../../../../../../lib/utils/uuid'
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -155,7 +156,7 @@ export function A2aDeploy({
     // Add input field if missing (for TextPart)
     if (missingFields.input) {
       newFields.push({
-        id: crypto.randomUUID(),
+        id: generateId(),
         name: 'input',
         type: 'string',
         value: '',
@@ -166,7 +167,7 @@ export function A2aDeploy({
     // Add data field if missing (for DataPart)
     if (missingFields.data) {
       newFields.push({
-        id: crypto.randomUUID(),
+        id: generateId(),
         name: 'data',
         type: 'object',
         value: '',
@@ -177,7 +178,7 @@ export function A2aDeploy({
     // Add files field if missing (for FilePart)
     if (missingFields.files) {
       newFields.push({
-        id: crypto.randomUUID(),
+        id: generateId(),
         name: 'files',
         type: 'file[]',
         value: '',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx

@@ -1,3 +1,4 @@
+import { generateId } from '../../../../../../../../../../../../../lib/utils/uuid'
 'use client'
 
 import { useMemo, useRef } from 'react'
@@ -45,7 +46,7 @@ interface DocumentTagEntryProps {
  * Creates a new document tag with default values
  */
 const createDefaultTag = (): DocumentTag => ({
-  id: crypto.randomUUID(),
+  id: generateId(),
   tagName: '',
   fieldType: 'text',
   value: '',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx

@@ -1,3 +1,4 @@
+import { generateId } from '../../../../../../../../../../../../../lib/utils/uuid'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import isEqual from 'lodash/isEqual'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
@@ -276,7 +277,7 @@ export const Dropdown = memo(function Dropdown({
             fieldType === 'object' || fieldType === 'array' ? JSON.stringify(value, null, 2) : value
 
           return {
-            id: crypto.randomUUID(),
+            id: generateId(),
             name: key,
             type: fieldType,
             value: fieldValue,