LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

(fix/ddropdown) use complete classNames, interpolation

Browse Source
This commit is contained in:
ManishMadan2882
2025-06-25 18:26:33 +05:30
parent ecec9f913e
commit 50ed2a64c6
3 changed files with 26 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/agents/NewAgent.tsx
View File

@@ -447,12 +447,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
} }
size="w-full" size="w-full"
rounded="3xl" rounded="3xl"
buttonDarkBackgroundColor="[#222327]"
border="border" border="border"
darkBorderColor="[#7E7E7E]" buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E]"
placeholder="Chunks per query" placeholder="Chunks per query"
placeholderTextColor="gray-400" placeholderClassName="text-gray-400 dark:text-silver"
darkPlaceholderTextColor="silver"
contentSize="text-sm" contentSize="text-sm"
/> />
</div> </div>
@@ -479,12 +478,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
} }
size="w-full" size="w-full"
rounded="3xl" rounded="3xl"
buttonDarkBackgroundColor="[#222327]"
border="border" border="border"
darkBorderColor="[#7E7E7E]" buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E] dark:border-[#7E7E7E] dark:bg-dark-charcoal"
placeholderClassName="text-gray-400 dark:text-silver"
placeholder="Select a prompt" placeholder="Select a prompt"
placeholderTextColor="gray-400"
darkPlaceholderTextColor="silver"
contentSize="text-sm" contentSize="text-sm"
/> />
</div> </div>
@@ -548,12 +546,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
} }
size="w-full" size="w-full"
rounded="3xl" rounded="3xl"
buttonDarkBackgroundColor="[#222327]"
border="border" border="border"
darkBorderColor="[#7E7E7E]" buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E]"
placeholder="Select type" placeholder="Select type"
placeholderTextColor="gray-400" placeholderClassName="text-gray-400 dark:text-silver"
darkPlaceholderTextColor="silver"
contentSize="text-sm" contentSize="text-sm"
/> />
</div> </div>

30
frontend/src/components/Dropdown.tsx
View File

@@ -10,20 +10,15 @@ function Dropdown({
onSelect, onSelect,
size = 'w-32', size = 'w-32',
rounded = 'xl', rounded = 'xl',
buttonBackgroundColor = 'white', buttonClassName = 'border-silver bg-white dark:bg-transparent dark:border-dim-gray',
buttonDarkBackgroundColor = 'transparent', optionsClassName = 'border-silver bg-white dark:border-dim-gray dark:bg-dark-charcoal',
optionsBackgroundColor = 'white',
optionsDarkBackgroundColor = 'dark-charcoal',
border = 'border-2', border = 'border-2',
borderColor = 'silver',
darkBorderColor = 'dim-gray',
showEdit, showEdit,
onEdit, onEdit,
showDelete, showDelete,
onDelete, onDelete,
placeholder, placeholder,
placeholderTextColor = 'gray-500', placeholderClassName = 'text-gray-500 dark:text-gray-400',
darkPlaceholderTextColor = 'gray-400',
contentSize = 'text-base', contentSize = 'text-base',
}: { }: {
options: options:
@@ -44,20 +39,15 @@ function Dropdown({
| ((value: { value: number; description: string }) => void); | ((value: { value: number; description: string }) => void);
size?: string; size?: string;
rounded?: 'xl' | '3xl'; rounded?: 'xl' | '3xl';
buttonBackgroundColor?: string; buttonClassName?: string;
buttonDarkBackgroundColor?: string; optionsClassName?: string;
optionsBackgroundColor?: string;
optionsDarkBackgroundColor?: string;
border?: 'border' | 'border-2'; border?: 'border' | 'border-2';
borderColor?: string;
darkBorderColor?: string;
showEdit?: boolean; showEdit?: boolean;
onEdit?: (value: { name: string; id: string; type: string }) => void; onEdit?: (value: { name: string; id: string; type: string }) => void;
showDelete?: boolean | ((option: any) => boolean); showDelete?: boolean | ((option: any) => boolean);
onDelete?: (value: string) => void; onDelete?: (value: string) => void;
placeholder?: string; placeholder?: string;
placeholderTextColor?: string; placeholderClassName?: string;
darkPlaceholderTextColor?: string;
contentSize?: string; contentSize?: string;
}) { }) {
const dropdownRef = React.useRef<HTMLDivElement>(null); const dropdownRef = React.useRef<HTMLDivElement>(null);
@@ -80,6 +70,7 @@ function Dropdown({
document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('mousedown', handleClickOutside);
}; };
}, []); }, []);
return ( return (
<div <div
className={[ className={[
@@ -92,7 +83,7 @@ function Dropdown({
> >
<button <button
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-${buttonBackgroundColor} px-5 py-3 dark:border-${darkBorderColor} dark:bg-${buttonDarkBackgroundColor} ${ className={`flex w-full cursor-pointer items-center justify-between ${border} ${buttonClassName} px-5 py-3 ${
isOpen ? `${borderTopRadius}` : `${borderRadius}` isOpen ? `${borderTopRadius}` : `${borderRadius}`
}`} }`}
> >
@@ -103,8 +94,7 @@ function Dropdown({
) : ( ) : (
<span <span
className={`truncate ${selectedValue && `dark:text-bright-gray`} ${ className={`truncate ${selectedValue && `dark:text-bright-gray`} ${
!selectedValue && !selectedValue && ` ${placeholderClassName}`
`text-${placeholderTextColor} dark:text-${darkPlaceholderTextColor}`
} ${contentSize}`} } ${contentSize}`}
> >
{selectedValue && 'label' in selectedValue {selectedValue && 'label' in selectedValue
@@ -130,7 +120,7 @@ function Dropdown({
</button> </button>
{isOpen && ( {isOpen && (
<div <div
className={`absolute right-0 left-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-${optionsBackgroundColor} shadow-lg dark:border-${darkBorderColor} dark:bg-${optionsDarkBackgroundColor}`} className={`absolute right-0 left-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} ${optionsClassName} shadow-lg`}
> >
{options.map((option: any, index) => ( {options.map((option: any, index) => (
<div <div

10
frontend/src/upload/Upload.tsx
View File

@@ -150,7 +150,10 @@ function Upload({
rounded="3xl" rounded="3xl"
placeholder={field.label} placeholder={field.label}
border="border" border="border"
borderColor="gray-5000" buttonClassName="border-silver bg-white dark:border-dim-gray dark:bg-[#222327]"
optionsClassName="border-silver bg-white dark:border-dim-gray dark:bg-[#383838]"
placeholderClassName="text-gray-400 dark:text-silver"
contentSize="text-sm"
/> />
); );
case 'boolean': case 'boolean':
@@ -651,7 +654,6 @@ function Upload({
{activeTab === 'remote' && ( {activeTab === 'remote' && (
<> <>
<Dropdown <Dropdown
border="border"
options={urlOptions} options={urlOptions}
selectedValue={ selectedValue={
urlOptions.find((opt) => opt.value === ingestor.type) || null urlOptions.find((opt) => opt.value === ingestor.type) || null
@@ -660,8 +662,10 @@ function Upload({
handleIngestorTypeChange(selected.value as IngestorType) handleIngestorTypeChange(selected.value as IngestorType)
} }
size="w-full" size="w-full"
darkBorderColor="dim-gray"
rounded="3xl" rounded="3xl"
border="border"
placeholder="Select ingestor type"
placeholderClassName="text-gray-400 dark:text-silver"
/> />
{/* Dynamically render form fields based on schema */} {/* Dynamically render form fields based on schema */}