Merge the shell lane

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx

@@ -12,33 +12,28 @@ import {
 import { X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useMutation } from '@tanstack/react-query'
-import imageCompression from 'browser-image-compression'
 import Image from 'next/image'
 import { Controller, useForm } from 'react-hook-form'
 import { z } from 'zod'
+import { HELP_REQUEST_TYPES } from '@/lib/api/contracts/common'
+import {
+  ACCEPTED_HELP_IMAGE_TYPES,
+  compressHelpImage,
+  DEFAULT_HELP_REQUEST_TYPE,
+  HELP_REQUEST_TYPE_OPTIONS,
+  submitHelpRequest,
+  validateHelpImage,
+} from '@/lib/help/request'
 
 const logger = createLogger('HelpModal')
 
-const MAX_FILE_SIZE = 20 * 1024 * 1024
-const TARGET_SIZE_MB = 2
-const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif']
-
 const SCROLL_DELAY_MS = 100
 const SUCCESS_RESET_DELAY_MS = 2000
 
-const DEFAULT_REQUEST_TYPE = 'bug'
-
-const REQUEST_TYPE_OPTIONS = [
-  { label: 'Bug report', value: 'bug' },
-  { label: 'Feedback', value: 'feedback' },
-  { label: 'Feature request', value: 'feature_request' },
-  { label: 'Other', value: 'other' },
-]
-
 const formSchema = z.object({
   subject: z.string().min(1, 'Subject is required'),
   message: z.string().min(1, 'Message is required'),
-  type: z.enum(['bug', 'feedback', 'feature_request', 'other'], {
+  type: z.enum(HELP_REQUEST_TYPES, {
     error: 'Please select a request type',
   }),
 })
@@ -63,58 +58,6 @@ interface SubmitHelpVariables {
   workspaceId?: string
 }
 
-async function compressImage(file: File): Promise<File> {
-  if (file.size < TARGET_SIZE_MB * 1024 * 1024 || file.type === 'image/gif') {
-    return file
-  }
-
-  try {
-    const compressedFile = await imageCompression(file, {
-      maxSizeMB: TARGET_SIZE_MB,
-      maxWidthOrHeight: 1920,
-      useWebWorker: true,
-      fileType: file.type,
-      initialQuality: 0.8,
-      alwaysKeepResolution: true,
-    })
-
-    return new File([compressedFile], file.name, {
-      type: file.type,
-      lastModified: Date.now(),
-    })
-  } catch (error) {
-    logger.warn('Image compression failed, using original file:', { error })
-    return file
-  }
-}
-
-async function submitHelpRequest({ data, images, workflowId, workspaceId }: SubmitHelpVariables) {
-  const formData = new FormData()
-  formData.append('subject', data.subject)
-  formData.append('message', data.message)
-  formData.append('type', data.type)
-  if (workspaceId) formData.append('workspaceId', workspaceId)
-  formData.append('userAgent', navigator.userAgent)
-  if (workflowId) {
-    formData.append('workflowId', workflowId)
-  }
-
-  images.forEach((image, index) => {
-    formData.append(`image_${index}`, image)
-  })
-
-  // boundary-raw-fetch: multipart/form-data submission with image attachments, requestJson only supports JSON bodies
-  const response = await fetch('/api/help', {
-    method: 'POST',
-    body: formData,
-  })
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => null)
-    throw new Error(errorData?.error || 'Failed to submit help request')
-  }
-}
-
 export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpModalProps) {
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const imagesRef = useRef<ImageWithPreview[]>([])
@@ -128,13 +71,13 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
     defaultValues: {
       subject: '',
       message: '',
-      type: DEFAULT_REQUEST_TYPE,
+      type: DEFAULT_HELP_REQUEST_TYPE,
     },
     mode: 'onSubmit',
   })
 
   const helpMutation = useMutation({
-    mutationFn: submitHelpRequest,
+    mutationFn: (variables: SubmitHelpVariables) => submitHelpRequest(variables),
     onSuccess: (_data, variables) => {
       setSubmitStatus('success')
       reset()
@@ -159,7 +102,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
       reset({
         subject: '',
         message: '',
-        type: DEFAULT_REQUEST_TYPE,
+        type: DEFAULT_HELP_REQUEST_TYPE,
       })
     } else {
       const previewsToRevoke = imagesRef.current
@@ -208,17 +151,12 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
       let hasError = false
 
       for (const file of Array.from(files)) {
-        if (file.size > MAX_FILE_SIZE) {
-          hasError = true
-          continue
-        }
-
-        if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+        if (validateHelpImage(file)) {
           hasError = true
           continue
         }
 
-        const compressedFile = await compressImage(file)
+        const compressedFile = await compressHelpImage(file)
         const imageWithPreview = Object.assign(compressedFile, {
           preview: URL.createObjectURL(compressedFile),
         }) as ImageWithPreview
@@ -265,7 +203,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                 title='Request'
                 value={field.value}
                 onChange={field.onChange}
-                options={REQUEST_TYPE_OPTIONS}
+                options={HELP_REQUEST_TYPE_OPTIONS}
                 placeholder='Select a request type'
                 error={fieldState.error?.message}
               />
@@ -305,7 +243,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
             title='Attach images (optional)'
             label='Drop images here or click to browse'
             description='PNG, JPEG, WebP, GIF (max 20MB each)'
-            accept={ACCEPTED_IMAGE_TYPES.join(',')}
+            accept={ACCEPTED_HELP_IMAGE_TYPES.join(',')}
             multiple
             onChange={processFiles}
           />

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx

@@ -2,7 +2,6 @@
 
 import type { ComponentType } from 'react'
 import { ANONYMOUS_USER_ID } from '@sim/auth/principal'
-import type { DesktopUpdateState } from '@sim/desktop-bridge'
 import {
   Chip,
   chipContentLabelClass,
@@ -32,22 +31,13 @@ import {
   SIDEBAR_RAIL_CHIP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { useUserProfile } from '@/hooks/queries/user-profile'
-import { useDesktopUpdateState } from '@/hooks/use-desktop-update-state'
+import {
+  desktopUpdateActionLabel,
+  hasAvailableDesktopUpdate,
+  useDesktopUpdateState,
+} from '@/hooks/use-desktop-update-state'
 import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 
-function hasAvailableDesktopUpdate(state: DesktopUpdateState): boolean {
-  return state.status === 'available' || state.status === 'downloading' || state.status === 'ready'
-}
-
-function desktopUpdateActionLabel(state: DesktopUpdateState): string {
-  if (state.status === 'downloading') {
-    return state.percent === undefined
-      ? 'Downloading update…'
-      : `Downloading update ${state.percent}%`
-  }
-  return state.status === 'ready' ? 'Restart to update' : 'Update'
-}
-
 /** Compact primary update circle using the same footprint as the surrounding sidebar icons. */
 function DesktopUpdateIcon({ className }: { className?: string }) {
   return (

apps/sim/hooks/use-desktop-update-state.ts

@@ -4,6 +4,19 @@ import { useEffect, useState } from 'react'
 import type { DesktopUpdateState } from '@sim/desktop-bridge'
 import { getDesktopUpdates } from '@/lib/desktop'
 
+export function hasAvailableDesktopUpdate(state: DesktopUpdateState): boolean {
+  return state.status === 'available' || state.status === 'downloading' || state.status === 'ready'
+}
+
+export function desktopUpdateActionLabel(state: DesktopUpdateState): string {
+  if (state.status === 'downloading') {
+    return state.percent === undefined
+      ? 'Downloading update…'
+      : `Downloading update ${state.percent}%`
+  }
+  return state.status === 'ready' ? 'Restart to update' : 'Update'
+}
+
 const INITIAL_UPDATE_STATE: DesktopUpdateState = { status: 'idle' }
 
 export function useDesktopUpdateState(): DesktopUpdateState {

apps/sim/lib/api/contracts/common.ts

@@ -4,14 +4,16 @@ import { defineRouteContract } from '@/lib/api/contracts/types'
 
 const NO_EMAIL_HEADER_CONTROL_CHARS_REGEX = /^[^\r\n\u0000-\u001F\u007F]+$/
 
+export const HELP_REQUEST_TYPES = ['bug', 'feedback', 'feature_request', 'other'] as const
+
 export const helpFormBodySchema = z.object({
   subject: z
     .string()
     .trim()
     .min(1, 'Subject is required')
     .regex(NO_EMAIL_HEADER_CONTROL_CHARS_REGEX, 'Invalid characters'),
   message: z.string().min(1, 'Message is required'),
-  type: z.enum(['bug', 'feedback', 'feature_request', 'other']),
+  type: z.enum(HELP_REQUEST_TYPES),
 })
 export type HelpFormBody = z.input<typeof helpFormBodySchema>
 

apps/sim/lib/help/request.ts

@@ -0,0 +1,96 @@
+import { createLogger } from '@sim/logger'
+import type { HelpFormBody } from '@/lib/api/contracts/common'
+
+const logger = createLogger('HelpRequest')
+
+const MAX_HELP_IMAGE_BYTES = 20 * 1024 * 1024
+const TARGET_SIZE_MB = 2
+export const ACCEPTED_HELP_IMAGE_TYPES = [
+  'image/jpeg',
+  'image/jpg',
+  'image/png',
+  'image/webp',
+  'image/gif',
+]
+
+export const HELP_REQUEST_TYPE_OPTIONS: { label: string; value: HelpFormBody['type'] }[] = [
+  { label: 'Bug report', value: 'bug' },
+  { label: 'Feedback', value: 'feedback' },
+  { label: 'Feature request', value: 'feature_request' },
+  { label: 'Other', value: 'other' },
+]
+
+export const DEFAULT_HELP_REQUEST_TYPE = 'bug'
+
+/** Why `file` cannot be attached to a help request, or null when it can. */
+export function validateHelpImage(file: Pick<File, 'size' | 'type'>): string | null {
+  if (file.size > MAX_HELP_IMAGE_BYTES) return 'Images must be 20MB or smaller.'
+  if (!ACCEPTED_HELP_IMAGE_TYPES.includes(file.type))
+    return 'Attach a JPEG, PNG, WebP or GIF image.'
+  return null
+}
+
+export async function compressHelpImage(file: File): Promise<File> {
+  if (file.size < TARGET_SIZE_MB * 1024 * 1024 || file.type === 'image/gif') {
+    return file
+  }
+
+  try {
+    const { default: imageCompression } = await import('browser-image-compression')
+    const compressedFile = await imageCompression(file, {
+      maxSizeMB: TARGET_SIZE_MB,
+      maxWidthOrHeight: 1920,
+      useWebWorker: true,
+      fileType: file.type,
+      initialQuality: 0.8,
+      alwaysKeepResolution: true,
+    })
+
+    return new File([compressedFile], file.name, {
+      type: file.type,
+      lastModified: Date.now(),
+    })
+  } catch (error) {
+    logger.warn('Image compression failed, using original file:', { error })
+    return file
+  }
+}
+
+interface SubmitHelpRequestInput {
+  data: HelpFormBody
+  images: readonly File[]
+  workflowId?: string
+  workspaceId?: string
+}
+
+export async function submitHelpRequest({
+  data,
+  images,
+  workflowId,
+  workspaceId,
+}: SubmitHelpRequestInput): Promise<void> {
+  const formData = new FormData()
+  formData.append('subject', data.subject)
+  formData.append('message', data.message)
+  formData.append('type', data.type)
+  if (workspaceId) formData.append('workspaceId', workspaceId)
+  formData.append('userAgent', navigator.userAgent)
+  if (workflowId) {
+    formData.append('workflowId', workflowId)
+  }
+
+  images.forEach((image, index) => {
+    formData.append(`image_${index}`, image)
+  })
+
+  // boundary-raw-fetch: multipart/form-data submission with image attachments, requestJson only supports JSON bodies
+  const response = await fetch('/api/help', {
+    method: 'POST',
+    body: formData,
+  })
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null)
+    throw new Error(errorData?.error || 'Failed to submit help request')
+  }
+}

apps/sim/platform/app/(shell)/_components/command-menu/command-menu.tsx

@@ -1,8 +1,8 @@
 import { PLATFORM_DESTINATIONS } from '@/platform/app/(shell)/_components/destinations'
 import type {
+  ShellChat,
   ShellData,
   ShellDestination,
-  ShellItem,
 } from '@/platform/app/(shell)/_components/model'
 import { CommandPalette } from '@/platform/design-system/components/command-palette/command-palette'
 import { OverlayDialog } from '@/platform/design-system/components/modal/overlay-dialog'
@@ -11,7 +11,7 @@ interface CommandMenuProps {
   open: boolean
   onClose: () => void
   navigate: (href: string) => void
-  chats: readonly ShellItem[]
+  chats: readonly ShellChat[]
   workspaces: ShellData['workspaces']
   destinations?: readonly ShellDestination[]
 }
@@ -36,15 +36,15 @@ export function CommandMenu({
             items: workspaces.map((item) => ({
               id: item.id,
               label: item.name,
-              value: '/home',
+              value: item.href ?? '/home',
             })),
           },
           {
             label: 'Chats',
             items: chats.map((item) => ({
               id: item.id,
               label: item.title,
-              value: `/chat/${item.id}`,
+              value: item.href ?? `/chat/${item.id}`,
             })),
           },
         ]}