refactor(types): narrow ChatMessageContext.kind to ChatContextKind un…

…ion and add workflowBorderColor utility
simstudioai · waleedlatif1 · Apr 8, 2026 · Apr 8, 2026 · Apr 8, 2026 · Apr 8, 2026
commit 0ebee18ef68eee617c96c491def48b07f3b9b192
diff --git a/apps/sim/app/(landing)/components/features/components/features-preview.tsx b/apps/sim/app/(landing)/components/features/components/features-preview.tsx
@@ -18,6 +18,7 @@ import {
   xAIIcon,
 } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
+import { workflowBorderColor } from '@/lib/workspaces/colors'
 
 interface FeaturesPreviewProps {
   activeTab: number
@@ -383,7 +384,7 @@ function MiniCardIcon({ variant, color }: { variant: CardVariant; color?: string
           className='h-[7px] w-[7px] flex-shrink-0 rounded-[1.5px] border'
           style={{
             backgroundColor: c,
-            borderColor: `${c}60`,
+            borderColor: workflowBorderColor(c),
             backgroundClip: 'padding-box',
           }}
         />
@@ -470,7 +471,7 @@ function WorkflowCardBody({ color }: { color: string }) {
         className='absolute top-2.5 left-[40px] h-[14px] w-[14px] rounded-[3px] border-[2px]'
         style={{
           backgroundColor: color,
-          borderColor: `${color}60`,
+          borderColor: workflowBorderColor(color),
           backgroundClip: 'padding-box',
         }}
       />
@@ -481,7 +482,7 @@ function WorkflowCardBody({ color }: { color: string }) {
         className='absolute top-[36px] left-[68px] h-[14px] w-[14px] rounded-[3px] border-[2px]'
         style={{
           backgroundColor: color,
-          borderColor: `${color}60`,
+          borderColor: workflowBorderColor(color),
           backgroundClip: 'padding-box',
           opacity: 0.5,
         }}
@@ -896,7 +897,7 @@ function MockLogDetailsSidebar({ selectedRow, onPrev, onNext }: MockLogDetailsSi
                 className='h-[10px] w-[10px] shrink-0 rounded-[3px] border-[1.5px]'
                 style={{
                   backgroundColor: color,
-                  borderColor: `${color}60`,
+                  borderColor: workflowBorderColor(color),
                   backgroundClip: 'padding-box',
                 }}
               />

diff --git a/...ding)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx b/...ding)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx
@@ -5,6 +5,7 @@ import { Download } from 'lucide-react'
 import { ArrowUpDown, Badge, Library, ListFilter, Search } from '@/components/emcn'
 import type { BadgeProps } from '@/components/emcn/components/badge/badge'
 import { cn } from '@/lib/core/utils/cn'
+import { workflowBorderColor } from '@/lib/workspaces/colors'
 
 interface LogRow {
   id: string
@@ -283,7 +284,7 @@ export function LandingPreviewLogs() {
                       className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
                       style={{
                         backgroundColor: log.workflowColor,
-                        borderColor: `${log.workflowColor}60`,
+                        borderColor: workflowBorderColor(log.workflowColor),
                         backgroundClip: 'padding-box',
                       }}
                     />

diff --git a/...components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx b/...components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx
@@ -11,6 +11,7 @@ import {
   Table,
 } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
+import { workflowBorderColor } from '@/lib/workspaces/colors'
 import type { PreviewWorkflow } from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
 
 export type SidebarView =
@@ -211,7 +212,7 @@ export function LandingPreviewSidebar({
                     className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px] border-[2.5px]'
                     style={{
                       backgroundColor: workflow.color,
-                      borderColor: `${workflow.color}60`,
+                      borderColor: workflowBorderColor(workflow.color),
                       backgroundClip: 'padding-box',
                     }}
                   />

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/context-mention-icon.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/context-mention-icon.tsx
@@ -0,0 +1,45 @@
+import { Blimp, Database, Folder as FolderIcon, Table as TableIcon } from '@/components/emcn/icons'
+import { getDocumentIcon } from '@/components/icons/document-icons'
+import { cn } from '@/lib/core/utils/cn'
+import { workflowBorderColor } from '@/lib/workspaces/colors'
+import type { ChatMessageContext } from '@/app/workspace/[workspaceId]/home/types'
+
+interface ContextMentionIconProps {
+  context: ChatMessageContext
+  /** Only used when context.kind is 'workflow' or 'current_workflow'; ignored otherwise. */
+  workflowColor?: string | null
+  /** Applied to every icon element. Include sizing and positional classes (e.g. h-[12px] w-[12px]). */
+  className: string
+}
+
+/** Renders the icon for a context mention chip. Returns null when no icon applies. */
+export function ContextMentionIcon({ context, workflowColor, className }: ContextMentionIconProps) {
+  switch (context.kind) {
+    case 'workflow':
+    case 'current_workflow':
+      return workflowColor ? (
+        <span
+          className={cn('rounded-[3px] border-[2px]', className)}
+          style={{
+            backgroundColor: workflowColor,
+            borderColor: workflowBorderColor(workflowColor),
+            backgroundClip: 'padding-box',
+          }}
+        />
+      ) : null
+    case 'knowledge':
+      return <Database className={className} />
+    case 'table':
+      return <TableIcon className={className} />
+    case 'file': {
+      const FileDocIcon = getDocumentIcon('', context.label)
+      return <FileDocIcon className={className} />
+    }
+    case 'folder':
+      return <FolderIcon className={className} />
+    case 'past_chat':
+      return <Blimp className={className} />
+    default:
+      return null
+  }
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/index.ts
@@ -1,4 +1,5 @@
 export { ChatMessageAttachments } from './chat-message-attachments'
+export { ContextMentionIcon } from './context-mention-icon'
 export {
   assistantMessageHasRenderableContent,
   MessageContent,

diff --git a/...spaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/...spaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -22,6 +22,7 @@ import {
   getFileExtension,
   getMimeTypeFromExtension,
 } from '@/lib/uploads/utils/file-utils'
+import { workflowBorderColor } from '@/lib/workspaces/colors'
 import {
   FileViewer,
   type PreviewMode,
@@ -514,7 +515,7 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
                 className='h-[12px] w-[12px] flex-shrink-0 rounded-[3px] border-[2px]'
                 style={{
                   backgroundColor: w.color,
-                  borderColor: `${w.color}60`,
+                  borderColor: workflowBorderColor(w.color),
                   backgroundClip: 'padding-box',
                 }}
               />

diff --git a/...aceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/...aceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -14,6 +14,7 @@ import {
 import { WorkflowIcon } from '@/components/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import { cn } from '@/lib/core/utils/cn'
+import { workflowBorderColor } from '@/lib/workspaces/colors'
 import type {
   MothershipResource,
   MothershipResourceType,
@@ -50,7 +51,7 @@ function WorkflowTabSquare({ workflowId, className }: { workflowId: string; clas
       className={cn('flex-shrink-0 rounded-[3px] border-[2px]', className)}
       style={{
         backgroundColor: color,
-        borderColor: `${color}60`,
+        borderColor: workflowBorderColor(color),
         backgroundClip: 'padding-box',
       }}
     />
@@ -65,7 +66,7 @@ function WorkflowDropdownItem({ item }: DropdownItemRenderProps) {
         className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
         style={{
           backgroundColor: color,
-          borderColor: `${color}60`,
+          borderColor: workflowBorderColor(color),
           backgroundClip: 'padding-box',
         }}
       />

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -3,12 +3,11 @@
 import type React from 'react'
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'next/navigation'
-import { Blimp, Database, Folder as FolderIcon, Table as TableIcon } from '@/components/emcn/icons'
-import { getDocumentIcon } from '@/components/icons/document-icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import { CHAT_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
+import { ContextMentionIcon } from '@/app/workspace/[workspaceId]/home/components/context-mention-icon'
 import { useAvailableResources } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
 import type {
   PlusMenuHandle,
@@ -672,45 +671,13 @@ export function UserInput({
           : range.token
       const matchingCtx = contexts.find((c) => c.label === mentionLabel)
 
-      let mentionIconNode: React.ReactNode = null
-      if (matchingCtx) {
-        const iconClasses = 'absolute inset-0 m-auto h-[12px] w-[12px] text-[var(--text-icon)]'
-        switch (matchingCtx.kind) {
-          case 'workflow':
-          case 'current_workflow': {
-            const wfId = (matchingCtx as { workflowId: string }).workflowId
-            const wfColor = workflowsById[wfId]?.color ?? '#888'
-            mentionIconNode = (
-              <div
-                className='absolute inset-0 m-auto h-[12px] w-[12px] rounded-[3px] border-[2px]'
-                style={{
-                  backgroundColor: wfColor,
-                  borderColor: `${wfColor}60`,
-                  backgroundClip: 'padding-box',
-                }}
-              />
-            )
-            break
-          }
-          case 'knowledge':
-            mentionIconNode = <Database className={iconClasses} />
-            break
-          case 'table':
-            mentionIconNode = <TableIcon className={iconClasses} />
-            break
-          case 'file': {
-            const FileDocIcon = getDocumentIcon('', mentionLabel)
-            mentionIconNode = <FileDocIcon className={iconClasses} />
-            break
-          }
-          case 'folder':
-            mentionIconNode = <FolderIcon className={iconClasses} />
-            break
-          case 'past_chat':
-            mentionIconNode = <Blimp className={iconClasses} />
-            break
-        }
-      }
+      const mentionIconNode = matchingCtx ? (
+        <ContextMentionIcon
+          context={matchingCtx}
+          workflowColor={workflowsById[matchingCtx.workflowId ?? '']?.color ?? null}
+          className='absolute inset-0 m-auto h-[12px] w-[12px] text-[var(--text-icon)]'
+        />
+      ) : null
 
       elements.push(
         <span

diff --git a/...app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx b/...app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
@@ -2,8 +2,7 @@
 
 import { useMemo } from 'react'
 import { useParams } from 'next/navigation'
-import { Blimp, Database, Folder as FolderIcon, Table as TableIcon } from '@/components/emcn/icons'
-import { getDocumentIcon } from '@/components/icons/document-icons'
+import { ContextMentionIcon } from '@/app/workspace/[workspaceId]/home/components/context-mention-icon'
 import type { ChatMessageContext } from '@/app/workspace/[workspaceId]/home/types'
 import { useWorkflows } from '@/hooks/queries/workflows'
 
@@ -53,45 +52,13 @@ function MentionHighlight({ context }: { context: ChatMessageContext }) {
     return (workflowList ?? []).find((w) => w.id === context.workflowId)?.color ?? null
   }, [workflowList, context.kind, context.workflowId])
 
-  let icon: React.ReactNode = null
-  const iconClasses = 'h-[12px] w-[12px] flex-shrink-0 text-[var(--text-icon)]'
-
-  switch (context.kind) {
-    case 'workflow':
-    case 'current_workflow':
-      icon = workflowColor ? (
-        <span
-          className='inline-block h-[12px] w-[12px] flex-shrink-0 rounded-[3px] border-[2px]'
-          style={{
-            backgroundColor: workflowColor,
-            borderColor: `${workflowColor}60`,
-            backgroundClip: 'padding-box',
-          }}
-        />
-      ) : null
-      break
-    case 'knowledge':
-      icon = <Database className={iconClasses} />
-      break
-    case 'table':
-      icon = <TableIcon className={iconClasses} />
-      break
-    case 'file': {
-      const FileDocIcon = getDocumentIcon('', context.label)
-      icon = <FileDocIcon className={iconClasses} />
-      break
-    }
-    case 'folder':
-      icon = <FolderIcon className={iconClasses} />
-      break
-    case 'past_chat':
-      icon = <Blimp className={iconClasses} />
-      break
-  }
-
   return (
     <span className='inline-flex items-baseline gap-1 rounded-[5px] bg-[var(--surface-5)] px-[5px]'>
-      {icon && <span className='relative top-0.5 flex-shrink-0'>{icon}</span>}
+      <ContextMentionIcon
+        context={context}
+        workflowColor={workflowColor}
+        className='relative top-0.5 h-[12px] w-[12px] flex-shrink-0 text-[var(--text-icon)]'
+      />
       {context.label}
     </span>
   )

diff --git a/apps/sim/app/workspace/[workspaceId]/home/types.ts b/apps/sim/app/workspace/[workspaceId]/home/types.ts
@@ -6,6 +6,9 @@ export type {
   MothershipResourceType,
 } from '@/lib/copilot/resource-types'
 
+/** Union of all valid context kind strings, derived from {@link ChatContext}. */
+export type ChatContextKind = ChatContext['kind']
+
 export interface FileAttachmentForApi {
   id: string
   key: string
@@ -260,7 +263,7 @@ export interface ChatMessageAttachment {
 }
 
 export interface ChatMessageContext {
-  kind: string
+  kind: ChatContextKind
   label: string
   workflowId?: string
   knowledgeId?: string

diff --git a/...pace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx b/...pace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react'
 import { useParams } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
+import { workflowBorderColor } from '@/lib/workspaces/colors'
 import {
   DELETED_WORKFLOW_COLOR,
   DELETED_WORKFLOW_LABEL,
@@ -93,7 +94,7 @@ function WorkflowsListInner({
                       className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
                       style={{
                         backgroundColor: workflowColor,
-                        borderColor: `${workflowColor}60`,
+                        borderColor: workflowBorderColor(workflowColor),
                         backgroundClip: 'padding-box',
                       }}
                     />

diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -20,6 +20,7 @@ import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
 import { cn } from '@/lib/core/utils/cn'
 import { formatDuration } from '@/lib/core/utils/formatting'
 import { filterHiddenOutputKeys } from '@/lib/logs/execution/trace-spans/trace-spans'
+import { workflowBorderColor } from '@/lib/workspaces/colors'
 import {
   ExecutionSnapshot,
   FileCards,
@@ -431,7 +432,7 @@ export const LogDetails = memo(function LogDetails({
                             className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
                             style={{
                               backgroundColor: c,
-                              borderColor: c ? `${c}60` : undefined,
+                              borderColor: c ? workflowBorderColor(c) : undefined,
                               backgroundClip: 'padding-box',
                             }}
                           />

diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
@@ -8,6 +8,7 @@ import { Badge, buttonVariants } from '@/components/emcn'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { cn } from '@/lib/core/utils/cn'
 import { formatDuration } from '@/lib/core/utils/formatting'
+import { workflowBorderColor } from '@/lib/workspaces/colors'
 import {
   DELETED_WORKFLOW_COLOR,
   DELETED_WORKFLOW_LABEL,
@@ -90,7 +91,7 @@ const LogRow = memo(
               className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
               style={{
                 backgroundColor: workflowColor,
-                borderColor: `${workflowColor}60`,
+                borderColor: workflowBorderColor(workflowColor),
                 backgroundClip: 'padding-box',
               }}
             />