Skip to content

Commit 4c70b8e

Browse files
author
waleed
committed
fix(ui): added ui styling for kb tags
1 parent c8f30c4 commit 4c70b8e

9 files changed

Lines changed: 46 additions & 296 deletions

File tree

‎apps/sim/app/chat/[identifier]/chat.css‎

Lines changed: 0 additions & 106 deletions
This file was deleted.

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

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎apps/sim/app/conditional-theme-provider.tsx‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎apps/sim/app/workspace/[workspaceId]/knowledge/components/tag-input/typed-tag-input.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use client'
22

33
import { useEffect, useState } from 'react'
4-
import { CalendarIcon } from 'lucide-react'
54
import { Input } from '@/components/ui/input'
65
import {
76
Select,
@@ -131,19 +130,17 @@ export function TypedTagInput({
131130
case 'date':
132131
return (
133132
<div className={className}>
134-
<div className='relative'>
135-
<Input
136-
type='date'
137-
value={inputValue ? inputValue.split('T')[0] : ''}
138-
onChange={(e) => validateAndUpdate(e.target.value)}
139-
disabled={disabled}
140-
className={cn(
141-
'h-8 rounded-[10px] border-[#E5E5E5] bg-[#FFFFFF] pr-9 text-sm dark:border-[#414141] dark:bg-[var(--surface-elevated)]',
142-
!isValid && 'border-red-300 focus:border-red-500 focus:ring-0'
143-
)}
144-
/>
145-
<CalendarIcon className='-translate-y-1/2 pointer-events-none absolute top-1/2 right-3 h-4 w-4 text-muted-foreground' />
146-
</div>
133+
<Input
134+
type='text'
135+
value={inputValue}
136+
onChange={(e) => validateAndUpdate(e.target.value)}
137+
placeholder={placeholder || 'mm/dd/yyyy'}
138+
disabled={disabled}
139+
className={cn(
140+
'h-8 rounded-[10px] border-[#E5E5E5] bg-[#FFFFFF] text-sm dark:border-[#414141] dark:bg-[var(--surface-elevated)]',
141+
!isValid && 'border-red-300 focus:border-red-500 focus:ring-0'
142+
)}
143+
/>
147144
{showInlineError && !isValid && error && (
148145
<p className='mt-1 text-red-600 text-xs'>{error}</p>
149146
)}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-identifier-validation.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,4 @@ export function useIdentifierValidation(
8080
}, [identifier, originalIdentifier, isEditingExisting])
8181

8282
return { isChecking, error, isValid }
83-
}
83+
}

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

Lines changed: 14 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { Calendar, Hash, Plus, ToggleLeft, Trash2, Type as TypeIcon } from 'luci
55
import { Button } from '@/components/ui/button'
66
import { formatDisplayText } from '@/components/ui/formatted-text'
77
import { Input } from '@/components/ui/input'
8-
import { checkTagTrigger, TagDropdown } from '@/components/ui/tag-dropdown'
8+
import { TagDropdown } from '@/components/ui/tag-dropdown'
99
import { MAX_TAG_SLOTS } from '@/lib/knowledge/consts'
1010
import { cn } from '@/lib/utils'
11+
import { TypedTagInput } from '@/app/workspace/[workspaceId]/knowledge/components/tag-input/typed-tag-input'
1112
import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
1213
import type { SubBlockConfig } from '@/blocks/types'
1314
import { useKnowledgeBaseTagDefinitions } from '@/hooks/use-knowledge-base-tag-definitions'
@@ -278,8 +279,8 @@ export function DocumentTagEntry({
278279
const renderHeader = () => (
279280
<thead>
280281
<tr className='border-b'>
281-
<th className='w-2/5 border-r px-4 py-2 text-center font-medium text-sm'>Tag Name</th>
282-
<th className='w-1/5 border-r px-4 py-2 text-center font-medium text-sm'>Type</th>
282+
<th className='w-[35%] border-r px-4 py-2 text-center font-medium text-sm'>Tag Name</th>
283+
<th className='w-[65px] border-r px-4 py-2 text-center font-medium text-sm'>Type</th>
283284
<th className='px-4 py-2 text-center font-medium text-sm'>Value</th>
284285
</tr>
285286
</thead>
@@ -466,55 +467,18 @@ export function DocumentTagEntry({
466467

467468
const renderValueCell = (row: DocumentTagRow, rowIndex: number) => {
468469
const cellValue = row.cells.value || ''
470+
const fieldType = row.cells.type || 'text'
469471

470472
return (
471-
<td className='p-1'>
472-
<div className='relative w-full'>
473-
<Input
474-
value={cellValue}
475-
onChange={(e) => {
476-
const newValue = e.target.value
477-
const cursorPosition = e.target.selectionStart ?? 0
478-
479-
handleCellChange(rowIndex, 'value', newValue)
480-
481-
// Check for tag trigger
482-
const tagTrigger = checkTagTrigger(newValue, cursorPosition)
483-
484-
setActiveTagDropdown({
485-
rowIndex,
486-
showTags: tagTrigger.show,
487-
cursorPosition,
488-
activeSourceBlockId: null,
489-
element: e.target,
490-
})
491-
}}
492-
onFocus={(e) => {
493-
if (!disabled && !isConnecting) {
494-
setActiveTagDropdown({
495-
rowIndex,
496-
showTags: false,
497-
cursorPosition: 0,
498-
activeSourceBlockId: null,
499-
element: e.target,
500-
})
501-
}
502-
}}
503-
onBlur={() => {
504-
setTimeout(() => setActiveTagDropdown(null), 200)
505-
}}
506-
onKeyDown={(e) => {
507-
if (e.key === 'Escape') {
508-
setActiveTagDropdown(null)
509-
}
510-
}}
511-
disabled={disabled || isConnecting}
512-
className='w-full border-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
513-
/>
514-
<div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden bg-transparent px-3 text-sm'>
515-
<div className='whitespace-pre'>{formatDisplayText(cellValue)}</div>
516-
</div>
517-
</div>
473+
<td className='p-1 pr-12'>
474+
<TypedTagInput
475+
fieldType={fieldType}
476+
value={cellValue}
477+
onChange={(newValue) => handleCellChange(rowIndex, 'value', newValue)}
478+
disabled={disabled || isConnecting}
479+
showInlineError={true}
480+
className='w-full'
481+
/>
518482
</td>
519483
)
520484
}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx‎

Lines changed: 16 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { Button } from '@/components/ui/button'
66
import { formatDisplayText } from '@/components/ui/formatted-text'
77
import { Input } from '@/components/ui/input'
88
import { Label } from '@/components/ui/label'
9-
import { checkTagTrigger, TagDropdown } from '@/components/ui/tag-dropdown'
9+
import { TagDropdown } from '@/components/ui/tag-dropdown'
10+
import { TypedTagInput } from '@/app/workspace/[workspaceId]/knowledge/components/tag-input/typed-tag-input'
1011
import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
1112
import type { SubBlockConfig } from '@/blocks/types'
1213
import { useKnowledgeBaseTagDefinitions } from '@/hooks/use-knowledge-base-tag-definitions'
@@ -191,8 +192,8 @@ export function KnowledgeTagFilters({
191192
const renderHeader = () => (
192193
<thead>
193194
<tr className='border-b'>
194-
<th className='w-2/5 border-r px-4 py-2 text-center font-medium text-sm'>Tag Name</th>
195-
<th className='w-1/5 border-r px-4 py-2 text-center font-medium text-sm'>Type</th>
195+
<th className='w-[35%] border-r px-4 py-2 text-center font-medium text-sm'>Tag Name</th>
196+
<th className='w-[65px] border-r px-4 py-2 text-center font-medium text-sm'>Type</th>
196197
<th className='px-4 py-2 text-center font-medium text-sm'>Value</th>
197198
</tr>
198199
</thead>
@@ -309,60 +310,20 @@ export function KnowledgeTagFilters({
309310

310311
const renderValueCell = (row: TagFilterRow, rowIndex: number) => {
311312
const cellValue = row.cells.value || ''
313+
const tagName = row.cells.tagName || ''
314+
const def = tagDefinitions.find((d) => d.displayName.toLowerCase() === tagName.toLowerCase())
315+
const fieldType = def?.fieldType || 'text'
312316

313317
return (
314-
<td className='p-1'>
315-
<div className='relative w-full'>
316-
<Input
317-
value={cellValue}
318-
onChange={(e) => {
319-
const newValue = e.target.value
320-
const cursorPosition = e.target.selectionStart ?? 0
321-
322-
handleCellChange(rowIndex, 'value', newValue)
323-
324-
// Check for tag trigger
325-
const tagTrigger = checkTagTrigger(newValue, cursorPosition)
326-
327-
setActiveTagDropdown({
328-
rowIndex,
329-
showTags: tagTrigger.show,
330-
cursorPosition,
331-
activeSourceBlockId: null,
332-
element: e.target,
333-
})
334-
}}
335-
onFocus={(e) => {
336-
if (!disabled && !isConnecting) {
337-
setActiveTagDropdown({
338-
rowIndex,
339-
showTags: false,
340-
cursorPosition: 0,
341-
activeSourceBlockId: null,
342-
element: e.target,
343-
})
344-
}
345-
}}
346-
onBlur={() => {
347-
setTimeout(() => setActiveTagDropdown(null), 200)
348-
}}
349-
onKeyDown={(e) => {
350-
if (e.key === 'Escape') {
351-
setActiveTagDropdown(null)
352-
}
353-
}}
354-
disabled={disabled || isConnecting}
355-
className='w-full border-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
356-
/>
357-
<div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden bg-transparent px-3 text-sm'>
358-
<div className='whitespace-pre'>
359-
{formatDisplayText(cellValue, {
360-
accessiblePrefixes,
361-
highlightAll: !accessiblePrefixes,
362-
})}
363-
</div>
364-
</div>
365-
</div>
318+
<td className='p-1 pr-12'>
319+
<TypedTagInput
320+
fieldType={fieldType}
321+
value={cellValue}
322+
onChange={(newValue) => handleCellChange(rowIndex, 'value', newValue)}
323+
disabled={disabled || isConnecting}
324+
showInlineError={true}
325+
className='w-full'
326+
/>
366327
</td>
367328
)
368329
}

0 commit comments

Comments
 (0)