LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +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"
rounded="3xl"
buttonDarkBackgroundColor="[#222327]"
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"
placeholderTextColor="gray-400"
darkPlaceholderTextColor="silver"
placeholderClassName="text-gray-400 dark:text-silver"
contentSize="text-sm"
/>
</div>
@@ -479,12 +478,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
}
size="w-full"
rounded="3xl"
buttonDarkBackgroundColor="[#222327]"
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"
placeholderTextColor="gray-400"
darkPlaceholderTextColor="silver"
contentSize="text-sm"
/>
</div>
@@ -548,12 +546,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
}
size="w-full"
rounded="3xl"
buttonDarkBackgroundColor="[#222327]"
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"
placeholderTextColor="gray-400"
darkPlaceholderTextColor="silver"
placeholderClassName="text-gray-400 dark:text-silver"
contentSize="text-sm"
/>
</div>

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

@@ -10,20 +10,15 @@ function Dropdown({
onSelect,
size = 'w-32',
rounded = 'xl',
buttonBackgroundColor = 'white',
buttonDarkBackgroundColor = 'transparent',
optionsBackgroundColor = 'white',
optionsDarkBackgroundColor = 'dark-charcoal',
buttonClassName = 'border-silver bg-white dark:bg-transparent dark:border-dim-gray',
optionsClassName = 'border-silver bg-white dark:border-dim-gray dark:bg-dark-charcoal',
border = 'border-2',
borderColor = 'silver',
darkBorderColor = 'dim-gray',
showEdit,
onEdit,
showDelete,
onDelete,
placeholder,
placeholderTextColor = 'gray-500',
darkPlaceholderTextColor = 'gray-400',
placeholderClassName = 'text-gray-500 dark:text-gray-400',
contentSize = 'text-base',
}: {
options:
@@ -44,20 +39,15 @@ function Dropdown({
| ((value: { value: number; description: string }) => void);
size?: string;
rounded?: 'xl' | '3xl';
buttonBackgroundColor?: string;
buttonDarkBackgroundColor?: string;
optionsBackgroundColor?: string;
optionsDarkBackgroundColor?: string;
buttonClassName?: string;
optionsClassName?: string;
border?: 'border' | 'border-2';
borderColor?: string;
darkBorderColor?: string;
showEdit?: boolean;
onEdit?: (value: { name: string; id: string; type: string }) => void;
showDelete?: boolean | ((option: any) => boolean);
onDelete?: (value: string) => void;
placeholder?: string;
placeholderTextColor?: string;
darkPlaceholderTextColor?: string;
placeholderClassName?: string;
contentSize?: string;
}) {
const dropdownRef = React.useRef<HTMLDivElement>(null);
@@ -80,6 +70,7 @@ function Dropdown({
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return (
<div
className={[
@@ -92,7 +83,7 @@ function Dropdown({
>
<button
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}`
}`}
>
@@ -103,8 +94,7 @@ function Dropdown({
) : (
<span
className={`truncate ${selectedValue && `dark:text-bright-gray`} ${
!selectedValue &&
`text-${placeholderTextColor} dark:text-${darkPlaceholderTextColor}`
!selectedValue && ` ${placeholderClassName}`
} ${contentSize}`}
>
{selectedValue && 'label' in selectedValue
@@ -130,7 +120,7 @@ function Dropdown({
</button>
{isOpen && (
<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) => (
<div

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

@@ -150,7 +150,10 @@ function Upload({
rounded="3xl"
placeholder={field.label}
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':
@@ -651,7 +654,6 @@ function Upload({
{activeTab === 'remote' && (
<>
<Dropdown
border="border"
options={urlOptions}
selectedValue={
urlOptions.find((opt) => opt.value === ingestor.type) || null
@@ -660,8 +662,10 @@ function Upload({
handleIngestorTypeChange(selected.value as IngestorType)
}
size="w-full"
darkBorderColor="dim-gray"
rounded="3xl"
border="border"
placeholder="Select ingestor type"
placeholderClassName="text-gray-400 dark:text-silver"
/>
{/* Dynamically render form fields based on schema */}