{error}
Attach files
Start voice conversation
+
{chatConfig?.description || 'Ask me anything.'}
{children}
+ {codeContent}
{codeContent}
+ {children} ), @@ -120,7 +120,7 @@ const COMPONENTS = { ), - hr: () => , + hr: () => , a: ({ href, children, ...props }: React.AnchorHTMLAttributes) => ( @@ -130,31 +130,29 @@ const COMPONENTS = { table: ({ children }: React.TableHTMLAttributes) => ( - + {children} ), thead: ({ children }: React.HTMLAttributes) => ( - {children} + {children} ), tbody: ({ children }: React.HTMLAttributes) => ( - - {children} - + {children} ), tr: ({ children }: React.HTMLAttributes) => ( - + {children} ), th: ({ children }: React.ThHTMLAttributes) => ( - + {children} ), td: ({ children }: React.TdHTMLAttributes) => ( - + {children} ), @@ -166,7 +164,7 @@ const COMPONENTS = { const MarkdownRenderer = memo(function MarkdownRenderer({ content }: { content: string }) { return ( - + {content.trim()} diff --git a/apps/sim/app/(interfaces)/chat/components/message/message.tsx b/apps/sim/app/(interfaces)/chat/components/message/message.tsx index d57775c1adf..f5ec5b623c8 100644 --- a/apps/sim/app/(interfaces)/chat/components/message/message.tsx +++ b/apps/sim/app/(interfaces)/chat/components/message/message.tsx @@ -1,7 +1,7 @@ 'use client' import { memo, useState } from 'react' -import { Duplicate, Tooltip } from '@sim/emcn' +import { Button, cn, Duplicate, Tooltip } from '@sim/emcn' import { Check, File as FileIcon, FileText, Image as ImageIcon } from 'lucide-react' import { ChatFileDownload, @@ -103,20 +103,12 @@ export const ClientChatMessage = memo( const isImage = attachment.type.startsWith('image/') const getFileIcon = (type: string) => { if (type.includes('pdf')) - return ( - - ) + return if (type.startsWith('image/')) - return ( - - ) + return if (type.includes('text') || type.includes('json')) - return ( - - ) - return ( - - ) + return + return } const formatFileSize = (bytes?: number) => { if (!bytes || bytes === 0) return '' @@ -141,13 +133,13 @@ export const ClientChatMessage = memo( role={isInteractive ? 'button' : undefined} aria-disabled={!isInteractive} tabIndex={isInteractive ? 0 : undefined} - className={`relative overflow-hidden rounded-2xl border border-[var(--border-1)] bg-[var(--landing-bg-elevated)] ${ - isInteractive ? 'cursor-pointer' : '' - } ${ + className={cn( + 'relative overflow-hidden rounded-2xl border border-[var(--border-1)] bg-[var(--surface-2)]', + isInteractive && 'cursor-pointer', isImage - ? 'h-16 w-16 md:h-20 md:w-20' + ? 'size-16 md:size-20' : 'flex h-16 min-w-[140px] max-w-[220px] items-center gap-2 px-3 md:h-20 md:min-w-[160px] md:max-w-[240px]' - }`} + )} onClick={(e) => { if (!isInteractive) return e.preventDefault() @@ -169,19 +161,19 @@ export const ClientChatMessage = memo( ) : ( <> - + {getFileIcon(attachment.type)} - + {attachment.name} {attachment.size && ( - + {formatFileSize(attachment.size)} )} @@ -198,8 +190,8 @@ export const ClientChatMessage = memo( {/* Only render message bubble if there's actual text content (not just file count message) */} {message.content && !String(message.content).startsWith('Sent') && ( - - + + {isJsonObject ? ( {JSON.stringify(message.content, null, 2)} ) : ( @@ -219,7 +211,7 @@ export const ClientChatMessage = memo( {isJsonObject ? ( - + {JSON.stringify(cleanTextContent, null, 2)} ) : ( @@ -240,8 +232,9 @@ export const ClientChatMessage = memo( {!message.isStreaming && ( - { const contentToCopy = typeof cleanTextContent === 'string' @@ -253,11 +246,11 @@ export const ClientChatMessage = memo( }} > {isCopied ? ( - + ) : ( - + )} - + {isCopied ? 'Copied!' : 'Copy to clipboard'} diff --git a/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx b/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx index 00fb29d5e62..eaab45992a2 100644 --- a/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx +++ b/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx @@ -1,11 +1,10 @@ 'use client' import { type RefObject, useCallback, useEffect, useRef, useState } from 'react' -import { cn } from '@sim/emcn' +import { Button, cn } from '@sim/emcn' import { createLogger } from '@sim/logger' import { Mic, MicOff, Phone } from 'lucide-react' import dynamic from 'next/dynamic' -import { Button } from '@/components/ui/button' import { requestJson } from '@/lib/api/client/request' import { speechTokenContract } from '@/lib/api/contracts/media/speech' import { arrayBufferToBase64, floatTo16BitPCM } from '@/lib/speech/audio' @@ -525,7 +524,7 @@ export function VoiceInterface({ return ( @@ -544,40 +543,32 @@ export function VoiceInterface({ {currentTranscript && ( - + {currentTranscript} )} - + {getStatusText()} - {isMuted && ( - (Muted) - )} + {isMuted && (Muted)} - + {getButtonContent()} diff --git a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx index 6b84e95c67d..f148c358fd5 100644 --- a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx +++ b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx @@ -4,8 +4,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { Badge, Button, + ChipInput, + ChipSelect, + ChipTextarea, Code, - Input, + cn, Label, Table, TableBody, @@ -13,21 +16,11 @@ import { TableHead, TableHeader, TableRow, - Textarea, Tooltip, } from '@sim/emcn' import { useQueryClient } from '@tanstack/react-query' import { RefreshCw } from 'lucide-react' import { useRouter } from 'next/navigation' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select' -import { Navbar } from '@/app/(landing)/components/navbar/navbar' -import { useBrandConfig } from '@/ee/whitelabeling' import { type PauseContextDetail, type PausedExecutionDetail, @@ -112,12 +105,12 @@ function getBlockNameFromSnapshot( function renderStructuredValuePreview(value: unknown) { if (value === null || value === undefined) { - return — + return — } if (typeof value === 'object') { return ( - + handleFormFieldChange(field.name, val)} - > - - - - - {!field.required && Not set} - True - False - - + onChange={(val) => handleFormFieldChange(field.name, val)} + placeholder={field.required ? 'Select true or false' : 'Select...'} + options={[ + ...(field.required ? [] : [{ label: 'Not set', value: '__unset__' }]), + { label: 'True', value: 'true' }, + { label: 'False', value: 'false' }, + ]} + /> ) } case 'number': return ( - handleFormFieldChange(field.name, e.target.value)} placeholder={field.placeholder ?? 'Enter a number...'} + error={Boolean(formErrors[field.name])} /> ) case 'array': case 'object': case 'files': return ( - handleFormFieldChange(field.name, e.target.value)} placeholder={field.placeholder ?? (field.type === 'array' ? '[...]' : '{...}')} rows={5} + error={Boolean(formErrors[field.name])} /> ) default: { if (field.rows !== undefined && field.rows > 3) { return ( - <Textarea + <ChipTextarea value={value} onChange={(e) => handleFormFieldChange(field.name, e.target.value)} placeholder={field.placeholder ?? 'Enter value...'} rows={5} + error={Boolean(formErrors[field.name])} /> ) } return ( - <Input + <ChipInput value={value} onChange={(e) => handleFormFieldChange(field.name, e.target.value)} placeholder={field.placeholder ?? 'Enter value...'} + error={Boolean(formErrors[field.name])} /> ) } } }, - [formValues, handleFormFieldChange] + [formValues, formErrors, handleFormFieldChange] ) const renderDisabledFieldInput = useCallback( @@ -404,19 +397,19 @@ export default function ResumeExecutionPage({ switch (field.type) { case 'boolean': { const displayValue = rawValue === true ? 'True' : rawValue === false ? 'False' : 'Not set' - return <Input value={displayValue} disabled /> + return <ChipInput value={displayValue} disabled /> } case 'number': - return <Input type='number' value={value} disabled /> + return <ChipInput type='number' value={value} disabled /> case 'array': case 'object': case 'files': - return <Textarea value={value} disabled rows={5} /> + return <ChipTextarea value={value} viewOnly rows={5} /> default: { if (field.rows !== undefined && field.rows > 3) { - return <Textarea value={value} disabled rows={5} /> + return <ChipTextarea value={value} viewOnly rows={5} /> } - return <Input value={value} disabled /> + return <ChipInput value={value} disabled /> } } }, @@ -676,37 +669,17 @@ export default function ResumeExecutionPage({ if (!executionDetail) { return ( <Tooltip.Provider> - <div className='font-season' style={{ minHeight: '100vh', background: 'var(--bg)' }}> - <header> - <Navbar /> - </header> - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - minHeight: 'calc(100vh - 80px)', - padding: '24px', - }} - > - <div style={{ textAlign: 'center', maxWidth: '400px' }}> - <h1 - style={{ - fontSize: '20px', - fontWeight: 500, - color: 'var(--text-primary)', - marginBottom: '8px', - }} - > - Execution Not Found - </h1> - <p style={{ fontSize: '14px', color: 'var(--text-secondary)', marginBottom: '24px' }}> - This execution could not be located or has already completed. - </p> - <Button variant='outline' onClick={() => router.push('/')}> - Return Home - </Button> - </div> + <div className='flex flex-1 items-center justify-center p-6'> + <div className='max-w-[400px] text-center'> + <h1 className='mb-2 font-medium text-[20px] text-[var(--text-primary)]'> + Execution Not Found + </h1> + <p className='mb-6 text-[14px] text-[var(--text-secondary)]'> + This execution could not be located or has already completed. + </p> + <Button variant='outline' onClick={() => router.push('/')}> + Return Home + </Button> </div> </div> </Tooltip.Provider> @@ -715,439 +688,264 @@ export default function ResumeExecutionPage({ return ( <Tooltip.Provider> - <div className='font-season' style={{ minHeight: '100vh', background: 'var(--bg)' }}> - <header> - <Navbar /> - </header> - <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px 24px' }}> - {/* Header */} - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: '32px', - }} - > - <div> - <h1 style={{ fontSize: '20px', fontWeight: 500, color: 'var(--text-primary)' }}> - Paused Execution - </h1> - <p style={{ fontSize: '14px', color: 'var(--text-secondary)', marginTop: '4px' }}> - Select a pause point to review and resume - </p> - </div> - <Tooltip.Root> - <Tooltip.Trigger asChild> - <Button - variant='outline' - size='sm' - onClick={handleRefreshExecution} - disabled={refreshingExecution} - className='gap-1.5 px-2.5' - aria-label='Refresh execution details' - > - <RefreshCw - style={{ - width: '14px', - height: '14px', - animation: refreshingExecution ? 'spin 1s linear infinite' : undefined, - }} - /> - Refresh - </Button> - </Tooltip.Trigger> - <Tooltip.Content>Refresh</Tooltip.Content> - </Tooltip.Root> + <div className='mx-auto w-full max-w-[1200px] px-6 py-8'> + {/* Header */} + <div className='mb-8 flex items-center justify-between'> + <div> + <h1 className='font-medium text-[20px] text-[var(--text-primary)]'>Paused Execution</h1> + <p className='mt-1 text-[14px] text-[var(--text-secondary)]'> + Select a pause point to review and resume + </p> </div> + <Tooltip.Root> + <Tooltip.Trigger asChild> + <Button + variant='outline' + size='sm' + onClick={handleRefreshExecution} + disabled={refreshingExecution} + className='gap-1.5 px-2.5' + aria-label='Refresh execution details' + > + <RefreshCw className={cn('size-[14px]', refreshingExecution && 'animate-spin')} /> + Refresh + </Button> + </Tooltip.Trigger> + <Tooltip.Content>Refresh</Tooltip.Content> + </Tooltip.Root> + </div> - {/* Main Layout */} - <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: '24px' }}> - {/* Pause Points List */} - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}> - <Label>Pause Points</Label> - </div> - <div> - {pausePoints.length === 0 ? ( - <div - style={{ - padding: '32px 16px', - textAlign: 'center', - color: 'var(--text-secondary)', - fontSize: '13px', - }} - > - No pause points - </div> - ) : ( - pausePoints.map((pause) => ( - <Button - key={pause.contextId} - variant={pause.contextId === selectedContextId ? 'active' : 'ghost'} - onClick={() => { - setSelectedContextId(pause.contextId) - setError(null) - setMessage(null) - }} - style={{ - width: '100%', - justifyContent: 'space-between', - borderRadius: 0, - padding: '12px 16px', - }} - > - <span style={{ fontSize: '13px' }}>{getBlockName(pause)}</span> - <StatusBadge status={pause.resumeStatus} /> - </Button> - )) - )} - </div> + {/* Main Layout */} + <div className='grid grid-cols-[280px_1fr] gap-6'> + {/* Pause Points List */} + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Pause Points</Label> </div> - - {/* Detail Panel */} <div> - {loadingDetail && !selectedDetail ? ( - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: '200px', - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - }} - > - <span style={{ color: 'var(--text-secondary)', fontSize: '13px' }}>Loading…</span> - </div> - ) : !selectedContextId ? ( - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: '200px', - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - }} - > - <span style={{ color: 'var(--text-secondary)', fontSize: '13px' }}> - Select a pause point - </span> - </div> - ) : !selectedDetail ? ( - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: '200px', - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - }} - > - <span style={{ color: 'var(--text-secondary)', fontSize: '13px' }}> - Could not load details - </span> + {pausePoints.length === 0 ? ( + <div className='px-4 py-8 text-center text-[13px] text-[var(--text-secondary)]'> + No pause points </div> ) : ( - <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}> - {/* Status Header */} - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - padding: '12px 16px', + pausePoints.map((pause) => ( + <Button + key={pause.contextId} + variant={pause.contextId === selectedContextId ? 'active' : 'ghost'} + onClick={() => { + setSelectedContextId(pause.contextId) + setError(null) + setMessage(null) }} + className='w-full justify-between rounded-none px-4 py-3' > - <div> - <Label>{getBlockName(selectedDetail.pausePoint)}</Label> - <p style={{ fontSize: '12px', color: 'var(--text-muted)', marginTop: '2px' }}> - Paused at {formatDate(selectedDetail.pausePoint.registeredAt)} - </p> + <span className='text-[13px]'>{getBlockName(pause)}</span> + <StatusBadge status={pause.resumeStatus} /> + </Button> + )) + )} + </div> + </div> + + {/* Detail Panel */} + <div> + {loadingDetail && !selectedDetail ? ( + <div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <span className='text-[13px] text-[var(--text-secondary)]'>Loading…</span> + </div> + ) : !selectedContextId ? ( + <div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <span className='text-[13px] text-[var(--text-secondary)]'> + Select a pause point + </span> + </div> + ) : !selectedDetail ? ( + <div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <span className='text-[13px] text-[var(--text-secondary)]'> + Could not load details + </span> + </div> + ) : ( + <div className='flex flex-col gap-4'> + {/* Status Header */} + <div className='flex items-center justify-between rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'> + <div> + <Label>{getBlockName(selectedDetail.pausePoint)}</Label> + <p className='mt-[2px] text-[12px] text-[var(--text-muted)]'> + Paused at {formatDate(selectedDetail.pausePoint.registeredAt)} + </p> + </div> + <div className='flex items-center gap-2'> + <StatusBadge status={selectedStatus} /> + {queuePosition && queuePosition > 0 && ( + <Badge variant='gray' size='sm'> + Queue #{queuePosition} + </Badge> + )} + </div> + </div> + + {/* Already resolved - show form fields with submitted values */} + {selectedStatus === 'resumed' || selectedStatus === 'failed' ? ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Resume Form</Label> </div> - <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}> - <StatusBadge status={selectedStatus} /> - {queuePosition && queuePosition > 0 && ( - <Badge variant='gray' size='sm'> - Queue #{queuePosition} - </Badge> + <div className='flex flex-col gap-4 p-4'> + {selectedStatus === 'failed' && + selectedDetail.pausePoint.latestResumeEntry?.failureReason && ( + <Badge variant='red' size='sm'> + {selectedDetail.pausePoint.latestResumeEntry.failureReason} + </Badge> + )} + {inputFormatFields.length > 0 && + selectedDetail.pausePoint.latestResumeEntry?.resumeInput ? ( + inputFormatFields.map((field) => ( + <div key={field.id} className='flex flex-col gap-[9px]'> + <Label>{field.label}</Label> + {field.description && ( + <p className='text-[12px] text-[var(--text-muted)]'> + {field.description} + </p> + )} + {renderDisabledFieldInput( + field, + selectedDetail.pausePoint.latestResumeEntry?.resumeInput + ?.submission ?? + selectedDetail.pausePoint.latestResumeEntry?.resumeInput ?? + {} + )} + </div> + )) + ) : selectedDetail.pausePoint.latestResumeEntry?.resumeInput ? ( + <ChipTextarea + value={JSON.stringify( + selectedDetail.pausePoint.latestResumeEntry.resumeInput, + null, + 2 + )} + viewOnly + rows={6} + /> + ) : ( + <p className='text-[13px] text-[var(--text-muted)]'> + No input data provided + </p> )} </div> </div> - - {/* Already resolved - show form fields with submitted values */} - {selectedStatus === 'resumed' || selectedStatus === 'failed' ? ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }} - > - <Label>Resume Form</Label> + ) : ( + <> + {/* Display Data */} + {responseStructureRows.length > 0 ? ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Display Data</Label> + </div> + <div className='p-4'> + <Table> + <TableHeader> + <TableRow> + <TableHead>Field</TableHead> + <TableHead>Type</TableHead> + <TableHead>Value</TableHead> + </TableRow> + </TableHeader> + <TableBody> + {responseStructureRows.map((row) => ( + <TableRow key={row.id}> + <TableCell>{row.name}</TableCell> + <TableCell>{row.type}</TableCell> + <TableCell>{renderStructuredValuePreview(row.value)}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </div> </div> - <div - style={{ - padding: '16px', - display: 'flex', - flexDirection: 'column', - gap: '16px', - }} - > - {selectedStatus === 'failed' && - selectedDetail.pausePoint.latestResumeEntry?.failureReason && ( - <Badge variant='red' size='sm'> - {selectedDetail.pausePoint.latestResumeEntry.failureReason} - </Badge> - )} - {inputFormatFields.length > 0 && - selectedDetail.pausePoint.latestResumeEntry?.resumeInput ? ( - inputFormatFields.map((field) => ( - <div - key={field.id} - style={{ display: 'flex', flexDirection: 'column', gap: '6px' }} - > - <Label>{field.label}</Label> + ) : ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Display Data</Label> + </div> + <div className='p-4'> + <p className='text-[13px] text-[var(--text-muted)]'> + No display data configured + </p> + </div> + </div> + )} + + {/* Resume Form */} + {isHumanMode && hasInputFormat ? ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Resume Form</Label> + </div> + <div className='flex flex-col gap-4 p-4'> + {inputFormatFields.map((field) => ( + <div key={field.id} className='flex flex-col gap-[9px]'> + <Label> + {field.label} + {field.required && ( + <span className='ml-1 text-[var(--text-error)]'>*</span> + )} + </Label> {field.description && ( - <p style={{ fontSize: '12px', color: 'var(--text-muted)' }}> + <p className='text-[12px] text-[var(--text-muted)]'> {field.description} </p> )} - {renderDisabledFieldInput( - field, - selectedDetail.pausePoint.latestResumeEntry?.resumeInput - ?.submission ?? - selectedDetail.pausePoint.latestResumeEntry?.resumeInput ?? - {} + {renderFieldInput(field)} + {formErrors[field.name] && ( + <Badge variant='red' size='sm'> + {formErrors[field.name]} + </Badge> )} </div> - )) - ) : selectedDetail.pausePoint.latestResumeEntry?.resumeInput ? ( - <Textarea - value={JSON.stringify( - selectedDetail.pausePoint.latestResumeEntry.resumeInput, - null, - 2 - )} - disabled - rows={6} - /> - ) : ( - <p style={{ fontSize: '13px', color: 'var(--text-muted)' }}> - No input data provided - </p> - )} - </div> - </div> - ) : ( - <> - {/* Display Data */} - {responseStructureRows.length > 0 ? ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ - padding: '12px 16px', - borderBottom: '1px solid var(--border)', - }} - > - <Label>Display Data</Label> - </div> - <div style={{ padding: '16px' }}> - <Table> - <TableHeader> - <TableRow> - <TableHead>Field</TableHead> - <TableHead>Type</TableHead> - <TableHead>Value</TableHead> - </TableRow> - </TableHeader> - <TableBody> - {responseStructureRows.map((row) => ( - <TableRow key={row.id}> - <TableCell>{row.name}</TableCell> - <TableCell>{row.type}</TableCell> - <TableCell>{renderStructuredValuePreview(row.value)}</TableCell> - </TableRow> - ))} - </TableBody> - </Table> - </div> - </div> - ) : ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ - padding: '12px 16px', - borderBottom: '1px solid var(--border)', - }} - > - <Label>Display Data</Label> - </div> - <div style={{ padding: '16px' }}> - <p style={{ fontSize: '13px', color: 'var(--text-muted)' }}> - No display data configured - </p> - </div> + ))} </div> - )} - - {/* Resume Form */} - {isHumanMode && hasInputFormat ? ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ - padding: '12px 16px', - borderBottom: '1px solid var(--border)', - }} - > - <Label>Resume Form</Label> - </div> - <div - style={{ - padding: '16px', - display: 'flex', - flexDirection: 'column', - gap: '16px', - }} - > - {inputFormatFields.map((field) => ( - <div - key={field.id} - style={{ display: 'flex', flexDirection: 'column', gap: '6px' }} - > - <Label> - {field.label} - {field.required && ( - <span style={{ color: 'var(--text-error)', marginLeft: '4px' }}> - * - </span> - )} - </Label> - {field.description && ( - <p style={{ fontSize: '12px', color: 'var(--text-muted)' }}> - {field.description} - </p> - )} - {renderFieldInput(field)} - {formErrors[field.name] && ( - <Badge variant='red' size='sm'> - {formErrors[field.name]} - </Badge> - )} - </div> - ))} - </div> + </div> + ) : ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Resume Input (JSON)</Label> </div> - ) : ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ - padding: '12px 16px', - borderBottom: '1px solid var(--border)', - }} - > - <Label>Resume Input (JSON)</Label> - </div> - <div style={{ padding: '16px' }}> - <Textarea - value={resumeInput} - onChange={(e) => { - setResumeInput(e.target.value) - if (selectedContextId) { - resumeInputsRef.current = { - ...resumeInputsRef.current, - [selectedContextId]: e.target.value, - } + <div className='p-4'> + <ChipTextarea + value={resumeInput} + onChange={(e) => { + setResumeInput(e.target.value) + if (selectedContextId) { + resumeInputsRef.current = { + ...resumeInputsRef.current, + [selectedContextId]: e.target.value, } - }} - placeholder='{"example": "value"}' - rows={6} - spellCheck={false} - className='min-h-[180px] border-[var(--border-1)] bg-[var(--surface-3)] font-mono text-[12px] leading-5' - /> - </div> + } + }} + placeholder='{"example": "value"}' + rows={6} + spellCheck={false} + className='min-h-[180px] font-mono' + /> </div> - )} + </div> + )} - {/* Messages */} - {error && <Badge variant='red'>{error}</Badge>} - {message && <Badge variant='green'>{message}</Badge>} + {/* Messages */} + {error && <Badge variant='red'>{error}</Badge>} + {message && <Badge variant='green'>{message}</Badge>} - {/* Action */} - <Button variant='primary' onClick={handleResume} disabled={resumeDisabled}> - {loadingAction ? 'Resuming...' : 'Resume Execution'} - </Button> - </> - )} - </div> - )} - </div> + {/* Action */} + <Button variant='primary' onClick={handleResume} disabled={resumeDisabled}> + {loadingAction ? 'Resuming...' : 'Resume Execution'} + </Button> + </> + )} + </div> + )} </div> </div> - - {/* Footer */} - <div - style={{ - maxWidth: '1200px', - margin: '24px auto 0', - padding: '0 24px 24px', - textAlign: 'center', - fontSize: '13px', - color: 'var(--text-muted)', - }} - > - Need help?{' '} - <a href={`mailto:${brandConfig.supportEmail}`} style={{ color: 'var(--text-secondary)' }}> - Contact support - </a> - </div> </div> </Tooltip.Provider> ) diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx index 955f5067525..83a6d802e31 100644 --- a/apps/sim/app/_shell/providers/theme-provider.tsx +++ b/apps/sim/app/_shell/providers/theme-provider.tsx @@ -22,7 +22,9 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) { pathname.startsWith('/chat') || pathname.startsWith('/blog') || pathname.startsWith('/resume') || - pathname.startsWith('/oauth') + pathname.startsWith('/oauth') || + pathname.startsWith('/f/') || + pathname.startsWith('/unsubscribe') const isDarkModePage = pathname.startsWith('/academy') diff --git a/apps/sim/app/f/[token]/public-file-auth-shell.tsx b/apps/sim/app/f/[token]/public-file-auth-shell.tsx index 3e9c00e042e..bc4e18c3f9d 100644 --- a/apps/sim/app/f/[token]/public-file-auth-shell.tsx +++ b/apps/sim/app/f/[token]/public-file-auth-shell.tsx @@ -1,7 +1,6 @@ import type { ReactNode } from 'react' -import AuthBackground from '@/app/(auth)/components/auth-background' import { SupportFooter } from '@/app/(auth)/components/support-footer' -import { Navbar } from '@/app/(landing)/components/navbar/navbar' +import { LogoShell } from '@/app/(landing)/components' interface PublicFileAuthShellProps { title: string @@ -10,34 +9,24 @@ interface PublicFileAuthShellProps { } /** - * Landing-chrome shell shared by the public file-share auth gates (password, + * Light, logo-only shell shared by the public file-share auth gates (password, * email OTP, SSO), matching the deployed-chat auth screens. Renders no file * metadata — the name/provenance are withheld until the visitor authenticates. */ export function PublicFileAuthShell({ title, subtitle, children }: PublicFileAuthShellProps) { return ( - <AuthBackground className='dark font-[430] font-season'> - <main className='relative flex min-h-full flex-col text-[var(--landing-text)]'> - <header className='shrink-0 bg-[var(--landing-bg)]'> - <Navbar logoOnly /> - </header> - <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'> - <div className='w-full max-w-lg px-4'> - <div className='flex flex-col items-center justify-center'> - <div className='space-y-1 text-center'> - <h1 className='text-balance font-[430] font-season text-[40px] text-[var(--landing-text)] leading-[110%] tracking-[-0.02em]'> - {title} - </h1> - <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'> - {subtitle} - </p> - </div> - <div className='mt-8 w-full max-w-[410px]'>{children}</div> - </div> - </div> + <LogoShell center footer={<SupportFooter position='absolute' />}> + <div className='flex w-full max-w-lg flex-col items-center justify-center px-4'> + <div className='space-y-1 text-center'> + <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'> + {title} + </h1> + <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'> + {subtitle} + </p> </div> - <SupportFooter position='absolute' /> - </main> - </AuthBackground> + <div className='mt-8 w-full max-w-[410px]'>{children}</div> + </div> + </LogoShell> ) } diff --git a/apps/sim/app/f/[token]/public-file-auth.tsx b/apps/sim/app/f/[token]/public-file-auth.tsx index cc665e3758f..005f8606248 100644 --- a/apps/sim/app/f/[token]/public-file-auth.tsx +++ b/apps/sim/app/f/[token]/public-file-auth.tsx @@ -1,11 +1,11 @@ 'use client' import { useState } from 'react' -import { cn, Input, Label, Loader } from '@sim/emcn' +import { cn, Input, Label } from '@sim/emcn' import { getErrorMessage } from '@sim/utils/errors' import { Eye, EyeOff } from 'lucide-react' import { useRouter } from 'next/navigation' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell' import { usePublicFileAuth } from '@/hooks/queries/public-shares' @@ -72,7 +72,7 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) { <button type='button' onClick={() => setShowPassword(!showPassword)} - className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--landing-text-muted)] hover:text-[var(--landing-text)]' + className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover:text-[var(--text-primary)]' aria-label={showPassword ? 'Hide password' : 'Show password'} > {showPassword ? <EyeOff size={18} /> : <Eye size={18} />} @@ -81,20 +81,13 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) { {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null} </div> - <button - type='submit' - disabled={!password.trim() || authenticate.isPending} - className={AUTH_SUBMIT_BTN} + <AuthSubmitButton + disabled={!password.trim()} + loading={authenticate.isPending} + loadingLabel='Authenticating…' > - {authenticate.isPending ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Authenticating… - </span> - ) : ( - 'Continue' - )} - </button> + Continue + </AuthSubmitButton> </form> </PublicFileAuthShell> ) diff --git a/apps/sim/app/f/[token]/public-file-email-auth.tsx b/apps/sim/app/f/[token]/public-file-email-auth.tsx index f6b01a6b7f5..beac8429fb7 100644 --- a/apps/sim/app/f/[token]/public-file-email-auth.tsx +++ b/apps/sim/app/f/[token]/public-file-email-auth.tsx @@ -1,11 +1,12 @@ 'use client' import { useEffect, useState } from 'react' -import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Loader } from '@sim/emcn' +import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn' import { getErrorMessage } from '@sim/utils/errors' import { useRouter } from 'next/navigation' import { quickValidateEmail } from '@/lib/messaging/email/validation' -import { AUTH_SUBMIT_BTN, AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' +import { AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes' import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell' import { usePublicFileOtpRequest, usePublicFileOtpVerify } from '@/hooks/queries/public-shares' @@ -107,20 +108,13 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null} </div> - <button - type='submit' - disabled={!email.trim() || requestOtp.isPending} - className={AUTH_SUBMIT_BTN} + <AuthSubmitButton + disabled={!email.trim()} + loading={requestOtp.isPending} + loadingLabel='Sending Code…' > - {requestOtp.isPending ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Sending Code… - </span> - ) : ( - 'Continue' - )} - </button> + Continue + </AuthSubmitButton> </form> </PublicFileAuthShell> ) @@ -132,7 +126,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { subtitle={`A verification code has been sent to ${email}`} > <div className='space-y-6'> - <p className='text-center text-[var(--landing-text-muted)] text-sm'> + <p className='text-center text-[var(--text-muted)] text-sm'> Enter the 6-digit code to verify your access. If you don't see it in your inbox, check your spam folder. </p> @@ -163,28 +157,23 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { {error ? <p className='text-center text-[var(--text-error)] text-xs'>{error}</p> : null} - <button + <AuthSubmitButton + type='button' onClick={() => verifyCode(otp)} - disabled={otp.length !== 6 || verifyOtp.isPending} - className={AUTH_SUBMIT_BTN} + disabled={otp.length !== 6} + loading={verifyOtp.isPending} + loadingLabel='Verifying…' > - {verifyOtp.isPending ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Verifying… - </span> - ) : ( - 'Verify Email' - )} - </button> + Verify Email + </AuthSubmitButton> <div className='text-center'> - <p className='text-[var(--landing-text-muted)] text-sm'> + <p className='text-[var(--text-muted)] text-sm'> Didn't receive a code?{' '} {countdown > 0 ? ( <span> Resend in{' '} - <span className='font-medium text-[var(--landing-text)]'>{countdown}s</span> + <span className='font-medium text-[var(--text-primary)]'>{countdown}s</span> </span> ) : ( <button diff --git a/apps/sim/app/f/[token]/public-file-sso-auth.tsx b/apps/sim/app/f/[token]/public-file-sso-auth.tsx index a5f09fc9170..5ed4a410da0 100644 --- a/apps/sim/app/f/[token]/public-file-sso-auth.tsx +++ b/apps/sim/app/f/[token]/public-file-sso-auth.tsx @@ -1,13 +1,13 @@ 'use client' import { useState } from 'react' -import { cn, Input, Label, Loader } from '@sim/emcn' +import { cn, Input, Label } from '@sim/emcn' import { getErrorMessage } from '@sim/utils/errors' import { useRouter } from 'next/navigation' import { requestJson } from '@/lib/api/client/request' import { publicFileSSOContract } from '@/lib/api/contracts/public-shares' import { quickValidateEmail } from '@/lib/messaging/email/validation' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell' interface PublicFileSSOAuthProps { @@ -86,16 +86,13 @@ export function PublicFileSSOAuth({ token }: PublicFileSSOAuthProps) { {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null} </div> - <button type='submit' disabled={!email.trim() || isLoading} className={AUTH_SUBMIT_BTN}> - {isLoading ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Redirecting to SSO… - </span> - ) : ( - 'Continue with SSO' - )} - </button> + <AuthSubmitButton + disabled={!email.trim()} + loading={isLoading} + loadingLabel='Redirecting to SSO…' + > + Continue with SSO + </AuthSubmitButton> </form> </PublicFileAuthShell> ) diff --git a/apps/sim/app/f/[token]/public-file-view.tsx b/apps/sim/app/f/[token]/public-file-view.tsx index 3f61b66e3f9..5d1db37b68e 100644 --- a/apps/sim/app/f/[token]/public-file-view.tsx +++ b/apps/sim/app/f/[token]/public-file-view.tsx @@ -3,9 +3,9 @@ import { useMemo } from 'react' import { Chip } from '@sim/emcn' import { Download } from '@sim/emcn/icons' -import Image from 'next/image' import Link from 'next/link' import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace' +import { SimWordmark } from '@/app/(landing)/components/navbar/components' import { buildProvenance } from '@/app/f/[token]/utils' import { FileViewer } from '@/app/workspace/[workspaceId]/files/components/file-viewer' import { useBrandConfig } from '@/ee/whitelabeling' @@ -65,7 +65,7 @@ export function PublicFileView({ ) return ( - <div className='flex min-h-screen flex-col bg-[var(--bg)]'> + <div className='light flex min-h-screen flex-col bg-[var(--bg)]'> <header className='sticky top-0 z-10 flex items-center justify-between gap-4 border-[var(--border)] border-b bg-[var(--bg)] px-4 py-3'> <div className='flex min-w-0 items-center gap-3'> {!brand.logoUrl && ( @@ -75,24 +75,9 @@ export function PublicFileView({ target='_blank' rel='noopener noreferrer' aria-label='Sim home' - className='shrink-0' + className='flex shrink-0 items-center' > - <Image - src='/logo/wordmark-dark.svg' - alt='Sim' - width={71} - height={22} - className='h-[22px] w-auto dark:hidden' - priority - /> - <Image - src='/logo/sim-landing.svg' - alt='Sim' - width={71} - height={22} - className='hidden h-[22px] w-auto dark:block' - priority - /> + <SimWordmark /> </Link> <div className='h-5 w-px shrink-0 bg-[var(--border)]' /> </> diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx index b067c0716e6..67ec787d8ce 100644 --- a/apps/sim/app/invite/components/status-card.tsx +++ b/apps/sim/app/invite/components/status-card.tsx @@ -1,7 +1,8 @@ 'use client' -import { cn, Loader } from '@sim/emcn' +import { Chip, cn, Loader } from '@sim/emcn' import { useRouter } from 'next/navigation' -import { AUTH_PRIMARY_CTA_BASE } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' +import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants' interface InviteStatusCardProps { type: 'login' | 'loading' | 'error' | 'success' | 'invitation' | 'warning' @@ -33,13 +34,13 @@ export function InviteStatusCard({ return ( <> <div className='space-y-1 text-center'> - <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'> + <h1 className='font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'> Loading </h1> - <p className='font-[380] text-[var(--landing-text-muted)] text-md'>{description}</p> + <p className='font-[380] text-[var(--text-muted)]'>{description}</p> </div> <div className='mt-8 flex w-full items-center justify-center py-8'> - <Loader className='size-8 text-[var(--landing-text-muted)]' animate /> + <Loader className='size-8 text-[var(--text-muted)]' animate /> </div> </> ) @@ -48,40 +49,51 @@ export function InviteStatusCard({ return ( <> <div className='space-y-1 text-center'> - <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'> + <h1 className='font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'> {title} </h1> - <p className='font-[380] text-[var(--landing-text-muted)] text-md'>{description}</p> + <p className='font-[380] text-[var(--text-muted)]'>{description}</p> </div> <div className='mt-8 w-full max-w-[410px] space-y-3'> {isExpiredError && ( - <button onClick={() => router.push('/')} className={`${AUTH_PRIMARY_CTA_BASE} w-full`}> + <AuthSubmitButton type='button' onClick={() => router.push('/')} loadingLabel=''> Request New Invitation - </button> + </AuthSubmitButton> )} - {actions.map((action, index) => ( - <button - key={action.label} - onClick={action.onClick} - disabled={action.disabled || action.loading} - className={cn( - `${AUTH_PRIMARY_CTA_BASE} w-full`, - index !== 0 && - 'border-[var(--landing-border-strong)] bg-transparent text-[var(--landing-text)] hover:border-[var(--landing-border-strong)] hover:bg-[var(--landing-bg-elevated)] hover:text-[var(--landing-text)]' - )} - > - {action.loading ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - {action.label}... - </span> - ) : ( - action.label - )} - </button> - ))} + {actions.map((action, index) => + index === 0 ? ( + <AuthSubmitButton + key={action.label} + type='button' + onClick={action.onClick} + disabled={action.disabled} + loading={action.loading} + loadingLabel={`${action.label}...`} + > + {action.label} + </AuthSubmitButton> + ) : ( + <Chip + key={action.label} + fullWidth + flush + onClick={action.onClick} + disabled={action.disabled || action.loading} + className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} + > + {action.loading ? ( + <span className='flex items-center gap-2'> + <Loader className='size-4' animate /> + {action.label}... + </span> + ) : ( + action.label + )} + </Chip> + ) + )} </div> </> ) diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx index 1ace40a9b74..605f45a1943 100644 --- a/apps/sim/app/unsubscribe/unsubscribe.tsx +++ b/apps/sim/app/unsubscribe/unsubscribe.tsx @@ -1,11 +1,12 @@ 'use client' import { Suspense } from 'react' -import { Loader } from '@sim/emcn' +import { Chip, cn, Loader } from '@sim/emcn' import { getErrorMessage } from '@sim/utils/errors' import { useSearchParams } from 'next/navigation' import type { UnsubscribeType } from '@/lib/api/contracts/user' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' +import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants' import { InviteLayout } from '@/app/invite/components' import { useUnsubscribe, useUnsubscribeMutation } from '@/hooks/queries/unsubscribe' @@ -39,15 +40,15 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Loading </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> Validating your unsubscribe link… </p> </div> <div className={'mt-8 flex w-full items-center justify-center py-8'}> - <Loader className='size-8 text-[var(--landing-text-muted)]' animate /> + <Loader className='size-8 text-[var(--text-muted)]' animate /> </div> </InviteLayout> ) @@ -57,16 +58,16 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Invalid Unsubscribe Link </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}>{error}</p> + <p className={'font-[380] text-[var(--text-muted)] text-md'}>{error}</p> </div> <div className={'mt-8 w-full max-w-[410px] space-y-3'}> - <button onClick={() => window.history.back()} className={AUTH_SUBMIT_BTN}> + <AuthSubmitButton type='button' onClick={() => window.history.back()} loadingLabel=''> Go Back - </button> + </AuthSubmitButton> </div> </InviteLayout> ) @@ -76,19 +77,19 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Important Account Emails </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> Transactional emails like password resets, account confirmations, and security alerts cannot be unsubscribed from as they contain essential information for your account. </p> </div> <div className={'mt-8 w-full max-w-[410px] space-y-3'}> - <button onClick={() => window.close()} className={AUTH_SUBMIT_BTN}> + <AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''> Close - </button> + </AuthSubmitButton> </div> </InviteLayout> ) @@ -98,19 +99,19 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Successfully Unsubscribed </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> You have been unsubscribed from our emails. You will stop receiving emails within 48 hours. </p> </div> <div className={'mt-8 w-full max-w-[410px] space-y-3'}> - <button onClick={() => window.close()} className={AUTH_SUBMIT_BTN}> + <AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''> Close - </button> + </AuthSubmitButton> </div> </InviteLayout> ) @@ -121,84 +122,85 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Email Preferences </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> Choose which emails you'd like to stop receiving. </p> - <p className={'mt-2 font-[380] text-[var(--landing-text-muted)] text-sm'}>{data?.email}</p> + <p className={'mt-2 font-[380] text-[var(--text-muted)] text-sm'}>{data?.email}</p> </div> <div className={'mt-8 w-full max-w-[410px] space-y-3'}> - <button + <AuthSubmitButton + type='button' onClick={() => handleUnsubscribe('all')} - disabled={processing || isAlreadyUnsubscribedFromAll} - className={AUTH_SUBMIT_BTN} + disabled={isAlreadyUnsubscribedFromAll} + loading={processing} + loadingLabel='Unsubscribing…' > - {processing ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Unsubscribing… - </span> - ) : isAlreadyUnsubscribedFromAll ? ( - 'Unsubscribed from All Emails' - ) : ( - 'Unsubscribe from All Marketing Emails' - )} - </button> + {isAlreadyUnsubscribedFromAll + ? 'Unsubscribed from All Emails' + : 'Unsubscribe from All Marketing Emails'} + </AuthSubmitButton> <div className='py-2 text-center'> - <span className={'font-[380] text-[var(--landing-text-muted)] text-sm'}> + <span className={'font-[380] text-[var(--text-muted)] text-sm'}> or choose specific types </span> </div> - <button + <Chip + fullWidth + flush onClick={() => handleUnsubscribe('marketing')} disabled={ processing || isAlreadyUnsubscribedFromAll || data?.currentPreferences.unsubscribeMarketing } - className={AUTH_SUBMIT_BTN} + className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} > {data?.currentPreferences.unsubscribeMarketing ? 'Unsubscribed from Marketing' : 'Unsubscribe from Marketing Emails'} - </button> + </Chip> - <button + <Chip + fullWidth + flush onClick={() => handleUnsubscribe('updates')} disabled={ processing || isAlreadyUnsubscribedFromAll || data?.currentPreferences.unsubscribeUpdates } - className={AUTH_SUBMIT_BTN} + className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} > {data?.currentPreferences.unsubscribeUpdates ? 'Unsubscribed from Updates' : 'Unsubscribe from Product Updates'} - </button> + </Chip> - <button + <Chip + fullWidth + flush onClick={() => handleUnsubscribe('notifications')} disabled={ processing || isAlreadyUnsubscribedFromAll || data?.currentPreferences.unsubscribeNotifications } - className={AUTH_SUBMIT_BTN} + className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} > {data?.currentPreferences.unsubscribeNotifications ? 'Unsubscribed from Notifications' : 'Unsubscribe from Notifications'} - </button> + </Chip> </div> <div className={'mt-6 max-w-[410px] text-center'}> - <p className='font-[380] text-[var(--landing-text-muted)] text-small'> + <p className='font-[380] text-[var(--text-muted)] text-small'> You'll continue receiving important account emails like password resets and security alerts. </p> @@ -213,15 +215,15 @@ export default function Unsubscribe() { fallback={ <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Loading </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> Validating your unsubscribe link… </p> </div> <div className={'mt-8 flex w-full items-center justify-center py-8'}> - <Loader className='size-8 text-[var(--landing-text-muted)]' animate /> + <Loader className='size-8 text-[var(--text-muted)]' animate /> </div> </InviteLayout> } diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx index 24f5f716615..c4e8ac53fe1 100644 --- a/apps/sim/ee/sso/components/sso-auth.tsx +++ b/apps/sim/ee/sso/components/sso-auth.tsx @@ -1,14 +1,14 @@ 'use client' import { type KeyboardEvent, useState } from 'react' -import { cn, Input, Label, Loader } from '@sim/emcn' +import { cn, Input, Label } from '@sim/emcn' import { createLogger } from '@sim/logger' import { useRouter } from 'next/navigation' import { ApiClientError } from '@/lib/api/client/errors' import { requestJson } from '@/lib/api/client/request' import { chatSSOContract } from '@/lib/api/contracts/chats' import { quickValidateEmail } from '@/lib/messaging/email/validation' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' const logger = createLogger('SSOAuth') @@ -145,16 +145,9 @@ export default function SSOAuth({ identifier }: SSOAuthProps) { )} </div> - <button type='submit' disabled={isLoading} className={AUTH_SUBMIT_BTN}> - {isLoading ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Redirecting to SSO… - </span> - ) : ( - 'Continue with SSO' - )} - </button> + <AuthSubmitButton loading={isLoading} loadingLabel='Redirecting to SSO…'> + Continue with SSO + </AuthSubmitButton> </form> </div> </div> diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx index 39169d02751..638a004e216 100644 --- a/apps/sim/ee/sso/components/sso-form.tsx +++ b/apps/sim/ee/sso/components/sso-form.tsx @@ -1,7 +1,7 @@ 'use client' import { useEffect, useState } from 'react' -import { Button, cn, Input, Label, Loader } from '@sim/emcn' +import { Button, cn, Input, Label } from '@sim/emcn' import { createLogger } from '@sim/logger' import Link from 'next/link' import { useRouter, useSearchParams } from 'next/navigation' @@ -9,7 +9,7 @@ import { client } from '@/lib/auth/auth-client' import { env, isFalsy } from '@/lib/core/config/env' import { validateCallbackUrl } from '@/lib/core/security/input-validation' import { quickValidateEmail } from '@/lib/messaging/email/validation' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' const logger = createLogger('SSOForm') @@ -179,16 +179,9 @@ export default function SSOForm() { </div> </div> - <button type='submit' disabled={isLoading} className={AUTH_SUBMIT_BTN}> - {isLoading ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Redirecting to SSO provider… - </span> - ) : ( - 'Continue with SSO' - )} - </button> + <AuthSubmitButton loading={isLoading} loadingLabel='Redirecting to SSO provider…'> + Continue with SSO + </AuthSubmitButton> </form> {/* Only show divider and email signin button if email/password is enabled */}
{JSON.stringify(message.content, null, 2)}
+ {JSON.stringify(cleanTextContent, null, 2)} ) : ( @@ -240,8 +232,9 @@ export const ClientChatMessage = memo( {!message.isStreaming && ( - { const contentToCopy = typeof cleanTextContent === 'string' @@ -253,11 +246,11 @@ export const ClientChatMessage = memo( }} > {isCopied ? ( - + ) : ( - + )} - + {isCopied ? 'Copied!' : 'Copy to clipboard'} diff --git a/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx b/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx index 00fb29d5e62..eaab45992a2 100644 --- a/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx +++ b/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx @@ -1,11 +1,10 @@ 'use client' import { type RefObject, useCallback, useEffect, useRef, useState } from 'react' -import { cn } from '@sim/emcn' +import { Button, cn } from '@sim/emcn' import { createLogger } from '@sim/logger' import { Mic, MicOff, Phone } from 'lucide-react' import dynamic from 'next/dynamic' -import { Button } from '@/components/ui/button' import { requestJson } from '@/lib/api/client/request' import { speechTokenContract } from '@/lib/api/contracts/media/speech' import { arrayBufferToBase64, floatTo16BitPCM } from '@/lib/speech/audio' @@ -525,7 +524,7 @@ export function VoiceInterface({ return ( @@ -544,40 +543,32 @@ export function VoiceInterface({ {currentTranscript && ( - + {currentTranscript} )} - + {getStatusText()} - {isMuted && ( - (Muted) - )} + {isMuted && (Muted)} - + {getButtonContent()} diff --git a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx index 6b84e95c67d..f148c358fd5 100644 --- a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx +++ b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx @@ -4,8 +4,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { Badge, Button, + ChipInput, + ChipSelect, + ChipTextarea, Code, - Input, + cn, Label, Table, TableBody, @@ -13,21 +16,11 @@ import { TableHead, TableHeader, TableRow, - Textarea, Tooltip, } from '@sim/emcn' import { useQueryClient } from '@tanstack/react-query' import { RefreshCw } from 'lucide-react' import { useRouter } from 'next/navigation' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select' -import { Navbar } from '@/app/(landing)/components/navbar/navbar' -import { useBrandConfig } from '@/ee/whitelabeling' import { type PauseContextDetail, type PausedExecutionDetail, @@ -112,12 +105,12 @@ function getBlockNameFromSnapshot( function renderStructuredValuePreview(value: unknown) { if (value === null || value === undefined) { - return — + return — } if (typeof value === 'object') { return ( - + handleFormFieldChange(field.name, val)} - > - - - - - {!field.required && Not set} - True - False - - + onChange={(val) => handleFormFieldChange(field.name, val)} + placeholder={field.required ? 'Select true or false' : 'Select...'} + options={[ + ...(field.required ? [] : [{ label: 'Not set', value: '__unset__' }]), + { label: 'True', value: 'true' }, + { label: 'False', value: 'false' }, + ]} + /> ) } case 'number': return ( - handleFormFieldChange(field.name, e.target.value)} placeholder={field.placeholder ?? 'Enter a number...'} + error={Boolean(formErrors[field.name])} /> ) case 'array': case 'object': case 'files': return ( - handleFormFieldChange(field.name, e.target.value)} placeholder={field.placeholder ?? (field.type === 'array' ? '[...]' : '{...}')} rows={5} + error={Boolean(formErrors[field.name])} /> ) default: { if (field.rows !== undefined && field.rows > 3) { return ( - <Textarea + <ChipTextarea value={value} onChange={(e) => handleFormFieldChange(field.name, e.target.value)} placeholder={field.placeholder ?? 'Enter value...'} rows={5} + error={Boolean(formErrors[field.name])} /> ) } return ( - <Input + <ChipInput value={value} onChange={(e) => handleFormFieldChange(field.name, e.target.value)} placeholder={field.placeholder ?? 'Enter value...'} + error={Boolean(formErrors[field.name])} /> ) } } }, - [formValues, handleFormFieldChange] + [formValues, formErrors, handleFormFieldChange] ) const renderDisabledFieldInput = useCallback( @@ -404,19 +397,19 @@ export default function ResumeExecutionPage({ switch (field.type) { case 'boolean': { const displayValue = rawValue === true ? 'True' : rawValue === false ? 'False' : 'Not set' - return <Input value={displayValue} disabled /> + return <ChipInput value={displayValue} disabled /> } case 'number': - return <Input type='number' value={value} disabled /> + return <ChipInput type='number' value={value} disabled /> case 'array': case 'object': case 'files': - return <Textarea value={value} disabled rows={5} /> + return <ChipTextarea value={value} viewOnly rows={5} /> default: { if (field.rows !== undefined && field.rows > 3) { - return <Textarea value={value} disabled rows={5} /> + return <ChipTextarea value={value} viewOnly rows={5} /> } - return <Input value={value} disabled /> + return <ChipInput value={value} disabled /> } } }, @@ -676,37 +669,17 @@ export default function ResumeExecutionPage({ if (!executionDetail) { return ( <Tooltip.Provider> - <div className='font-season' style={{ minHeight: '100vh', background: 'var(--bg)' }}> - <header> - <Navbar /> - </header> - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - minHeight: 'calc(100vh - 80px)', - padding: '24px', - }} - > - <div style={{ textAlign: 'center', maxWidth: '400px' }}> - <h1 - style={{ - fontSize: '20px', - fontWeight: 500, - color: 'var(--text-primary)', - marginBottom: '8px', - }} - > - Execution Not Found - </h1> - <p style={{ fontSize: '14px', color: 'var(--text-secondary)', marginBottom: '24px' }}> - This execution could not be located or has already completed. - </p> - <Button variant='outline' onClick={() => router.push('/')}> - Return Home - </Button> - </div> + <div className='flex flex-1 items-center justify-center p-6'> + <div className='max-w-[400px] text-center'> + <h1 className='mb-2 font-medium text-[20px] text-[var(--text-primary)]'> + Execution Not Found + </h1> + <p className='mb-6 text-[14px] text-[var(--text-secondary)]'> + This execution could not be located or has already completed. + </p> + <Button variant='outline' onClick={() => router.push('/')}> + Return Home + </Button> </div> </div> </Tooltip.Provider> @@ -715,439 +688,264 @@ export default function ResumeExecutionPage({ return ( <Tooltip.Provider> - <div className='font-season' style={{ minHeight: '100vh', background: 'var(--bg)' }}> - <header> - <Navbar /> - </header> - <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px 24px' }}> - {/* Header */} - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: '32px', - }} - > - <div> - <h1 style={{ fontSize: '20px', fontWeight: 500, color: 'var(--text-primary)' }}> - Paused Execution - </h1> - <p style={{ fontSize: '14px', color: 'var(--text-secondary)', marginTop: '4px' }}> - Select a pause point to review and resume - </p> - </div> - <Tooltip.Root> - <Tooltip.Trigger asChild> - <Button - variant='outline' - size='sm' - onClick={handleRefreshExecution} - disabled={refreshingExecution} - className='gap-1.5 px-2.5' - aria-label='Refresh execution details' - > - <RefreshCw - style={{ - width: '14px', - height: '14px', - animation: refreshingExecution ? 'spin 1s linear infinite' : undefined, - }} - /> - Refresh - </Button> - </Tooltip.Trigger> - <Tooltip.Content>Refresh</Tooltip.Content> - </Tooltip.Root> + <div className='mx-auto w-full max-w-[1200px] px-6 py-8'> + {/* Header */} + <div className='mb-8 flex items-center justify-between'> + <div> + <h1 className='font-medium text-[20px] text-[var(--text-primary)]'>Paused Execution</h1> + <p className='mt-1 text-[14px] text-[var(--text-secondary)]'> + Select a pause point to review and resume + </p> </div> + <Tooltip.Root> + <Tooltip.Trigger asChild> + <Button + variant='outline' + size='sm' + onClick={handleRefreshExecution} + disabled={refreshingExecution} + className='gap-1.5 px-2.5' + aria-label='Refresh execution details' + > + <RefreshCw className={cn('size-[14px]', refreshingExecution && 'animate-spin')} /> + Refresh + </Button> + </Tooltip.Trigger> + <Tooltip.Content>Refresh</Tooltip.Content> + </Tooltip.Root> + </div> - {/* Main Layout */} - <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: '24px' }}> - {/* Pause Points List */} - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}> - <Label>Pause Points</Label> - </div> - <div> - {pausePoints.length === 0 ? ( - <div - style={{ - padding: '32px 16px', - textAlign: 'center', - color: 'var(--text-secondary)', - fontSize: '13px', - }} - > - No pause points - </div> - ) : ( - pausePoints.map((pause) => ( - <Button - key={pause.contextId} - variant={pause.contextId === selectedContextId ? 'active' : 'ghost'} - onClick={() => { - setSelectedContextId(pause.contextId) - setError(null) - setMessage(null) - }} - style={{ - width: '100%', - justifyContent: 'space-between', - borderRadius: 0, - padding: '12px 16px', - }} - > - <span style={{ fontSize: '13px' }}>{getBlockName(pause)}</span> - <StatusBadge status={pause.resumeStatus} /> - </Button> - )) - )} - </div> + {/* Main Layout */} + <div className='grid grid-cols-[280px_1fr] gap-6'> + {/* Pause Points List */} + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Pause Points</Label> </div> - - {/* Detail Panel */} <div> - {loadingDetail && !selectedDetail ? ( - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: '200px', - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - }} - > - <span style={{ color: 'var(--text-secondary)', fontSize: '13px' }}>Loading…</span> - </div> - ) : !selectedContextId ? ( - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: '200px', - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - }} - > - <span style={{ color: 'var(--text-secondary)', fontSize: '13px' }}> - Select a pause point - </span> - </div> - ) : !selectedDetail ? ( - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: '200px', - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - }} - > - <span style={{ color: 'var(--text-secondary)', fontSize: '13px' }}> - Could not load details - </span> + {pausePoints.length === 0 ? ( + <div className='px-4 py-8 text-center text-[13px] text-[var(--text-secondary)]'> + No pause points </div> ) : ( - <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}> - {/* Status Header */} - <div - style={{ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - padding: '12px 16px', + pausePoints.map((pause) => ( + <Button + key={pause.contextId} + variant={pause.contextId === selectedContextId ? 'active' : 'ghost'} + onClick={() => { + setSelectedContextId(pause.contextId) + setError(null) + setMessage(null) }} + className='w-full justify-between rounded-none px-4 py-3' > - <div> - <Label>{getBlockName(selectedDetail.pausePoint)}</Label> - <p style={{ fontSize: '12px', color: 'var(--text-muted)', marginTop: '2px' }}> - Paused at {formatDate(selectedDetail.pausePoint.registeredAt)} - </p> + <span className='text-[13px]'>{getBlockName(pause)}</span> + <StatusBadge status={pause.resumeStatus} /> + </Button> + )) + )} + </div> + </div> + + {/* Detail Panel */} + <div> + {loadingDetail && !selectedDetail ? ( + <div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <span className='text-[13px] text-[var(--text-secondary)]'>Loading…</span> + </div> + ) : !selectedContextId ? ( + <div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <span className='text-[13px] text-[var(--text-secondary)]'> + Select a pause point + </span> + </div> + ) : !selectedDetail ? ( + <div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <span className='text-[13px] text-[var(--text-secondary)]'> + Could not load details + </span> + </div> + ) : ( + <div className='flex flex-col gap-4'> + {/* Status Header */} + <div className='flex items-center justify-between rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'> + <div> + <Label>{getBlockName(selectedDetail.pausePoint)}</Label> + <p className='mt-[2px] text-[12px] text-[var(--text-muted)]'> + Paused at {formatDate(selectedDetail.pausePoint.registeredAt)} + </p> + </div> + <div className='flex items-center gap-2'> + <StatusBadge status={selectedStatus} /> + {queuePosition && queuePosition > 0 && ( + <Badge variant='gray' size='sm'> + Queue #{queuePosition} + </Badge> + )} + </div> + </div> + + {/* Already resolved - show form fields with submitted values */} + {selectedStatus === 'resumed' || selectedStatus === 'failed' ? ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Resume Form</Label> </div> - <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}> - <StatusBadge status={selectedStatus} /> - {queuePosition && queuePosition > 0 && ( - <Badge variant='gray' size='sm'> - Queue #{queuePosition} - </Badge> + <div className='flex flex-col gap-4 p-4'> + {selectedStatus === 'failed' && + selectedDetail.pausePoint.latestResumeEntry?.failureReason && ( + <Badge variant='red' size='sm'> + {selectedDetail.pausePoint.latestResumeEntry.failureReason} + </Badge> + )} + {inputFormatFields.length > 0 && + selectedDetail.pausePoint.latestResumeEntry?.resumeInput ? ( + inputFormatFields.map((field) => ( + <div key={field.id} className='flex flex-col gap-[9px]'> + <Label>{field.label}</Label> + {field.description && ( + <p className='text-[12px] text-[var(--text-muted)]'> + {field.description} + </p> + )} + {renderDisabledFieldInput( + field, + selectedDetail.pausePoint.latestResumeEntry?.resumeInput + ?.submission ?? + selectedDetail.pausePoint.latestResumeEntry?.resumeInput ?? + {} + )} + </div> + )) + ) : selectedDetail.pausePoint.latestResumeEntry?.resumeInput ? ( + <ChipTextarea + value={JSON.stringify( + selectedDetail.pausePoint.latestResumeEntry.resumeInput, + null, + 2 + )} + viewOnly + rows={6} + /> + ) : ( + <p className='text-[13px] text-[var(--text-muted)]'> + No input data provided + </p> )} </div> </div> - - {/* Already resolved - show form fields with submitted values */} - {selectedStatus === 'resumed' || selectedStatus === 'failed' ? ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }} - > - <Label>Resume Form</Label> + ) : ( + <> + {/* Display Data */} + {responseStructureRows.length > 0 ? ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Display Data</Label> + </div> + <div className='p-4'> + <Table> + <TableHeader> + <TableRow> + <TableHead>Field</TableHead> + <TableHead>Type</TableHead> + <TableHead>Value</TableHead> + </TableRow> + </TableHeader> + <TableBody> + {responseStructureRows.map((row) => ( + <TableRow key={row.id}> + <TableCell>{row.name}</TableCell> + <TableCell>{row.type}</TableCell> + <TableCell>{renderStructuredValuePreview(row.value)}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </div> </div> - <div - style={{ - padding: '16px', - display: 'flex', - flexDirection: 'column', - gap: '16px', - }} - > - {selectedStatus === 'failed' && - selectedDetail.pausePoint.latestResumeEntry?.failureReason && ( - <Badge variant='red' size='sm'> - {selectedDetail.pausePoint.latestResumeEntry.failureReason} - </Badge> - )} - {inputFormatFields.length > 0 && - selectedDetail.pausePoint.latestResumeEntry?.resumeInput ? ( - inputFormatFields.map((field) => ( - <div - key={field.id} - style={{ display: 'flex', flexDirection: 'column', gap: '6px' }} - > - <Label>{field.label}</Label> + ) : ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Display Data</Label> + </div> + <div className='p-4'> + <p className='text-[13px] text-[var(--text-muted)]'> + No display data configured + </p> + </div> + </div> + )} + + {/* Resume Form */} + {isHumanMode && hasInputFormat ? ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Resume Form</Label> + </div> + <div className='flex flex-col gap-4 p-4'> + {inputFormatFields.map((field) => ( + <div key={field.id} className='flex flex-col gap-[9px]'> + <Label> + {field.label} + {field.required && ( + <span className='ml-1 text-[var(--text-error)]'>*</span> + )} + </Label> {field.description && ( - <p style={{ fontSize: '12px', color: 'var(--text-muted)' }}> + <p className='text-[12px] text-[var(--text-muted)]'> {field.description} </p> )} - {renderDisabledFieldInput( - field, - selectedDetail.pausePoint.latestResumeEntry?.resumeInput - ?.submission ?? - selectedDetail.pausePoint.latestResumeEntry?.resumeInput ?? - {} + {renderFieldInput(field)} + {formErrors[field.name] && ( + <Badge variant='red' size='sm'> + {formErrors[field.name]} + </Badge> )} </div> - )) - ) : selectedDetail.pausePoint.latestResumeEntry?.resumeInput ? ( - <Textarea - value={JSON.stringify( - selectedDetail.pausePoint.latestResumeEntry.resumeInput, - null, - 2 - )} - disabled - rows={6} - /> - ) : ( - <p style={{ fontSize: '13px', color: 'var(--text-muted)' }}> - No input data provided - </p> - )} - </div> - </div> - ) : ( - <> - {/* Display Data */} - {responseStructureRows.length > 0 ? ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ - padding: '12px 16px', - borderBottom: '1px solid var(--border)', - }} - > - <Label>Display Data</Label> - </div> - <div style={{ padding: '16px' }}> - <Table> - <TableHeader> - <TableRow> - <TableHead>Field</TableHead> - <TableHead>Type</TableHead> - <TableHead>Value</TableHead> - </TableRow> - </TableHeader> - <TableBody> - {responseStructureRows.map((row) => ( - <TableRow key={row.id}> - <TableCell>{row.name}</TableCell> - <TableCell>{row.type}</TableCell> - <TableCell>{renderStructuredValuePreview(row.value)}</TableCell> - </TableRow> - ))} - </TableBody> - </Table> - </div> - </div> - ) : ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ - padding: '12px 16px', - borderBottom: '1px solid var(--border)', - }} - > - <Label>Display Data</Label> - </div> - <div style={{ padding: '16px' }}> - <p style={{ fontSize: '13px', color: 'var(--text-muted)' }}> - No display data configured - </p> - </div> + ))} </div> - )} - - {/* Resume Form */} - {isHumanMode && hasInputFormat ? ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ - padding: '12px 16px', - borderBottom: '1px solid var(--border)', - }} - > - <Label>Resume Form</Label> - </div> - <div - style={{ - padding: '16px', - display: 'flex', - flexDirection: 'column', - gap: '16px', - }} - > - {inputFormatFields.map((field) => ( - <div - key={field.id} - style={{ display: 'flex', flexDirection: 'column', gap: '6px' }} - > - <Label> - {field.label} - {field.required && ( - <span style={{ color: 'var(--text-error)', marginLeft: '4px' }}> - * - </span> - )} - </Label> - {field.description && ( - <p style={{ fontSize: '12px', color: 'var(--text-muted)' }}> - {field.description} - </p> - )} - {renderFieldInput(field)} - {formErrors[field.name] && ( - <Badge variant='red' size='sm'> - {formErrors[field.name]} - </Badge> - )} - </div> - ))} - </div> + </div> + ) : ( + <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'> + <div className='border-[var(--border)] border-b px-4 py-3'> + <Label>Resume Input (JSON)</Label> </div> - ) : ( - <div - style={{ - background: 'var(--surface-1)', - border: '1px solid var(--border)', - borderRadius: '8px', - overflow: 'hidden', - }} - > - <div - style={{ - padding: '12px 16px', - borderBottom: '1px solid var(--border)', - }} - > - <Label>Resume Input (JSON)</Label> - </div> - <div style={{ padding: '16px' }}> - <Textarea - value={resumeInput} - onChange={(e) => { - setResumeInput(e.target.value) - if (selectedContextId) { - resumeInputsRef.current = { - ...resumeInputsRef.current, - [selectedContextId]: e.target.value, - } + <div className='p-4'> + <ChipTextarea + value={resumeInput} + onChange={(e) => { + setResumeInput(e.target.value) + if (selectedContextId) { + resumeInputsRef.current = { + ...resumeInputsRef.current, + [selectedContextId]: e.target.value, } - }} - placeholder='{"example": "value"}' - rows={6} - spellCheck={false} - className='min-h-[180px] border-[var(--border-1)] bg-[var(--surface-3)] font-mono text-[12px] leading-5' - /> - </div> + } + }} + placeholder='{"example": "value"}' + rows={6} + spellCheck={false} + className='min-h-[180px] font-mono' + /> </div> - )} + </div> + )} - {/* Messages */} - {error && <Badge variant='red'>{error}</Badge>} - {message && <Badge variant='green'>{message}</Badge>} + {/* Messages */} + {error && <Badge variant='red'>{error}</Badge>} + {message && <Badge variant='green'>{message}</Badge>} - {/* Action */} - <Button variant='primary' onClick={handleResume} disabled={resumeDisabled}> - {loadingAction ? 'Resuming...' : 'Resume Execution'} - </Button> - </> - )} - </div> - )} - </div> + {/* Action */} + <Button variant='primary' onClick={handleResume} disabled={resumeDisabled}> + {loadingAction ? 'Resuming...' : 'Resume Execution'} + </Button> + </> + )} + </div> + )} </div> </div> - - {/* Footer */} - <div - style={{ - maxWidth: '1200px', - margin: '24px auto 0', - padding: '0 24px 24px', - textAlign: 'center', - fontSize: '13px', - color: 'var(--text-muted)', - }} - > - Need help?{' '} - <a href={`mailto:${brandConfig.supportEmail}`} style={{ color: 'var(--text-secondary)' }}> - Contact support - </a> - </div> </div> </Tooltip.Provider> ) diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx index 955f5067525..83a6d802e31 100644 --- a/apps/sim/app/_shell/providers/theme-provider.tsx +++ b/apps/sim/app/_shell/providers/theme-provider.tsx @@ -22,7 +22,9 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) { pathname.startsWith('/chat') || pathname.startsWith('/blog') || pathname.startsWith('/resume') || - pathname.startsWith('/oauth') + pathname.startsWith('/oauth') || + pathname.startsWith('/f/') || + pathname.startsWith('/unsubscribe') const isDarkModePage = pathname.startsWith('/academy') diff --git a/apps/sim/app/f/[token]/public-file-auth-shell.tsx b/apps/sim/app/f/[token]/public-file-auth-shell.tsx index 3e9c00e042e..bc4e18c3f9d 100644 --- a/apps/sim/app/f/[token]/public-file-auth-shell.tsx +++ b/apps/sim/app/f/[token]/public-file-auth-shell.tsx @@ -1,7 +1,6 @@ import type { ReactNode } from 'react' -import AuthBackground from '@/app/(auth)/components/auth-background' import { SupportFooter } from '@/app/(auth)/components/support-footer' -import { Navbar } from '@/app/(landing)/components/navbar/navbar' +import { LogoShell } from '@/app/(landing)/components' interface PublicFileAuthShellProps { title: string @@ -10,34 +9,24 @@ interface PublicFileAuthShellProps { } /** - * Landing-chrome shell shared by the public file-share auth gates (password, + * Light, logo-only shell shared by the public file-share auth gates (password, * email OTP, SSO), matching the deployed-chat auth screens. Renders no file * metadata — the name/provenance are withheld until the visitor authenticates. */ export function PublicFileAuthShell({ title, subtitle, children }: PublicFileAuthShellProps) { return ( - <AuthBackground className='dark font-[430] font-season'> - <main className='relative flex min-h-full flex-col text-[var(--landing-text)]'> - <header className='shrink-0 bg-[var(--landing-bg)]'> - <Navbar logoOnly /> - </header> - <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'> - <div className='w-full max-w-lg px-4'> - <div className='flex flex-col items-center justify-center'> - <div className='space-y-1 text-center'> - <h1 className='text-balance font-[430] font-season text-[40px] text-[var(--landing-text)] leading-[110%] tracking-[-0.02em]'> - {title} - </h1> - <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'> - {subtitle} - </p> - </div> - <div className='mt-8 w-full max-w-[410px]'>{children}</div> - </div> - </div> + <LogoShell center footer={<SupportFooter position='absolute' />}> + <div className='flex w-full max-w-lg flex-col items-center justify-center px-4'> + <div className='space-y-1 text-center'> + <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'> + {title} + </h1> + <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'> + {subtitle} + </p> </div> - <SupportFooter position='absolute' /> - </main> - </AuthBackground> + <div className='mt-8 w-full max-w-[410px]'>{children}</div> + </div> + </LogoShell> ) } diff --git a/apps/sim/app/f/[token]/public-file-auth.tsx b/apps/sim/app/f/[token]/public-file-auth.tsx index cc665e3758f..005f8606248 100644 --- a/apps/sim/app/f/[token]/public-file-auth.tsx +++ b/apps/sim/app/f/[token]/public-file-auth.tsx @@ -1,11 +1,11 @@ 'use client' import { useState } from 'react' -import { cn, Input, Label, Loader } from '@sim/emcn' +import { cn, Input, Label } from '@sim/emcn' import { getErrorMessage } from '@sim/utils/errors' import { Eye, EyeOff } from 'lucide-react' import { useRouter } from 'next/navigation' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell' import { usePublicFileAuth } from '@/hooks/queries/public-shares' @@ -72,7 +72,7 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) { <button type='button' onClick={() => setShowPassword(!showPassword)} - className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--landing-text-muted)] hover:text-[var(--landing-text)]' + className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover:text-[var(--text-primary)]' aria-label={showPassword ? 'Hide password' : 'Show password'} > {showPassword ? <EyeOff size={18} /> : <Eye size={18} />} @@ -81,20 +81,13 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) { {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null} </div> - <button - type='submit' - disabled={!password.trim() || authenticate.isPending} - className={AUTH_SUBMIT_BTN} + <AuthSubmitButton + disabled={!password.trim()} + loading={authenticate.isPending} + loadingLabel='Authenticating…' > - {authenticate.isPending ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Authenticating… - </span> - ) : ( - 'Continue' - )} - </button> + Continue + </AuthSubmitButton> </form> </PublicFileAuthShell> ) diff --git a/apps/sim/app/f/[token]/public-file-email-auth.tsx b/apps/sim/app/f/[token]/public-file-email-auth.tsx index f6b01a6b7f5..beac8429fb7 100644 --- a/apps/sim/app/f/[token]/public-file-email-auth.tsx +++ b/apps/sim/app/f/[token]/public-file-email-auth.tsx @@ -1,11 +1,12 @@ 'use client' import { useEffect, useState } from 'react' -import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Loader } from '@sim/emcn' +import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn' import { getErrorMessage } from '@sim/utils/errors' import { useRouter } from 'next/navigation' import { quickValidateEmail } from '@/lib/messaging/email/validation' -import { AUTH_SUBMIT_BTN, AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' +import { AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes' import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell' import { usePublicFileOtpRequest, usePublicFileOtpVerify } from '@/hooks/queries/public-shares' @@ -107,20 +108,13 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null} </div> - <button - type='submit' - disabled={!email.trim() || requestOtp.isPending} - className={AUTH_SUBMIT_BTN} + <AuthSubmitButton + disabled={!email.trim()} + loading={requestOtp.isPending} + loadingLabel='Sending Code…' > - {requestOtp.isPending ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Sending Code… - </span> - ) : ( - 'Continue' - )} - </button> + Continue + </AuthSubmitButton> </form> </PublicFileAuthShell> ) @@ -132,7 +126,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { subtitle={`A verification code has been sent to ${email}`} > <div className='space-y-6'> - <p className='text-center text-[var(--landing-text-muted)] text-sm'> + <p className='text-center text-[var(--text-muted)] text-sm'> Enter the 6-digit code to verify your access. If you don't see it in your inbox, check your spam folder. </p> @@ -163,28 +157,23 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { {error ? <p className='text-center text-[var(--text-error)] text-xs'>{error}</p> : null} - <button + <AuthSubmitButton + type='button' onClick={() => verifyCode(otp)} - disabled={otp.length !== 6 || verifyOtp.isPending} - className={AUTH_SUBMIT_BTN} + disabled={otp.length !== 6} + loading={verifyOtp.isPending} + loadingLabel='Verifying…' > - {verifyOtp.isPending ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Verifying… - </span> - ) : ( - 'Verify Email' - )} - </button> + Verify Email + </AuthSubmitButton> <div className='text-center'> - <p className='text-[var(--landing-text-muted)] text-sm'> + <p className='text-[var(--text-muted)] text-sm'> Didn't receive a code?{' '} {countdown > 0 ? ( <span> Resend in{' '} - <span className='font-medium text-[var(--landing-text)]'>{countdown}s</span> + <span className='font-medium text-[var(--text-primary)]'>{countdown}s</span> </span> ) : ( <button diff --git a/apps/sim/app/f/[token]/public-file-sso-auth.tsx b/apps/sim/app/f/[token]/public-file-sso-auth.tsx index a5f09fc9170..5ed4a410da0 100644 --- a/apps/sim/app/f/[token]/public-file-sso-auth.tsx +++ b/apps/sim/app/f/[token]/public-file-sso-auth.tsx @@ -1,13 +1,13 @@ 'use client' import { useState } from 'react' -import { cn, Input, Label, Loader } from '@sim/emcn' +import { cn, Input, Label } from '@sim/emcn' import { getErrorMessage } from '@sim/utils/errors' import { useRouter } from 'next/navigation' import { requestJson } from '@/lib/api/client/request' import { publicFileSSOContract } from '@/lib/api/contracts/public-shares' import { quickValidateEmail } from '@/lib/messaging/email/validation' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell' interface PublicFileSSOAuthProps { @@ -86,16 +86,13 @@ export function PublicFileSSOAuth({ token }: PublicFileSSOAuthProps) { {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null} </div> - <button type='submit' disabled={!email.trim() || isLoading} className={AUTH_SUBMIT_BTN}> - {isLoading ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Redirecting to SSO… - </span> - ) : ( - 'Continue with SSO' - )} - </button> + <AuthSubmitButton + disabled={!email.trim()} + loading={isLoading} + loadingLabel='Redirecting to SSO…' + > + Continue with SSO + </AuthSubmitButton> </form> </PublicFileAuthShell> ) diff --git a/apps/sim/app/f/[token]/public-file-view.tsx b/apps/sim/app/f/[token]/public-file-view.tsx index 3f61b66e3f9..5d1db37b68e 100644 --- a/apps/sim/app/f/[token]/public-file-view.tsx +++ b/apps/sim/app/f/[token]/public-file-view.tsx @@ -3,9 +3,9 @@ import { useMemo } from 'react' import { Chip } from '@sim/emcn' import { Download } from '@sim/emcn/icons' -import Image from 'next/image' import Link from 'next/link' import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace' +import { SimWordmark } from '@/app/(landing)/components/navbar/components' import { buildProvenance } from '@/app/f/[token]/utils' import { FileViewer } from '@/app/workspace/[workspaceId]/files/components/file-viewer' import { useBrandConfig } from '@/ee/whitelabeling' @@ -65,7 +65,7 @@ export function PublicFileView({ ) return ( - <div className='flex min-h-screen flex-col bg-[var(--bg)]'> + <div className='light flex min-h-screen flex-col bg-[var(--bg)]'> <header className='sticky top-0 z-10 flex items-center justify-between gap-4 border-[var(--border)] border-b bg-[var(--bg)] px-4 py-3'> <div className='flex min-w-0 items-center gap-3'> {!brand.logoUrl && ( @@ -75,24 +75,9 @@ export function PublicFileView({ target='_blank' rel='noopener noreferrer' aria-label='Sim home' - className='shrink-0' + className='flex shrink-0 items-center' > - <Image - src='/logo/wordmark-dark.svg' - alt='Sim' - width={71} - height={22} - className='h-[22px] w-auto dark:hidden' - priority - /> - <Image - src='/logo/sim-landing.svg' - alt='Sim' - width={71} - height={22} - className='hidden h-[22px] w-auto dark:block' - priority - /> + <SimWordmark /> </Link> <div className='h-5 w-px shrink-0 bg-[var(--border)]' /> </> diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx index b067c0716e6..67ec787d8ce 100644 --- a/apps/sim/app/invite/components/status-card.tsx +++ b/apps/sim/app/invite/components/status-card.tsx @@ -1,7 +1,8 @@ 'use client' -import { cn, Loader } from '@sim/emcn' +import { Chip, cn, Loader } from '@sim/emcn' import { useRouter } from 'next/navigation' -import { AUTH_PRIMARY_CTA_BASE } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' +import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants' interface InviteStatusCardProps { type: 'login' | 'loading' | 'error' | 'success' | 'invitation' | 'warning' @@ -33,13 +34,13 @@ export function InviteStatusCard({ return ( <> <div className='space-y-1 text-center'> - <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'> + <h1 className='font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'> Loading </h1> - <p className='font-[380] text-[var(--landing-text-muted)] text-md'>{description}</p> + <p className='font-[380] text-[var(--text-muted)]'>{description}</p> </div> <div className='mt-8 flex w-full items-center justify-center py-8'> - <Loader className='size-8 text-[var(--landing-text-muted)]' animate /> + <Loader className='size-8 text-[var(--text-muted)]' animate /> </div> </> ) @@ -48,40 +49,51 @@ export function InviteStatusCard({ return ( <> <div className='space-y-1 text-center'> - <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'> + <h1 className='font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'> {title} </h1> - <p className='font-[380] text-[var(--landing-text-muted)] text-md'>{description}</p> + <p className='font-[380] text-[var(--text-muted)]'>{description}</p> </div> <div className='mt-8 w-full max-w-[410px] space-y-3'> {isExpiredError && ( - <button onClick={() => router.push('/')} className={`${AUTH_PRIMARY_CTA_BASE} w-full`}> + <AuthSubmitButton type='button' onClick={() => router.push('/')} loadingLabel=''> Request New Invitation - </button> + </AuthSubmitButton> )} - {actions.map((action, index) => ( - <button - key={action.label} - onClick={action.onClick} - disabled={action.disabled || action.loading} - className={cn( - `${AUTH_PRIMARY_CTA_BASE} w-full`, - index !== 0 && - 'border-[var(--landing-border-strong)] bg-transparent text-[var(--landing-text)] hover:border-[var(--landing-border-strong)] hover:bg-[var(--landing-bg-elevated)] hover:text-[var(--landing-text)]' - )} - > - {action.loading ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - {action.label}... - </span> - ) : ( - action.label - )} - </button> - ))} + {actions.map((action, index) => + index === 0 ? ( + <AuthSubmitButton + key={action.label} + type='button' + onClick={action.onClick} + disabled={action.disabled} + loading={action.loading} + loadingLabel={`${action.label}...`} + > + {action.label} + </AuthSubmitButton> + ) : ( + <Chip + key={action.label} + fullWidth + flush + onClick={action.onClick} + disabled={action.disabled || action.loading} + className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} + > + {action.loading ? ( + <span className='flex items-center gap-2'> + <Loader className='size-4' animate /> + {action.label}... + </span> + ) : ( + action.label + )} + </Chip> + ) + )} </div> </> ) diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx index 1ace40a9b74..605f45a1943 100644 --- a/apps/sim/app/unsubscribe/unsubscribe.tsx +++ b/apps/sim/app/unsubscribe/unsubscribe.tsx @@ -1,11 +1,12 @@ 'use client' import { Suspense } from 'react' -import { Loader } from '@sim/emcn' +import { Chip, cn, Loader } from '@sim/emcn' import { getErrorMessage } from '@sim/utils/errors' import { useSearchParams } from 'next/navigation' import type { UnsubscribeType } from '@/lib/api/contracts/user' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' +import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants' import { InviteLayout } from '@/app/invite/components' import { useUnsubscribe, useUnsubscribeMutation } from '@/hooks/queries/unsubscribe' @@ -39,15 +40,15 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Loading </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> Validating your unsubscribe link… </p> </div> <div className={'mt-8 flex w-full items-center justify-center py-8'}> - <Loader className='size-8 text-[var(--landing-text-muted)]' animate /> + <Loader className='size-8 text-[var(--text-muted)]' animate /> </div> </InviteLayout> ) @@ -57,16 +58,16 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Invalid Unsubscribe Link </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}>{error}</p> + <p className={'font-[380] text-[var(--text-muted)] text-md'}>{error}</p> </div> <div className={'mt-8 w-full max-w-[410px] space-y-3'}> - <button onClick={() => window.history.back()} className={AUTH_SUBMIT_BTN}> + <AuthSubmitButton type='button' onClick={() => window.history.back()} loadingLabel=''> Go Back - </button> + </AuthSubmitButton> </div> </InviteLayout> ) @@ -76,19 +77,19 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Important Account Emails </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> Transactional emails like password resets, account confirmations, and security alerts cannot be unsubscribed from as they contain essential information for your account. </p> </div> <div className={'mt-8 w-full max-w-[410px] space-y-3'}> - <button onClick={() => window.close()} className={AUTH_SUBMIT_BTN}> + <AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''> Close - </button> + </AuthSubmitButton> </div> </InviteLayout> ) @@ -98,19 +99,19 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Successfully Unsubscribed </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> You have been unsubscribed from our emails. You will stop receiving emails within 48 hours. </p> </div> <div className={'mt-8 w-full max-w-[410px] space-y-3'}> - <button onClick={() => window.close()} className={AUTH_SUBMIT_BTN}> + <AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''> Close - </button> + </AuthSubmitButton> </div> </InviteLayout> ) @@ -121,84 +122,85 @@ function UnsubscribeContent() { return ( <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Email Preferences </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> Choose which emails you'd like to stop receiving. </p> - <p className={'mt-2 font-[380] text-[var(--landing-text-muted)] text-sm'}>{data?.email}</p> + <p className={'mt-2 font-[380] text-[var(--text-muted)] text-sm'}>{data?.email}</p> </div> <div className={'mt-8 w-full max-w-[410px] space-y-3'}> - <button + <AuthSubmitButton + type='button' onClick={() => handleUnsubscribe('all')} - disabled={processing || isAlreadyUnsubscribedFromAll} - className={AUTH_SUBMIT_BTN} + disabled={isAlreadyUnsubscribedFromAll} + loading={processing} + loadingLabel='Unsubscribing…' > - {processing ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Unsubscribing… - </span> - ) : isAlreadyUnsubscribedFromAll ? ( - 'Unsubscribed from All Emails' - ) : ( - 'Unsubscribe from All Marketing Emails' - )} - </button> + {isAlreadyUnsubscribedFromAll + ? 'Unsubscribed from All Emails' + : 'Unsubscribe from All Marketing Emails'} + </AuthSubmitButton> <div className='py-2 text-center'> - <span className={'font-[380] text-[var(--landing-text-muted)] text-sm'}> + <span className={'font-[380] text-[var(--text-muted)] text-sm'}> or choose specific types </span> </div> - <button + <Chip + fullWidth + flush onClick={() => handleUnsubscribe('marketing')} disabled={ processing || isAlreadyUnsubscribedFromAll || data?.currentPreferences.unsubscribeMarketing } - className={AUTH_SUBMIT_BTN} + className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} > {data?.currentPreferences.unsubscribeMarketing ? 'Unsubscribed from Marketing' : 'Unsubscribe from Marketing Emails'} - </button> + </Chip> - <button + <Chip + fullWidth + flush onClick={() => handleUnsubscribe('updates')} disabled={ processing || isAlreadyUnsubscribedFromAll || data?.currentPreferences.unsubscribeUpdates } - className={AUTH_SUBMIT_BTN} + className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} > {data?.currentPreferences.unsubscribeUpdates ? 'Unsubscribed from Updates' : 'Unsubscribe from Product Updates'} - </button> + </Chip> - <button + <Chip + fullWidth + flush onClick={() => handleUnsubscribe('notifications')} disabled={ processing || isAlreadyUnsubscribedFromAll || data?.currentPreferences.unsubscribeNotifications } - className={AUTH_SUBMIT_BTN} + className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} > {data?.currentPreferences.unsubscribeNotifications ? 'Unsubscribed from Notifications' : 'Unsubscribe from Notifications'} - </button> + </Chip> </div> <div className={'mt-6 max-w-[410px] text-center'}> - <p className='font-[380] text-[var(--landing-text-muted)] text-small'> + <p className='font-[380] text-[var(--text-muted)] text-small'> You'll continue receiving important account emails like password resets and security alerts. </p> @@ -213,15 +215,15 @@ export default function Unsubscribe() { fallback={ <InviteLayout> <div className='space-y-1 text-center'> - <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}> + <h1 className={'font-medium text-[32px] text-[var(--text-primary)] tracking-tight'}> Loading </h1> - <p className={'font-[380] text-[var(--landing-text-muted)] text-md'}> + <p className={'font-[380] text-[var(--text-muted)] text-md'}> Validating your unsubscribe link… </p> </div> <div className={'mt-8 flex w-full items-center justify-center py-8'}> - <Loader className='size-8 text-[var(--landing-text-muted)]' animate /> + <Loader className='size-8 text-[var(--text-muted)]' animate /> </div> </InviteLayout> } diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx index 24f5f716615..c4e8ac53fe1 100644 --- a/apps/sim/ee/sso/components/sso-auth.tsx +++ b/apps/sim/ee/sso/components/sso-auth.tsx @@ -1,14 +1,14 @@ 'use client' import { type KeyboardEvent, useState } from 'react' -import { cn, Input, Label, Loader } from '@sim/emcn' +import { cn, Input, Label } from '@sim/emcn' import { createLogger } from '@sim/logger' import { useRouter } from 'next/navigation' import { ApiClientError } from '@/lib/api/client/errors' import { requestJson } from '@/lib/api/client/request' import { chatSSOContract } from '@/lib/api/contracts/chats' import { quickValidateEmail } from '@/lib/messaging/email/validation' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' const logger = createLogger('SSOAuth') @@ -145,16 +145,9 @@ export default function SSOAuth({ identifier }: SSOAuthProps) { )} </div> - <button type='submit' disabled={isLoading} className={AUTH_SUBMIT_BTN}> - {isLoading ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Redirecting to SSO… - </span> - ) : ( - 'Continue with SSO' - )} - </button> + <AuthSubmitButton loading={isLoading} loadingLabel='Redirecting to SSO…'> + Continue with SSO + </AuthSubmitButton> </form> </div> </div> diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx index 39169d02751..638a004e216 100644 --- a/apps/sim/ee/sso/components/sso-form.tsx +++ b/apps/sim/ee/sso/components/sso-form.tsx @@ -1,7 +1,7 @@ 'use client' import { useEffect, useState } from 'react' -import { Button, cn, Input, Label, Loader } from '@sim/emcn' +import { Button, cn, Input, Label } from '@sim/emcn' import { createLogger } from '@sim/logger' import Link from 'next/link' import { useRouter, useSearchParams } from 'next/navigation' @@ -9,7 +9,7 @@ import { client } from '@/lib/auth/auth-client' import { env, isFalsy } from '@/lib/core/config/env' import { validateCallbackUrl } from '@/lib/core/security/input-validation' import { quickValidateEmail } from '@/lib/messaging/email/validation' -import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes' +import { AuthSubmitButton } from '@/app/(auth)/components' const logger = createLogger('SSOForm') @@ -179,16 +179,9 @@ export default function SSOForm() { </div> </div> - <button type='submit' disabled={isLoading} className={AUTH_SUBMIT_BTN}> - {isLoading ? ( - <span className='flex items-center gap-2'> - <Loader className='size-4' animate /> - Redirecting to SSO provider… - </span> - ) : ( - 'Continue with SSO' - )} - </button> + <AuthSubmitButton loading={isLoading} loadingLabel='Redirecting to SSO provider…'> + Continue with SSO + </AuthSubmitButton> </form> {/* Only show divider and email signin button if email/password is enabled */}
{JSON.stringify(cleanTextContent, null, 2)}
{currentTranscript}
{getStatusText()} - {isMuted && ( - (Muted) - )} + {isMuted && (Muted)}