mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-23 06:46:40 +08:00
Feat: Configure colors according to the design draft#3221 (#9301)
### What problem does this PR solve? Feat: Configure colors according to the design draft#3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
@ -58,7 +58,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
|
||||
<HoverCardTrigger>
|
||||
<div
|
||||
key={tag}
|
||||
className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-background-card"
|
||||
className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-bg-card"
|
||||
>
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="max-w-80 overflow-hidden text-ellipsis">
|
||||
@ -90,7 +90,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
className="h-8 bg-background-card"
|
||||
className="h-8 bg-bg-card"
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onBlur={handleInputConfirm}
|
||||
@ -103,7 +103,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
|
||||
) : (
|
||||
<Button
|
||||
variant="dashed"
|
||||
className="w-fit flex items-center justify-center gap-2 bg-background-card"
|
||||
className="w-fit flex items-center justify-center gap-2 bg-bg-card"
|
||||
onClick={showInput}
|
||||
style={tagPlusStyle}
|
||||
>
|
||||
|
||||
@ -226,7 +226,7 @@ function MessageItem({
|
||||
? styles.messageTextDark
|
||||
: styles.messageText]: isAssistant,
|
||||
[styles.messageUserText]: !isAssistant,
|
||||
'bg-background-card': !isAssistant,
|
||||
'bg-bg-card': !isAssistant,
|
||||
})}
|
||||
>
|
||||
{item.data ? (
|
||||
|
||||
@ -11,7 +11,7 @@ const badgeVariants = cva(
|
||||
default:
|
||||
'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
||||
secondary:
|
||||
'border-transparent bg-background-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
|
||||
'border-transparent bg-bg-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
|
||||
destructive:
|
||||
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
||||
outline: 'text-foreground',
|
||||
|
||||
@ -15,8 +15,7 @@ const buttonVariants = cva(
|
||||
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||
outline:
|
||||
'border border-text-sub-title-invert bg-transparent hover:bg-accent hover:text-accent-foreground',
|
||||
secondary:
|
||||
'bg-background-card text-secondary-foreground hover:bg-secondary/80',
|
||||
secondary: 'bg-bg-card text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
tertiary:
|
||||
@ -52,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
return (
|
||||
<Comp
|
||||
className={cn(
|
||||
'bg-background-card',
|
||||
'bg-bg-card',
|
||||
buttonVariants({ variant, size, className }),
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@ -8,10 +8,7 @@ const Card = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'rounded-lg bg-background-card text-card-foreground shadow-sm',
|
||||
className,
|
||||
)}
|
||||
className={cn('rounded-lg bg-bg-card shadow-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
@ -8,7 +8,7 @@ const Table = React.forwardRef<
|
||||
>(({ className, rootClassName, ...props }, ref) => (
|
||||
<div
|
||||
className={cn(
|
||||
'relative w-full overflow-auto rounded-2xl bg-background-card',
|
||||
'relative w-full overflow-auto rounded-2xl bg-bg-card',
|
||||
rootClassName,
|
||||
)}
|
||||
>
|
||||
|
||||
@ -1028,7 +1028,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
|
||||
'30d': '30 days',
|
||||
},
|
||||
publish: 'API',
|
||||
exeSQL: 'ExeSQL',
|
||||
exeSQL: 'Execute SQL',
|
||||
exeSQLDescription:
|
||||
'A component that performs SQL queries on a relational database, supporting querying from MySQL, PostgreSQL, or MariaDB.',
|
||||
dbType: 'Database Type',
|
||||
|
||||
@ -83,12 +83,12 @@ function InnerAgentNode({
|
||||
></Handle>
|
||||
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
|
||||
<section className="flex flex-col gap-2">
|
||||
<div className={'bg-background-card rounded-sm p-1'}>
|
||||
<div className={'bg-bg-card rounded-sm p-1'}>
|
||||
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
|
||||
</div>
|
||||
{(isGotoMethod ||
|
||||
exceptionMethod === AgentExceptionMethod.Comment) && (
|
||||
<div className="bg-background-card rounded-sm p-1 flex justify-between gap-2">
|
||||
<div className="bg-bg-card rounded-sm p-1 flex justify-between gap-2">
|
||||
<span className="text-text-sub-title">On Failure</span>
|
||||
<span className="truncate flex-1 text-right">
|
||||
{t(`flow.${exceptionMethod}`)}
|
||||
|
||||
@ -31,13 +31,13 @@ export function InnerCategorizeNode({
|
||||
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
|
||||
|
||||
<section className="flex flex-col gap-2">
|
||||
<div className={'bg-background-card rounded-sm px-1'}>
|
||||
<div className={'bg-bg-card rounded-sm px-1'}>
|
||||
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
|
||||
</div>
|
||||
{positions.map((position) => {
|
||||
return (
|
||||
<div key={position.uuid}>
|
||||
<div className={'bg-background-card rounded-sm p-1 truncate'}>
|
||||
<div className={'bg-bg-card rounded-sm p-1 truncate'}>
|
||||
{position.name}
|
||||
</div>
|
||||
<CommonHandle
|
||||
|
||||
@ -42,7 +42,7 @@ function OperatorItemList({ operators }: OperatorItemProps) {
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuItem
|
||||
key={x}
|
||||
className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
|
||||
className="hover:bg-bg-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
|
||||
onClick={addCanvasNode(x, {
|
||||
nodeId,
|
||||
id,
|
||||
|
||||
@ -145,7 +145,7 @@ function EmbedDialog({
|
||||
{t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
|
||||
<span className="ml-1 inline-block">ID</span>
|
||||
</div>
|
||||
<div className="bg-background-card rounded-lg flex justify-between p-2">
|
||||
<div className="bg-bg-card rounded-lg flex justify-between p-2">
|
||||
<span>{token} </span>
|
||||
<CopyToClipboard text={token}></CopyToClipboard>
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,7 @@ export function ToolCard({
|
||||
<li
|
||||
{...props}
|
||||
className={cn(
|
||||
'flex bg-background-card p-1 rounded-sm justify-between',
|
||||
'flex bg-bg-card p-1 rounded-sm justify-between',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
||||
@ -133,7 +133,7 @@ function ConditionCards({
|
||||
},
|
||||
)}
|
||||
>
|
||||
<section className="p-2 bg-background-card flex justify-between items-center">
|
||||
<section className="p-2 bg-bg-card flex justify-between items-center">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`${name}.${index}.cpn_id`}
|
||||
|
||||
@ -135,7 +135,7 @@ const ToolTimelineItem = ({
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="bg-background-card px-3"
|
||||
className="bg-bg-card px-3"
|
||||
>
|
||||
<AccordionItem value={idx.toString()}>
|
||||
<AccordionTrigger
|
||||
|
||||
@ -254,7 +254,7 @@ export const WorkFlowTimeline = ({
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="bg-background-card px-3"
|
||||
className="bg-bg-card px-3"
|
||||
>
|
||||
<AccordionItem value={idx.toString()}>
|
||||
<AccordionTrigger
|
||||
|
||||
@ -61,7 +61,7 @@ export default ({
|
||||
};
|
||||
return (
|
||||
<div className="flex pr-[25px]">
|
||||
<div className="flex items-center gap-4 bg-background-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
|
||||
<div className="flex items-center gap-4 bg-bg-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
|
||||
{textSelectOptions.map((option) => (
|
||||
<div
|
||||
key={option.value}
|
||||
@ -76,7 +76,7 @@ export default ({
|
||||
</div>
|
||||
<div className="ml-auto"></div>
|
||||
<Input
|
||||
className="bg-background-card text-muted-foreground"
|
||||
className="bg-bg-card text-muted-foreground"
|
||||
style={{ width: 200 }}
|
||||
placeholder={t('search')}
|
||||
icon={<SearchOutlined />}
|
||||
@ -86,7 +86,7 @@ export default ({
|
||||
<div className="w-[20px]"></div>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="bg-background-card text-muted-foreground hover:bg-card">
|
||||
<Button className="bg-bg-card text-muted-foreground hover:bg-card">
|
||||
<ListFilter />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
@ -95,10 +95,7 @@ export default ({
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<div className="w-[20px]"></div>
|
||||
<Button
|
||||
onClick={() => createChunk()}
|
||||
className="bg-background-card text-primary"
|
||||
>
|
||||
<Button onClick={() => createChunk()} className="bg-bg-card text-primary">
|
||||
<Plus size={44} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -84,7 +84,7 @@ export function SideBar({ refreshCount }: PropType) {
|
||||
className={cn(
|
||||
'w-full justify-start gap-2.5 px-3 relative h-10 text-text-sub-title-invert',
|
||||
{
|
||||
'bg-background-card': active,
|
||||
'bg-bg-card': active,
|
||||
'text-text-title': active,
|
||||
},
|
||||
)}
|
||||
|
||||
@ -40,7 +40,7 @@ export function Sessions({ handleConversationCardClick }: SessionProps) {
|
||||
key={x.id}
|
||||
onClick={handleCardClick(x.id, x.is_new)}
|
||||
className={cn('cursor-pointer bg-transparent', {
|
||||
'bg-background-card': conversationId === x.id,
|
||||
'bg-bg-card': conversationId === x.id,
|
||||
})}
|
||||
>
|
||||
<CardContent className="px-3 py-2 flex justify-between items-center group">
|
||||
|
||||
Reference in New Issue
Block a user