pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 12:32:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Modify the background color of the agent canvas #3221 (#9020)

Browse Source 
### What problem does this PR solve?

Feat: Modify the background color of the agent canvas #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-07-24 11:20:00 +08:00
committed by GitHub
parent 34c35cf8ae
commit 3db819f011
14 changed files with 68 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/collapse.tsx
View File

@ -17,7 +17,7 @@ export function Collapse({
children,
rightContent,
open,
defaultOpen = true,
defaultOpen = false,
onOpenChange,
disabled,
}: CollapseProps) {

1
web/src/components/cross-language-form-field.tsx
View File

@ -57,6 +57,7 @@ export const CrossLanguageFormField = ({
maxCount={100}
{...field}
onValueChange={field.onChange}
defaultValue={field.value}
modalPopover
/>
</FormControl>

2
web/src/components/page-header.tsx
View File

@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
export function PageHeader({ children }: PropsWithChildren) {
return (
<header className="flex justify-between items-center border-b bg-background-header-bar p-5">
<header className="flex justify-between items-center border-b bg-text-title-invert p-5">
{children}
</header>
);

2
web/src/components/ui/sheet.tsx
View File

@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva(
'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
'fixed z-50 gap-4 bg-text-title-invert rounded-lg p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
{
variants: {
side: {

2
web/src/pages/agent/canvas/node/node-wrapper.tsx
View File

@ -7,7 +7,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
return (
<section
className={cn(
'bg-background-header-bar p-2.5 rounded-md w-[200px] text-xs',
'bg-text-title-invert p-2.5 rounded-md w-[200px] text-xs',
{ 'border border-background-checked': selected },
className,
)}

38
web/src/pages/agent/canvas/node/note-node/index.tsx
View File

@ -18,12 +18,16 @@ import { useTranslation } from 'react-i18next';
import { z } from 'zod';
import { NodeWrapper } from '../node-wrapper';
import { ResizeIcon, controlStyle } from '../resize-icon';
import { useChangeName, useWatchFormChange } from './use-watch-change';
import { useWatchFormChange, useWatchNameFormChange } from './use-watch-change';
const FormSchema = z.object({
text: z.string(),
});
const NameFormSchema = z.object({
name: z.string(),
});
function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
const { t } = useTranslation();
@ -32,10 +36,15 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
defaultValues: data.form,
});
const { handleChangeName } = useChangeName(id);
const nameForm = useForm<z.infer<typeof NameFormSchema>>({
resolver: zodResolver(NameFormSchema),
defaultValues: { name: data.name },
});
useWatchFormChange(id, form);
useWatchNameFormChange(id, nameForm);
return (
<NodeWrapper
className="p-0 w-full h-full flex flex-col rounded-md "
@ -46,14 +55,29 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
</NodeResizeControl>
<section className="px-1 py-2 flex gap-2 bg-background-highlight items-center note-drag-handle rounded-s-md">
<NotebookPen className="size-4" />
<Form {...nameForm}>
<form>
<FormField
control={nameForm.control}
name="name"
render={({ field }) => (
<FormItem className="h-full">
<FormControl>
<Input
placeholder={t('flow.notePlaceholder')}
{...field}
type="text"
defaultValue={data.name}
onChange={handleChangeName}
></Input>
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
</section>
<Form {...form}>
<form className="flex-1">
<form className="flex-1 p-1">
<FormField
control={form.control}
name="text"
@ -62,7 +86,7 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
<FormControl>
<Textarea
placeholder={t('flow.notePlaceholder')}
className="resize-none rounded-none p-1 h-full overflow-auto bg-background-header-bar"
className="resize-none rounded-none p-1 h-full overflow-auto bg-background-header-bar focus-visible:ring-0 border-none"
{...field}
/>
</FormControl>

19
web/src/pages/agent/canvas/node/note-node/use-watch-change.ts
View File

@ -1,5 +1,5 @@
import useGraphStore from '@/pages/agent/store';
import { useCallback, useEffect } from 'react';
import { useEffect } from 'react';
import { UseFormReturn, useWatch } from 'react-hook-form';
export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
@ -17,15 +17,14 @@ export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
}, [id, updateNodeForm, values]);
}
export function useChangeName(id: string) {
export function useWatchNameFormChange(id?: string, form?: UseFormReturn<any>) {
let values = useWatch({ control: form?.control });
const updateNodeName = useGraphStore((state) => state.updateNodeName);
const handleChangeName = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
updateNodeName(id, e.target.value.trim());
},
[id, updateNodeName],
);
return { handleChangeName };
useEffect(() => {
// Manually triggered form updates are synchronized to the canvas
if (id) {
updateNodeName(id, values.name);
}
}, [id, updateNodeName, values]);
}

1
web/src/pages/agent/chat/box.tsx
View File

@ -105,7 +105,6 @@ const AgentChatBox = () => {
<div ref={ref} />
</div>
<MessageInput
showUploadIcon={false}
value={value}
sendLoading={sendLoading}
disabled={false}

2
web/src/pages/agent/components/background.tsx
View File

@ -2,6 +2,6 @@ import { Background } from '@xyflow/react';
export function AgentBackground() {
return (
<Background color="rgba(255,255,255,0.15)" bgColor="rgba(22, 22, 24, 1)" />
<Background color="rgba(255,255,255,0.15)" bgColor="rgba(11, 11, 12, 1)" />
);
}

10
web/src/pages/agent/form/retrieval-form/next.tsx
View File

@ -22,6 +22,7 @@ import { z } from 'zod';
import { initialRetrievalValues } from '../../constant';
import { useWatchFormChange } from '../../hooks/use-watch-form-change';
import { INextOperatorForm } from '../../interface';
import { FormWrapper } from '../components/form-wrapper';
import { Output } from '../components/output';
import { QueryVariable } from '../components/query-variable';
import { useValues } from './use-values';
@ -92,12 +93,7 @@ function RetrievalForm({ node }: INextOperatorForm) {
return (
<Form {...form}>
<form
className="space-y-6 p-4"
onSubmit={(e) => {
e.preventDefault();
}}
>
<FormWrapper>
<FormContainer>
<QueryVariable></QueryVariable>
<KnowledgeBaseFormField></KnowledgeBaseFormField>
@ -114,7 +110,7 @@ function RetrievalForm({ node }: INextOperatorForm) {
<UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
</FormContainer>
<Output list={outputList}></Output>
</form>
</FormWrapper>
</Form>
);
}

8
web/src/pages/agents/index.tsx
View File

@ -32,7 +32,7 @@ export default function Agent() {
);
return (
<section>
<section className="flex flex-col w-full flex-1">
<div className="px-8 pt-8 ">
<ListFilterBar
title="Agents"
@ -45,7 +45,8 @@ export default function Agent() {
</Button>
</ListFilterBar>
</div>
<div className="flex flex-wrap gap-4 max-h-[78vh] overflow-auto px-8">
<div className="flex-1 overflow-auto">
<div className="flex flex-wrap gap-4 px-8">
{data.map((x) => {
return (
<AgentCard
@ -56,7 +57,8 @@ export default function Agent() {
);
})}
</div>
<div className="mt-8 px-8">
</div>
<div className="mt-8 px-8 pb-8">
<RAGFlowPagination
{...pick(pagination, 'current', 'pageSize')}
total={pagination.total}

1
web/tailwind.config.js
View File

@ -52,7 +52,6 @@ module.exports = {
'background-card': 'var(--background-card)',
'background-checked': 'var(--background-checked)',
'background-highlight': 'var(--background-highlight)',
'background-agent': 'var(--background-agent)',
'input-border': 'var(--input-border)',
'dot-green': 'var(--dot-green)',

1
web/tailwind.css
View File

@ -199,7 +199,6 @@
--background-checked: rgba(76, 164, 231, 1);
--background-highlight: rgba(76, 164, 231, 0.1);
--background-agent: rgba(22, 22, 24, 1);
--input-border: rgba(255, 255, 255, 0.2);