fix(chat): align composer controls and source presentation (#8274)

* fix(chat): align composer control shape and color

* fix(chat): align source typography and improve favicon fidelity

* fix(chat): keep source title tokens consistent

* fix(chat): omit referrers from source favicon requests

Author: waleedlatif1

apps/sim/app/o/[organizationId]/home/components/composer/composer.test.tsx

@@ -626,7 +626,7 @@ it('shows Build with a chevron in the shared chip and text-only modes in its men
     mode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
   )
   const search = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')].find(
-    (item) => item.textContent === 'Ask'
+    (item) => item.textContent === 'Search'
   )!
   expect(search.querySelector('svg')).toBeNull()
   expect(document.querySelector('[role="tooltip"]')).toBeNull()
@@ -730,12 +730,12 @@ it.each(['skill', 'file'] as const)(
       mode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
     )
     const search = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')].find(
-      (item) => item.textContent === 'Ask'
+      (item) => item.textContent === 'Search'
     )!
     await act(async () => search.click())
     expect(onModeChange).not.toHaveBeenCalled()
     expect(info).toHaveBeenCalledWith(
-      'Remove resource and skill mentions and non-image attachments before switching to Ask.'
+      'Remove resource and skill mentions and non-image attachments before switching to Search.'
     )
     expect(
       container.querySelector<HTMLInputElement | HTMLTextAreaElement>('[aria-label="Ask Sim"]')!
@@ -787,7 +787,7 @@ describe('Search levels', () => {
     expect(
       row.querySelector<HTMLInputElement | HTMLTextAreaElement>('[aria-label="Ask Sim"]')
     ).not.toBeNull()
-    expect(mode.textContent).toBe('Ask')
+    expect(mode.textContent).toBe('Search')
     expect(mode.querySelectorAll('svg')).toHaveLength(1)
     expect(mode.parentElement?.nextElementSibling).toBeNull()
     expect(row.querySelector('[aria-label="Search level"]')).toBeNull()

apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx

@@ -231,7 +231,7 @@ export function Composer({
                       files.attachedFiles.some((file) => !isAssistantImageType(file.type)))
                   ) {
                     toast.info(
-                      'Remove resource and skill mentions and non-image attachments before switching to Ask.'
+                      'Remove resource and skill mentions and non-image attachments before switching to Search.'
                     )
                     return
                   }

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-card/source-card.tsx

@@ -18,6 +18,7 @@ import {
 import { Check, Link as LinkIcon, MoreHorizontal, Sparkles } from '@sim/emcn/icons'
 import { formatDate } from '@sim/utils/formatting'
 import { findTermMatches, queryTerms } from '@/lib/knowledge/search/snippet'
+import { inter } from '@/app/_styles/fonts/inter/inter'
 import {
   SourceIcon,
   sourceLabel,
@@ -29,7 +30,8 @@ import type { SourceTagData } from '@/app/workspace/[workspaceId]/home/component
 const SOURCE_ROW_CLASSES = cn(
   'not-prose flex items-start gap-2 px-2 py-2 transition-colors focus-within:bg-[var(--surface-hover)]',
   chipHoverSurfaceClass,
-  chipRadiusClass
+  chipRadiusClass,
+  inter.className
 )
 const SOURCE_ROW_MARK_CLASSES = cn(chipIconSlotClass, 'mt-0.5')
 
@@ -140,7 +142,7 @@ export function SourceCard({ source, query, onSummarize, dense = false }: Source
         </a>
         <OverflowText
           label={meta.join(' · ')}
-          className='max-w-[40%] shrink-0 text-[var(--text-muted)] text-caption'
+          className='max-w-[40%] shrink-0 text-[var(--text-tertiary)] text-caption'
         />
         <SourceActions source={source} />
       </div>
@@ -171,7 +173,7 @@ export function SourceCard({ source, query, onSummarize, dense = false }: Source
         <div className='flex min-w-0 flex-col gap-1 pl-6'>
           <OverflowText
             label={meta.join(' · ')}
-            className='text-[var(--text-muted)] text-caption'
+            className='text-[var(--text-tertiary)] text-caption'
           />
           {source.snippet && (
             <p className='text-[var(--text-body)] text-small [overflow-wrap:anywhere]'>

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-chip/source-icon.tsx

@@ -38,8 +38,9 @@ export function SourceIcon({ source, size = 'default' }: SourceIconProps) {
   if (hostname && failedHostname !== hostname) {
     return (
       <img
-        src={faviconUrl(hostname, 32)}
+        src={faviconUrl(hostname, 64)}
         alt=''
+        referrerPolicy='no-referrer'
         className={cn(className, 'rounded-sm')}
         onError={() => setFailedHostname(hostname)}
       />

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/conversation-mode-selector.tsx

@@ -20,7 +20,7 @@ export function ConversationModeSelector({
   const planEnabled = useFeatureFlag('mothership-plan-mode')
   const [open, setOpen] = useState(false)
   const options = [
-    ...(searchEnabled ? [{ value: 'assistant', label: 'Ask' }] : []),
+    ...(searchEnabled ? [{ value: 'assistant', label: 'Search' }] : []),
     { value: 'agent', label: 'Build' },
     ...(planEnabled ? [{ value: 'plan', label: 'Plan' }] : []),
   ]

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/model-setting-trigger.tsx

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react'
-import { Chip, chipContentLabelClass, DropdownMenuTrigger, OverflowText, Tooltip } from '@sim/emcn'
+import { Chip, DropdownMenuTrigger, OverflowText, Tooltip } from '@sim/emcn'
 import { ChevronDown } from '@sim/emcn/icons'
 
 interface ModelSettingTriggerProps {
@@ -21,6 +21,7 @@ export function ModelSettingTrigger({
       <Tooltip.Trigger asChild>
         <DropdownMenuTrigger asChild>
           <Chip
+            shape='round'
             aria-label={label}
             aria-description={valueLabel}
             leftAdornment={
@@ -29,7 +30,7 @@ export function ModelSettingTrigger({
                 <span className='flex @max-[320px]/input-toolbar:hidden min-w-0 items-center gap-2'>
                   <OverflowText
                     label={valueLabel}
-                    className={chipContentLabelClass}
+                    className='text-[var(--text-icon)] text-sm'
                     focusTarget='nearest-interactive'
                   />
                   {showChevron && (