youngkingdom/ragflow
1
0
Fork 0
mirror of https://github.com/infiniflow/ragflow.git synced 2026-03-06 08:06:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): adjust global navigation bar style (#13419)

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

Renovate global navigation bar, align styles to the design.
(May causes minor layout issues in sub-pages, will check and fix soon)

### Type of change

- [x] Refactoring
This commit is contained in:
Jimmy Ben Klieve
2026-03-05 20:47:29 +08:00
committed by GitHub
parent 9e0e128ce5
commit ef4cbe72a3
45 changed files with 1334 additions and 1250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/.eslintrc.cjs
View File

@ -14,6 +14,9 @@ module.exports = {
jsx: true,
},
},
includes: [
'./src',
],
settings: {
react: {
version: 'detect',

11
web/src/app.tsx
View File

@ -3,7 +3,7 @@ import { Toaster } from '@/components/ui/toaster';
import i18n, { changeLanguageAsync } from '@/locales/config';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { configResponsive } from 'ahooks';
import { App, ConfigProvider, ConfigProviderProps, theme } from 'antd';
import { ConfigProvider, ConfigProviderProps, theme } from 'antd';
import pt_BR from 'antd/lib/locale/pt_BR';
import arEG from 'antd/locale/ar_EG';
import deDE from 'antd/locale/de_DE';
@ -22,7 +22,6 @@ import weekday from 'dayjs/plugin/weekday';
import React, { useEffect, useState } from 'react';
import { RouterProvider } from 'react-router';
import { ThemeProvider, useTheme } from './components/theme-provider';
import { SidebarProvider } from './components/ui/sidebar';
import { TooltipProvider } from './components/ui/tooltip';
import { ThemeEnum } from './constants/common';
import { routers } from './routes';
@ -125,10 +124,10 @@ function Root({ children }: React.PropsWithChildren) {
}}
locale={locale}
>
<SidebarProvider className="h-full">
<App className="w-full h-dvh relative">{children}</App>
</SidebarProvider>
<Sonner position={'top-right'} expand richColors closeButton></Sonner>
{children}
<Sonner position="top-right" expand richColors closeButton />
<Toaster />
</ConfigProvider>
</>

109
web/src/components/embed-dialog/index.tsx
View File

@ -1,5 +1,4 @@
import CopyToClipboard from '@/components/copy-to-clipboard';
import HighLightMarkdown from '@/components/highlight-markdown';
import { SelectWithSearch } from '@/components/originui/select-with-search';
import { Button } from '@/components/ui/button';
import {
@ -32,7 +31,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
import { ExternalLink } from 'lucide-react';
import { memo, useCallback, useMemo } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import {
oneDark,
oneLight,
} from 'react-syntax-highlighter/dist/esm/styles/prism';
import { z } from 'zod';
import { useIsDarkTheme } from '../theme-provider';
const FormSchema = z.object({
visibleAvatar: z.boolean(),
@ -56,8 +61,10 @@ function EmbedDialog({
from,
beta = '',
isAgent,
visible,
}: IProps) {
const { t } = useTranslate('chat');
const isDarkTheme = useIsDarkTheme();
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
@ -95,23 +102,30 @@ function EmbedDialog({
: from === SharedFrom.Agent
? Routes.AgentShare
: Routes.ChatShare;
let src = `${location.origin}${baseRoute}?shared_id=${token}&from=${from}&auth=${beta}`;
const src = new URL(`${location.origin}${baseRoute}`);
src.searchParams.append('shared_id', token);
src.searchParams.append('from', from);
src.searchParams.append('auth', beta);
if (publishAvatar) {
src += '&release=true';
src.searchParams.append('release', 'true');
}
if (visibleAvatar) {
src += '&visible_avatar=1';
src.searchParams.append('visible_avatar', '1');
}
if (locale) {
src += `&locale=${locale}`;
src.searchParams.append('locale', locale);
}
if (enableStreaming) {
src += '&streaming=true';
if (embedType === 'widget') {
src.searchParams.append('mode', 'master');
src.searchParams.append('streaming', String(enableStreaming));
}
if (theme && embedType === 'fullscreen') {
src += `&theme=${theme}`;
src.searchParams.append('theme', theme);
}
return src;
return src.toString();
}, [beta, from, token, values]);
const text = useMemo(() => {
@ -119,44 +133,36 @@ function EmbedDialog({
const { embedType } = values;
if (embedType === 'widget') {
const { enableStreaming } = values;
const streamingParam = enableStreaming
? '&streaming=true'
: '&streaming=false';
return `
~~~ html
<iframe src="${iframeSrc}&mode=master${streamingParam}"
style="position:fixed;bottom:0;right:0;width:100px;height:100px;border:none;background:transparent;z-index:9999"
frameborder="0" allow="microphone;camera"></iframe>
<script>
window.addEventListener('message',e=>{
if(e.origin!=='${location.origin.replace(/:\d+/, ':9222')}')return;
if(e.data.type==='CREATE_CHAT_WINDOW'){
if(document.getElementById('chat-win'))return;
const i=document.createElement('iframe');
i.id='chat-win';i.src=e.data.src;
i.style.cssText='position:fixed;bottom:104px;right:24px;width:380px;height:500px;border:none;background:transparent;z-index:9998;display:none';
i.frameBorder='0';i.allow='microphone;camera';
document.body.appendChild(i);
}else if(e.data.type==='TOGGLE_CHAT'){
const w=document.getElementById('chat-win');
if(w)w.style.display=e.data.isOpen?'block':'none';
}else if(e.data.type==='SCROLL_PASSTHROUGH')window.scrollBy(0,e.data.deltaY);
});
</script>
~~~
`;
return `<iframe
src="${iframeSrc}"
style="position:fixed;bottom:0;right:0;width:100px;height:100px;border:none;background:transparent;z-index:9999"
frameborder="0"
allow="microphone;camera"
></iframe>
<script>
window.addEventListener('message',e=>{
if(e.origin!=='${location.origin.replace(/:\d+/, ':9222')}')return;
if(e.data.type==='CREATE_CHAT_WINDOW'){
if(document.getElementById('chat-win'))return;
const i=document.createElement('iframe');
i.id='chat-win';i.src=e.data.src;
i.style.cssText='position:fixed;bottom:104px;right:24px;width:380px;height:500px;border:none;background:transparent;z-index:9998;display:none';
i.frameBorder='0';i.allow='microphone;camera';
document.body.appendChild(i);
}else if(e.data.type==='TOGGLE_CHAT'){
const w=document.getElementById('chat-win');
if(w)w.style.display=e.data.isOpen?'block':'none';
}else if(e.data.type==='SCROLL_PASSTHROUGH')window.scrollBy(0,e.data.deltaY);
});
</script>
`;
} else {
return `
~~~ html
<iframe
return `<iframe
src="${iframeSrc}"
style="width: 100%; height: 100%; min-height: 600px"
frameborder="0"
>
</iframe>
~~~
`;
></iframe>
`;
}
}, [generateIframeSrc, values]);
@ -166,13 +172,14 @@ function EmbedDialog({
}, [generateIframeSrc]);
return (
<Dialog open onOpenChange={hideModal}>
<Dialog open={visible} onOpenChange={hideModal}>
<DialogContent>
<DialogHeader>
<DialogTitle>
{t('embedIntoSite', { keyPrefix: 'common' })}
</DialogTitle>
</DialogHeader>
<section className="w-full overflow-auto space-y-5 text-sm text-text-secondary">
<Form {...form}>
<form className="space-y-5">
@ -309,10 +316,16 @@ function EmbedDialog({
/>
</form>
</Form>
<div className="max-h-[350px] overflow-auto">
<div>
<span>{t('embedCode', { keyPrefix: 'search' })}</span>
<div className="max-h-full overflow-y-auto">
<HighLightMarkdown>{text}</HighLightMarkdown>
<div>
<SyntaxHighlighter
className="max-h-[350px] overflow-auto scrollbar-auto"
language="html"
style={isDarkTheme ? oneDark : oneLight}
>
{text}
</SyntaxHighlighter>
</div>
</div>
<Button
@ -327,7 +340,7 @@ function EmbedDialog({
{t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
<span className="ml-1 inline-block">ID</span>
</div>
<div className="bg-bg-card rounded-lg flex justify-between p-2">
<div className="bg-bg-card rounded-lg flex items-center justify-between p-2">
<span>{token} </span>
<CopyToClipboard text={token}></CopyToClipboard>
</div>

7
web/src/components/form-container.tsx
View File

@ -12,7 +12,12 @@ export function FormContainer({
className,
}: FormContainerProps) {
return show ? (
<section className={cn('border rounded-lg p-5 space-y-5', className)}>
<section
className={cn(
'border-0.5 border-border-button rounded-lg p-5 space-y-5',
className,
)}
>
{children}
</section>
) : (

2
web/src/components/highlight-markdown/index.tsx
View File

@ -19,8 +19,10 @@ import { useIsDarkTheme } from '../theme-provider';
import styles from './index.module.less';
const HighLightMarkdown = ({
className,
children,
}: {
className?: string;
children: string | null | undefined;
}) => {
const isDarkTheme = useIsDarkTheme();

12
web/src/components/list-filter-bar/index.tsx
View File

@ -25,7 +25,12 @@ export const FilterButton = React.forwardRef<
ButtonProps & { count?: number }
>(({ count = 0, ...props }, ref) => {
return (
<Button variant="secondary" {...props} ref={ref}>
<Button
variant="outline"
size={count > 0 ? 'default' : 'icon'}
{...props}
ref={ref}
>
{/* <span
className={cn({
'text-text-primary': count > 0,
@ -34,12 +39,13 @@ export const FilterButton = React.forwardRef<
>
Filter
</span> */}
<Funnel />
{count > 0 && (
<span className="rounded-full bg-text-badge px-1 text-xs ">
<span className="rounded bg-text-badge px-1 py-0.5 text-xs leading-none text-text-primary">
{count}
</span>
)}
<Funnel />
</Button>
);
});

118
web/src/components/ui/button.tsx
View File

@ -4,40 +4,57 @@ import * as React from 'react';
import { cn } from '@/lib/utils';
import { LucideLoader2, Plus } from 'lucide-react';
import { Link, LinkProps } from 'react-router';
const buttonVariants = cva(
cn(
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-0',
'disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0',
'disabled:pointer-events-none disabled:opacity-50 rounded border-0.5 border-transparent',
'[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0',
),
{
variants: {
variant: {
// Solid variant series:
// Button has its own background color, may have borders
default:
'bg-text-primary text-bg-base shadow-xs hover:bg-text-primary/90 focus-visible:bg-text-primary/90',
secondary: `
bg-bg-card
hover:text-text-primary hover:bg-border-button
focus-visible:text-text-primary focus-visible:bg-border-button
`,
highlighted: `
bg-text-primary text-bg-base border-b-4 border-b-accent-primary
hover:bg-text-primary/90 focus-visible:bg-text-primary/90
`,
accent: `
bg-accent-primary text-white
hover:bg-accent-primary/90 focus-visible:bg-accent-primary/90
`,
destructive: `
bg-state-error text-white shadow-xs
hover:bg-state-error/90 focus-visible:ring-state-error/20 dark:focus-visible:ring-state-error/40
`,
// Outline variant series
// Button has transparent or greyish background, may have borders
outline: `
text-text-secondary bg-bg-input border-0.5 border-border-button
hover:text-text-primary hover:bg-border-button hover:border-border-default
focus-visible:text-text-primary focus-visible:bg-border-button focus-visible:border-border-button
`,
secondary:
'bg-bg-input text-text-primary shadow-xs hover:bg-bg-input/80 border border-border-button',
`, // light: bg=transparent, dark: bg-input
ghost: `
text-text-secondary
hover:bg-border-button hover:text-text-primary
focus-visible:text-text-primary focus-visible:bg-border-button
dashed: `
text-text-secondary border-border-button border-dashed
hover:text-text-primary hover:bg-border-button hover:border-border-default
focus-visible:text-text-primary focus-visible:bg-border-button focus-visible:border-border-button
`,
link: 'text-primary underline-offset-4 hover:underline',
icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80',
dashed: 'border border-dashed border-border-button hover:bg-accent',
transparent: `
text-text-secondary bg-transparent border-0.5 border-border-button
hover:text-text-primary hover:bg-border-button
@ -49,14 +66,12 @@ const buttonVariants = cva(
hover:bg-state-error/10 focus-visible:bg-state-error/10
`,
accent: `
bg-accent-primary text-white
hover:bg-accent-primary/90 focus-visible:bg-accent-primary/90
`,
highlighted: `
bg-text-primary text-bg-base border-b-4 border-b-accent-primary
hover:bg-text-primary/90 focus-visible:bg-text-primary/90
// Ghost variant series
// Button has transparent background, without borders
ghost: `
text-text-secondary
hover:bg-border-button focus-visible:bg-border-button
hover:text-text-primary focus-visible:text-text-primary
`,
delete: `
@ -64,15 +79,23 @@ const buttonVariants = cva(
hover:bg-state-error-5 hover:text-state-error
focus-visible:text-state-error focus-visible:bg-state-error-5
`,
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-8 px-2.5 py-1.5 ',
sm: 'h-6 rounded-sm px-2',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
auto: 'h-full px-1',
'icon-sm': 'size-8',
'icon-xs': 'size-7',
xl: 'h-12 rounded-xl px-5',
lg: 'h-10 rounded-lg px-4',
default: 'h-8 rounded px-3',
sm: 'h-7 rounded-sm px-2',
xs: 'h-6 rounded-xs px-1',
'icon-xl': 'size-12 rounded-xl',
'icon-lg': 'size-10 rounded-lg',
icon: 'size-8 rounded',
'icon-sm': 'size-7 rounded-sm',
'icon-xs': 'size-6 rounded-xs',
},
},
defaultVariants: {
@ -82,45 +105,58 @@ const buttonVariants = cva(
},
);
export interface ButtonProps
extends
React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
export type ButtonProps<IsAnchor extends boolean = false> = {
asChild?: boolean;
asLink?: boolean;
loading?: boolean;
block?: boolean;
}
disabled?: boolean;
dot?: boolean;
} & VariantProps<typeof buttonVariants> &
(IsAnchor extends true
? LinkProps
: React.ButtonHTMLAttributes<HTMLButtonElement>);
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(
const Button = React.forwardRef(
<IsAnchor extends boolean = false>(
{
children,
className,
variant,
size,
dot = false,
asChild = false,
asLink = false,
loading = false,
disabled = false,
block = false,
...props
},
ref,
}: ButtonProps<IsAnchor>,
ref: React.ForwardedRef<
IsAnchor extends true ? HTMLAnchorElement : HTMLButtonElement
>,
) => {
const Comp = asChild ? Slot : 'button';
const Comp = asChild ? Slot : asLink ? Link : 'button';
return (
<Comp
className={cn(
'bg-bg-card',
{ 'block w-full': block },
buttonVariants({ variant, size, className }),
{ 'block w-full': block },
{ relative: dot },
)}
ref={ref}
// @ts-ignore
ref={ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>}
disabled={loading || disabled}
{...props}
>
{loading && <LucideLoader2 className="animate-spin" />}
{children}
<>
{dot && (
<span className="absolute size-[6px] rounded-full -right-[3px] -top-[3px] bg-state-error animate" />
)}
{loading && <LucideLoader2 className="animate-spin" />}
{children}
</>
</Comp>
);
},

15
web/src/components/ui/card.tsx
View File

@ -30,15 +30,12 @@ const CardHeader = React.forwardRef<
CardHeader.displayName = 'CardHeader';
const CardTitle = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
HTMLElement,
React.HTMLAttributes<HTMLElement> & { as?: React.ElementType }
>(({ className, as: As = 'div', ...props }, ref) => (
<As
ref={ref}
className={cn(
'text-2xl font-semibold leading-none tracking-tight',
className,
)}
className={cn('text-2xl leading-normal font-medium', className)}
{...props}
/>
));
@ -50,7 +47,7 @@ const CardDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('text-sm text-muted-foreground', className)}
className={cn('text-sm text-text-secondary', className)}
{...props}
/>
));

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

@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root
ref={ref}
className={cn(
'peer size-4 shrink-0 rounded-sm border border-text-secondary outline-0 transition-colors bg-bg-component',
'peer size-4 shrink-0 rounded-2xs border border-text-disabled outline-0 transition-colors bg-transparent',
'hover:border-border-default hover:bg-border-button',
'focus-visible:border-border-default focus-visible:bg-border-default',
'disabled:cursor-not-allowed disabled:opacity-50',

8
web/src/components/ui/dropdown-menu.tsx
View File

@ -84,8 +84,12 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
inset && 'ps-8',
'relative flex cursor-default select-none items-center gap-2',
'rounded-sm px-2 py-1.5 text-sm text-text-secondary outline-none transition-colors',
'focus:bg-bg-card focus:text-text-primary',
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
inset && 'pl-8',
justifyBetween && 'flex justify-between',
className,
)}

12
web/src/components/ui/skeleton.tsx
View File

@ -6,7 +6,7 @@ function Skeleton({
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn('animate-pulse rounded-md bg-muted', className)}
className={cn('animate-pulse rounded-md bg-bg-card', className)}
{...props}
/>
);
@ -26,12 +26,10 @@ function ParagraphSkeleton() {
function CardSkeleton() {
return (
<div className="flex flex-col space-y-3">
<Skeleton className="h-[125px] w-[250px] rounded-xl" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
<div className="w-64">
<Skeleton className="mb-3 h-28 rounded-xl" />
<Skeleton className="mb-2 h-4" />
<Skeleton className="h-4 w-4/5" />
</div>
);
}

15
web/src/components/what-is-this.tsx Normal file
View File

@ -0,0 +1,15 @@
import { LucideCircleQuestionMark } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
export default function WhatIsThis({ children }: React.PropsWithChildren<{}>) {
return (
<Tooltip>
<TooltipTrigger>
<LucideCircleQuestionMark className="size-[1em]" />
</TooltipTrigger>
<TooltipContent>{children}</TooltipContent>
</Tooltip>
);
}

32
web/src/global.less
View File

@ -1,28 +1,26 @@
@import url(./inter.less);
html {
height: 100%;
overflow: hidden; // The content of the DatasetSettings page is too high, which will cause scroll bars to appear on the html tags. Setting the maximum height in DatasetSettings does not work either. I don't understand.
:root {
--font-sans: 'Inter';
}
body {
font-family:
'Inter',
system-ui,
-apple-system,
'Segoe UI',
sans-serif;
margin: 0;
height: 100%;
@supports (font-variation-settings: normal) {
:root {
--font-sans: 'InterVariable';
}
}
html,
body,
#root {
height: 100%;
}
width: 100vw;
width: 100dvw;
height: 100vh;
height: 100dvh;
overflow: hidden;
.ant-app {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.vue-office-excel {

34
web/src/layouts/bell-button.tsx
View File

@ -1,28 +1,18 @@
import { Button } from '@/components/ui/button';
import { useNavigateWithFromState } from '@/hooks/route-hook';
import { useListTenant } from '@/hooks/use-user-setting-request';
import { TenantRole } from '@/pages/user-setting/constants';
import { Routes } from '@/routes';
import { BellRing } from 'lucide-react';
import { useCallback, useMemo } from 'react';
export function BellButton() {
const { data } = useListTenant();
const navigate = useNavigateWithFromState();
const showBell = useMemo(() => {
return data.some((x) => x.role === TenantRole.Invite);
}, [data]);
const handleBellClick = useCallback(() => {
navigate('/user-setting/team');
}, [navigate]);
return showBell ? (
<Button variant={'ghost'} onClick={handleBellClick}>
<div className="relative">
<BellRing className="size-4 " />
<span className="absolute size-1 rounded -right-1 -top-1 bg-red-600"></span>
</div>
return (
<Button
asLink
to={`${Routes.UserSetting}${Routes.Team}`}
variant="ghost"
size="icon"
className="group"
dot
>
<BellRing className="size-4 animate-bell-shake group-hover:animate-none" />
</Button>
) : null;
);
}

158
web/src/layouts/global-navbar.tsx Normal file
View File

@ -0,0 +1,158 @@
import { useId, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Link, useLocation } from 'react-router';
import { LucideHouse } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Routes } from '@/routes';
import { supportsCssAnchor } from '@/utils/css-support';
const PathMap = {
[Routes.Datasets]: [Routes.Datasets, Routes.DatasetBase],
[Routes.Chats]: [Routes.Chats, Routes.Chat],
[Routes.Searches]: [Routes.Searches, Routes.Search],
[Routes.Agents]: [Routes.Agents, Routes.AgentTemplates],
[Routes.Memories]: [Routes.Memories, Routes.Memory, Routes.MemoryMessage],
[Routes.Files]: [Routes.Files],
} as const;
const menuItems = [
{ path: Routes.Root, name: 'header.Root', icon: LucideHouse },
{ path: Routes.Datasets, name: 'header.dataset' /* icon: Library, */ },
{
path: Routes.Chats,
name: 'header.chat',
/* icon: MessageSquareText, */ 'data-testid': 'nav-chat',
},
{
path: Routes.Searches,
name: 'header.search',
/* icon: Search, */ 'data-testid': 'nav-search',
},
{
path: Routes.Agents,
name: 'header.flow',
/* icon: Cpu, */ 'data-testid': 'nav-agent',
},
{ path: Routes.Memories, name: 'header.memories' /* icon: Cpu, */ },
{ path: Routes.Files, name: 'header.fileManager' /* icon: File, */ },
];
const GlobalNavbar = supportsCssAnchor
? () => {
const { t } = useTranslation();
const { pathname } = useLocation();
const navbarAnchorNamePrefix = useId().replace(/:/g, '');
const activePath = useMemo(() => {
return (
Object.keys(PathMap).find((x: string) =>
PathMap[x as keyof typeof PathMap].some((y: string) =>
pathname.includes(y),
),
) || pathname
);
}, [pathname]);
const activePathAnchorName = `--${navbarAnchorNamePrefix}${activePath === Routes.Root ? '-root' : activePath.replace('/', '-')}`;
const hasAnyActive = useMemo(
() => menuItems.some(({ path }) => path === activePath),
[activePath],
);
return (
<nav>
<ul className="relative flex items-center p-1 bg-bg-card rounded-full border border-border-button">
{menuItems.map(({ path, name, icon: Icon, ...props }) => {
const isActive = path === activePath;
const anchorName = `--${navbarAnchorNamePrefix}${path === Routes.Root ? '-root' : path.replace('/', '-')}`;
return (
<li key={path} className="relative" style={{ anchorName }}>
<Link
{...props}
to={path}
className={cn(
'h-10 px-6 text-base inline-flex items-center justify-center',
'hover:text-current focus-visible:text-current rounded-full transition-all',
isActive && '!text-bg-base',
)}
aria-current={isActive ? 'page' : undefined}
>
{Icon && <Icon className="size-6 stroke-[1.5]" />}
<span className={cn(Icon && 'sr-only')}>{t(name)}</span>
</Link>
</li>
);
})}
<li
className={cn(
'absolute -z-[1] bg-text-primary border-b-2 border-b-accent-primary rounded-full opacity-0',
'transition-all',
hasAnyActive && 'opacity-100',
)}
role="presentation"
style={{
top: 'anchor(top)',
left: 'anchor(left)',
width: 'anchor-size(width)',
height: 'anchor-size(height)',
positionAnchor: activePathAnchorName,
}}
/>
</ul>
</nav>
);
}
: () => {
const { t } = useTranslation();
const { pathname } = useLocation();
const activePath = useMemo(() => {
return (
Object.keys(PathMap).find((x: string) =>
PathMap[x as keyof typeof PathMap].some((y: string) =>
pathname.includes(y),
),
) || pathname
);
}, [pathname]);
return (
<nav>
<ul className="flex items-center p-1 bg-bg-card rounded-full border border-border-button">
{menuItems.map(({ path, name, icon: Icon, ...props }) => {
const isActive = path === activePath;
return (
<li key={path}>
<Link
{...props}
to={path}
className={cn(
'h-10 px-6 text-base inline-flex items-center justify-center',
'hover:text-current focus-visible:text-current rounded-full transition-all',
isActive &&
'!text-bg-base bg-text-primary border-b-2 border-b-accent-primary',
)}
aria-label={t(name)}
aria-current={isActive ? 'page' : undefined}
>
{Icon ? (
<Icon className="size-6 stroke-[1.5]" />
) : (
<span>{t(name)}</span>
)}
</Link>
</li>
);
})}
</ul>
</nav>
);
};
export default GlobalNavbar;

27
web/src/layouts/index.module.less
View File

@ -1,27 +0,0 @@
.navs {
ul {
padding: 0;
list-style: none;
display: flex;
}
li {
margin-right: 1em;
}
}
.layout {
height: 100vh;
}
body {
margin: 0;
}
.divider {
margin: 0;
}
.clickAvailable {
cursor: pointer;
}

237
web/src/layouts/next-header.tsx
View File

@ -1,6 +1,5 @@
import { IconFontFill } from '@/components/icon-font';
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
import { useTheme } from '@/components/theme-provider';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
@ -8,213 +7,143 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Segmented, SegmentedValue } from '@/components/ui/segmented';
import { LanguageList, LanguageMap, ThemeEnum } from '@/constants/common';
import { LanguageList, LanguageMap } from '@/constants/common';
import { useChangeLanguage } from '@/hooks/logic-hooks';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { useNavigateWithFromState } from '@/hooks/route-hook';
import { useFetchUserInfo } from '@/hooks/use-user-setting-request';
import {
useFetchUserInfo,
useListTenant,
} from '@/hooks/use-user-setting-request';
import { cn } from '@/lib/utils';
import { TenantRole } from '@/pages/user-setting/constants';
import { Routes } from '@/routes';
import { camelCase } from 'lodash';
import {
ChevronDown,
CircleHelp,
Cpu,
File,
House,
Library,
MessageSquareText,
Moon,
Search,
Sun,
} from 'lucide-react';
import React, { useCallback, useMemo } from 'react';
import { LucideChevronDown, LucideCircleHelp } from 'lucide-react';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router';
import { Link, useLocation } from 'react-router';
import { BellButton } from './bell-button';
import GlobalNavbar from './global-navbar';
import ThemeButton from './theme-button';
const handleDocHelpCLick = () => {
window.open('https://ragflow.io/docs/dev/category/guides', 'target');
};
const PathMap = {
[Routes.Datasets]: [Routes.Datasets],
[Routes.Chats]: [Routes.Chats],
[Routes.Searches]: [Routes.Searches],
[Routes.Agents]: [Routes.Agents],
[Routes.Memories]: [Routes.Memories, Routes.Memory, Routes.MemoryMessage],
[Routes.Files]: [Routes.Files],
} as const;
export function Header() {
export function Header({
className,
...props
}: React.HTMLAttributes<HTMLElement>) {
const { t } = useTranslation();
const { pathname } = useLocation();
const navigate = useNavigateWithFromState();
const { navigateToOldProfile } = useNavigatePage();
const changeLanguage = useChangeLanguage();
const { setTheme, theme } = useTheme();
const {
data: { language = 'English', avatar, nickname },
} = useFetchUserInfo();
const handleItemClick = (key: string) => () => {
changeLanguage(key);
};
const { data: tenantData } = useListTenant();
const hasNotification = useMemo(
() => tenantData?.some((x) => x.role === TenantRole.Invite),
[tenantData],
);
const items = LanguageList.map((x) => ({
const langItems = LanguageList.map((x) => ({
key: x,
label: <span>{LanguageMap[x as keyof typeof LanguageMap]}</span>,
}));
const onThemeClick = React.useCallback(() => {
setTheme(theme === ThemeEnum.Dark ? ThemeEnum.Light : ThemeEnum.Dark);
}, [setTheme, theme]);
const tagsData = useMemo(
() => [
{ path: Routes.Root, name: t('header.Root'), icon: House },
{ path: Routes.Datasets, name: t('header.dataset'), icon: Library },
{ path: Routes.Chats, name: t('header.chat'), icon: MessageSquareText },
{ path: Routes.Searches, name: t('header.search'), icon: Search },
{ path: Routes.Agents, name: t('header.flow'), icon: Cpu },
{ path: Routes.Memories, name: t('header.memories'), icon: Cpu },
{ path: Routes.Files, name: t('header.fileManager'), icon: File },
],
[t],
);
const options = useMemo(() => {
return tagsData.map((tag) => {
const HeaderIcon = tag.icon;
return {
label:
tag.path === Routes.Root ? (
<HeaderIcon className="size-6"></HeaderIcon>
) : (
<span
data-testid={
tag.path === Routes.Chats
? 'nav-chat'
: tag.path === Routes.Searches
? 'nav-search'
: tag.path === Routes.Agents
? 'nav-agent'
: undefined
}
>
{tag.name}
</span>
),
value: tag.path,
};
});
}, [tagsData]);
// const currentPath = useMemo(() => {
// return (
// tagsData.find((x) => pathname.startsWith(x.path))?.path || Routes.Root
// );
// }, [pathname, tagsData]);
const handleChange = (path: SegmentedValue) => {
navigate(path as Routes);
};
const handleLogoClick = useCallback(() => {
navigate(Routes.Root);
}, [navigate]);
const activePathName = useMemo(() => {
const name = Object.keys(PathMap).find((x: string) => {
const pathList = PathMap[x as keyof typeof PathMap];
return pathList.some((y: string) => pathname.indexOf(y) > -1);
});
if (name) {
return name;
} else {
return pathname;
}
}, [pathname]);
return (
<section
className="py-5 px-10 flex justify-between items-center "
data-testid="top-nav"
<header
key="app-navbar"
className={cn(
'w-full grid grid-cols-[1fr_auto_1fr] grid-rows-1 items-center gap-8',
className,
)}
{...props}
>
<div className="flex items-center gap-4">
<img
src={'/logo.svg'}
alt="logo"
className="size-10 mr-[12] cursor-pointer"
onClick={handleLogoClick}
/>
<div className="inline-flex items-center">
<Link
to={Routes.Root}
aria-current={pathname === Routes.Root ? 'page' : undefined}
>
<img src={'/logo.svg'} alt="RAGFlow logo" className="size-10" />
</Link>
</div>
<Segmented
rounded="xxxl"
sizeType="xl"
buttonSize="xl"
options={options}
value={activePathName}
onChange={handleChange}
activeClassName="text-bg-base bg-metallic-gradient border-b-[#00BEB4] border-b-2"
></Segmented>
<GlobalNavbar />
<div
className="flex items-center gap-5 text-text-badge"
className="flex items-center justify-end gap-4 text-text-badge"
data-testid="auth-status"
>
<a
className="p-2 text-text-secondary hover:text-text-primary focus-visible:text-text-primary"
target="_blank"
href="https://discord.com/invite/NjYzJD3GM3"
rel="noreferrer"
rel="noreferrer noopener"
>
<IconFontFill name="a-DiscordIconSVGVectorIcon"></IconFontFill>
<IconFontFill name="a-DiscordIconSVGVectorIcon" />
</a>
<a
className="p-2 text-text-secondary hover:text-text-primary focus-visible:text-text-primary"
target="_blank"
href="https://github.com/infiniflow/ragflow"
rel="noreferrer"
rel="noreferrer noopener"
>
<IconFontFill name="GitHub"></IconFontFill>
<IconFontFill name="GitHub" />
</a>
<DropdownMenu>
<DropdownMenuTrigger>
<div className="flex items-center gap-1">
<DropdownMenuTrigger asChild>
<Button className="flex items-center gap-1" variant="ghost">
{t(`common.${camelCase(language)}`)}
<ChevronDown className="size-4" />
</div>
<LucideChevronDown className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
{items.map((x) => (
<DropdownMenuItem key={x.key} onClick={handleItemClick(x.key)}>
{langItems.map((x) => (
<DropdownMenuItem
key={x.key}
onClick={() => changeLanguage(x.key)}
>
{x.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<Button variant={'ghost'} onClick={handleDocHelpCLick}>
<CircleHelp />
<Button
asLink
variant="ghost"
size="icon"
to="https://ragflow.io/docs/dev/category/user-guides"
target="_blank"
rel="noreferrer noopener"
>
<LucideCircleHelp className="size-[1em]" />
</Button>
<Button variant={'ghost'} onClick={onThemeClick}>
{theme === 'light' ? <Sun /> : <Moon />}
</Button>
<BellButton></BellButton>
<div className="relative" data-testid="settings-entrypoint">
<ThemeButton />
{hasNotification && <BellButton />}
<Link
to={Routes.UserSetting}
className="relative ms-3"
data-testid="settings-entrypoint"
>
<RAGFlowAvatar
name={nickname}
avatar={avatar}
isPerson
className="size-8 cursor-pointer"
onClick={navigateToOldProfile}
></RAGFlowAvatar>
className="size-8"
/>
{/* Temporarily hidden */}
{/* <Badge className="h-5 w-8 absolute font-normal p-0 justify-center -right-8 -top-2 text-bg-base bg-gradient-to-l from-[#42D7E7] to-[#478AF5]">
Pro
</Badge> */}
</div>
</Link>
</div>
</section>
</header>
);
}

19
web/src/layouts/next.tsx
View File

@ -1,11 +1,20 @@
import { Outlet } from 'react-router';
import { Header } from './next-header';
export default function NextLayout() {
export function NextLayoutContainer({ children }: React.PropsWithChildren) {
return (
<main className="h-full flex flex-col">
<Header />
<Outlet />
</main>
<div className="size-full grid grid-rows-[auto_1fr] grid-cols-1 grid-flow-col">
<Header className="px-5 py-4" />
<main className="size-full overflow-hidden">{children}</main>
</div>
);
}
export default function NextLayout() {
return (
<NextLayoutContainer>
<Outlet />
</NextLayoutContainer>
);
}

19
web/src/layouts/page-container.tsx Normal file
View File

@ -0,0 +1,19 @@
import { cn } from '@/lib/utils';
/**
* Basic page container:
* - Full size
* - Padding x=2.5rem top=0.75rem
* - Auto scrollbar
*/
export function PageContainer({
className,
...props
}: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>) {
return (
<div
className={cn('size-full px-10 py-3 overflow-auto', className)}
{...props}
/>
);
}

22
web/src/layouts/theme-button.tsx Normal file
View File

@ -0,0 +1,22 @@
import { LucideMoon, LucideSun } from 'lucide-react';
import { useTheme } from '@/components/theme-provider';
import { Button } from '@/components/ui/button';
import { ThemeEnum } from '@/constants/common';
export default function ThemeButton() {
const { setTheme, theme } = useTheme();
return (
<Button
variant="ghost"
size="icon"
className="relative"
onClick={() =>
setTheme(theme === ThemeEnum.Dark ? ThemeEnum.Light : ThemeEnum.Dark)
}
>
{theme === ThemeEnum.Light ? <LucideSun /> : <LucideMoon />}
</Button>
);
}

27
web/src/pages/agents/agent-templates.tsx
View File

@ -1,12 +1,3 @@
import { PageHeader } from '@/components/page-header';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { useSetModalState } from '@/hooks/common-hooks';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { useFetchAgentTemplates, useSetAgent } from '@/hooks/use-agent-request';
@ -15,14 +6,11 @@ import { CardContainer } from '@/components/card-container';
import { AgentCategory } from '@/constants/agent';
import { IFlowTemplate } from '@/interfaces/database/agent';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CreateAgentDialog } from './create-agent-dialog';
import { TemplateCard } from './template-card';
import { MenuItemKey, SideBar } from './template-sidebar';
export default function AgentTemplates() {
const { navigateToAgents } = useNavigatePage();
const { t } = useTranslation();
const list = useFetchAgentTemplates();
const { loading, setAgent } = useSetAgent();
const [templateList, setTemplateList] = useState<IFlowTemplate[]>([]);
@ -99,21 +87,6 @@ export default function AgentTemplates() {
return (
<section>
<PageHeader>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onClick={navigateToAgents}>
{t('flow.agent')}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{t('flow.createGraph')}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</PageHeader>
<div className="flex flex-1 h-dvh">
<SideBar
change={handleSiderBarChange}

42
web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx
View File

@ -23,14 +23,7 @@ import DocumentPreview from '@/components/document-preview';
import DocumentHeader from '@/components/document-preview/document-header';
import { useGetDocumentUrl } from '@/components/document-preview/hooks';
import { PageHeader } from '@/components/page-header';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import message from '@/components/ui/message';
import {
RAGFlowPagination,
@ -42,6 +35,7 @@ import {
useNavigatePage,
} from '@/hooks/logic-hooks/navigate-hooks';
import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
import { LucideArrowBigLeft } from 'lucide-react';
import styles from './index.module.less';
const Chunk = () => {
@ -182,29 +176,15 @@ const Chunk = () => {
return (
<>
<PageHeader>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onClick={navigateToDatasetList}>
{t('knowledgeDetails.dataset')}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink
onClick={navigateToDataFile(
getQueryString(QueryStringMap.id) as string,
)}
>
{dataset.name}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{documentInfo?.name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<Button
variant="outline"
onClick={navigateToDataFile(
getQueryString(QueryStringMap.id) as string,
)}
>
<LucideArrowBigLeft />
{t('common.back')}
</Button>
</PageHeader>
<div className={styles.chunkPage}>
<div className="flex flex-1 gap-8">

107
web/src/pages/dataset/dataset-overview/index.tsx
View File

@ -2,10 +2,17 @@ import FileStatusBadge from '@/components/file-status-badge';
import { FilterCollection } from '@/components/list-filter-bar/interface';
import SvgIcon from '@/components/svg-icon';
import { useIsDarkTheme } from '@/components/theme-provider';
import { AntToolTip } from '@/components/ui/tooltip';
import {
Card,
CardDescription,
CardFooter,
CardHeader,
} from '@/components/ui/card';
import WhatIsThis from '@/components/what-is-this';
import { RunningStatusMap } from '@/constants/knowledge';
import { useFetchDocumentList } from '@/hooks/use-document-request';
import { CircleQuestionMark } from 'lucide-react';
import { FC, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { RunningStatus } from '../dataset/constant';
@ -37,23 +44,35 @@ const StatCard: FC<StatCardProps> = ({
tooltip,
}) => {
return (
<div className="bg-bg-card p-4 rounded-lg border border-border flex flex-col gap-2">
<div className="flex items-center justify-between">
<h3 className="flex items-center gap-1 text-sm font-medium text-text-secondary">
{title}
{tooltip && (
<AntToolTip title={tooltip} trigger="hover">
<CircleQuestionMark size={12} />
</AntToolTip>
)}
</h3>
{icon}
<Card
className="px-5 py-2.5 rounded-lg border-border-default grid grid-cols-[1fr_auto] grid-rows-[1fr_auto]"
style={{
gridTemplateAreas: '"data icon" "footer footer"',
}}
>
<span style={{ gridArea: 'icon' }}>{icon}</span>
<div style={{ gridArea: 'data' }}>
<CardHeader className="p-0">
<h3 className="flex items-center gap-1 text-sm font-medium text-text-secondary">
{title}
{tooltip && <WhatIsThis>{tooltip}</WhatIsThis>}
</h3>
</CardHeader>
<CardDescription className="text-text-primary text-2xl font-medium leading-9">
<data value={value}>{value}</data>
</CardDescription>
</div>
<div className="text-2xl font-bold text-text-primary">{value}</div>
<div className="h-12 w-full flex items-center">
<CardFooter
className="p-0 mt-1.5 h-8 w-full flex items-end"
style={{ gridArea: 'footer' }}
>
<div className="flex-1">{children}</div>
</div>
</div>
</CardFooter>
</Card>
);
};
@ -64,38 +83,34 @@ const CardFooterProcess: FC<CardFooterProcessProps> = ({
failedTip,
}) => {
const { t } = useTranslation();
return (
<div className="flex items-center flex-col gap-2">
<div className="w-full flex justify-between gap-4 rounded-lg text-sm font-bold text-text-primary">
<div className="flex items-center justify-between rounded-md w-1/2 p-2 bg-state-success-5">
<div className="flex items-center rounded-lg gap-1">
<div className="w-2 h-2 rounded-full bg-state-success "></div>
<dl className="w-full flex justify-between gap-4 rounded-lg text-sm font-bold text-text-primary">
<div className="flex items-center justify-between rounded-sm w-1/2 p-2 bg-state-success-5">
<dt className="flex items-center rounded-lg gap-1">
<div className="w-1 h-1 rounded-full bg-state-success"></div>
<div className="font-normal text-text-secondary text-xs flex items-center gap-1">
{t('knowledgeDetails.success')}
{successTip && (
<AntToolTip title={successTip} trigger="hover">
<CircleQuestionMark size={12} />
</AntToolTip>
)}
{successTip && <WhatIsThis>{successTip}</WhatIsThis>}
</div>
</div>
<div>{success || 0}</div>
</dt>
<dd className="font-normal">{success || 0}</dd>
</div>
<div className="flex items-center justify-between rounded-md w-1/2 bg-state-error-5 p-2">
<div className="flex items-center rounded-lg gap-1">
<div className="w-2 h-2 rounded-full bg-state-error"></div>
<div className="flex items-center justify-between rounded-sm w-1/2 bg-state-error-5 p-2">
<dt className="flex items-center rounded-lg gap-1">
<div className="w-1 h-1 rounded-full bg-state-error"></div>
<div className="font-normal text-text-secondary text-xs flex items-center gap-1">
{t('knowledgeDetails.failed')}
{failedTip && (
<AntToolTip title={failedTip} trigger="hover">
<CircleQuestionMark size={12} />
</AntToolTip>
)}
{failedTip && <WhatIsThis>{failedTip}</WhatIsThis>}
</div>
</div>
<div>{failed || 0}</div>
</dt>
<dd className="font-normal">{failed || 0}</dd>
</div>
</div>
</dl>
</div>
);
};
@ -247,9 +262,13 @@ const FileLogsPage: FC = () => {
const isDark = useIsDarkTheme();
return (
<div className="p-5 min-w-[880px] border-border border rounded-lg mr-5">
<Card
className="
p-5 min-w-[880px] mr-5 mb-5 bg-transparent shadow-none
flex flex-col overflow-y-auto scrollbar-auto"
>
{/* Stats Cards */}
<div className="grid grid-cols-3 md:grid-cols-3 gap-4 mb-6">
<div className="grid grid-cols-3 md:grid-cols-3 gap-7 mb-6">
<StatCard
title={t('datasetOverview.totalFiles')}
value={topAllData.totalFiles.value}
@ -261,12 +280,12 @@ const FileLogsPage: FC = () => {
)
}
>
<div>
<div className="text-xs">
<span className="text-accent-primary">
{topAllData.totalFiles.precent > 0 ? '+' : ''}
{topAllData.totalFiles.precent}%{' '}
</span>
<span className="font-normal text-text-secondary text-xs">
<span className="font-normal text-text-secondary">
{t('knowledgeConfiguration.lastWeek')}
</span>
</div>
@ -330,7 +349,7 @@ const FileLogsPage: FC = () => {
pageCount={10}
active={active}
/>
</div>
</Card>
);
};

20
web/src/pages/dataset/dataset-overview/overview-table.tsx
View File

@ -414,8 +414,8 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
});
return (
<div className="w-full h-[calc(100vh-360px)]">
<Table rootClassName="max-h-[calc(100vh-380px)]">
<div className="size-full flex flex-col">
<Table rootClassName="max-h-full mb-4">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
@ -460,15 +460,15 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
)}
</TableBody>
</Table>
<div className="flex items-center justify-end absolute bottom-3 right-12">
<div className="space-x-2">
<RAGFlowPagination
{...{ current: pagination.current, pageSize: pagination.pageSize }}
total={pagination.total}
onChange={(page, pageSize) => setPagination({ page, pageSize })}
/>
</div>
<div className="mt-auto flex items-center justify-end">
<RAGFlowPagination
{...{ current: pagination.current, pageSize: pagination.pageSize }}
total={pagination.total}
onChange={(page, pageSize) => setPagination({ page, pageSize })}
/>
</div>
{isModalVisible && (
<ProcessLogModal
title={active === LogTabs.FILE_LOGS ? t('fileLogs') : t('datasetLog')}

197
web/src/pages/dataset/dataset-setting/index.tsx
View File

@ -2,6 +2,13 @@ import { DataFlowSelect } from '@/components/data-pipeline-select';
import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import Divider from '@/components/ui/divider';
import { Form } from '@/components/ui/form';
import { FormLayout } from '@/constants/form';
@ -15,7 +22,6 @@ import { createContext, useEffect, useState } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { z } from 'zod';
import { TopTitle } from '../dataset-title';
import {
GenerateType,
IGenerateLogButtonProps,
@ -258,98 +264,113 @@ export default function DatasetSettings() {
};
return (
<section className="p-5 h-full flex flex-col">
<TopTitle
title={t('knowledgeDetails.configuration')}
description={t('knowledgeConfiguration.titleDescription')}
></TopTitle>
<div className="flex gap-14 flex-1 min-h-0">
<DataSetContext.Provider
value={{
loading: datasetSettingLoading,
knowledgeDetails: knowledgeDetails,
}}
>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 ">
<div className="w-[768px] h-[calc(100vh-240px)] pr-1 overflow-y-auto scrollbar-auto">
<MainContainer className="text-text-secondary">
<div className="text-base font-medium text-text-primary">
{t('knowledgeConfiguration.baseInfo')}
</div>
<GeneralForm></GeneralForm>
<div className="pr-5 pb-5">
<Card className="p-0 h-full flex flex-col bg-transparent shadow-none">
<CardHeader className="p-5 border-b-0.5 border-border-button">
<header>
<CardTitle as="h1">{t('knowledgeDetails.configuration')}</CardTitle>
<Divider />
<div className="text-base font-medium text-text-primary">
{t('knowledgeConfiguration.dataPipeline')}
</div>
<ParseTypeItem line={1} />
{parseType === 1 && (
<ChunkMethodItem line={1}></ChunkMethodItem>
)}
{parseType === 2 && (
<DataFlowSelect
isMult={false}
showToDataPipeline={true}
formFieldName="pipeline_id"
layout={FormLayout.Horizontal}
/>
)}
<CardDescription>
{t('knowledgeConfiguration.titleDescription')}
</CardDescription>
{/* <Divider /> */}
{parseType === 1 && <ChunkMethodForm />}
{/* <Button>Save as Preset</Button> */}
</header>
</CardHeader>
{/* <LinkDataPipeline
data={pipelineData}
handleLinkOrEditSubmit={handleLinkOrEditSubmit}
/> */}
<Divider />
<LinkDataSource
data={sourceData}
<CardContent className="p-0 flex-1 h-0 flex divide-x-0.5">
<DataSetContext.Provider
value={{
loading: datasetSettingLoading,
knowledgeDetails: knowledgeDetails,
}}
>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col"
>
<div className="flex-1 h-0 w-[768px] px-5 pt-5 overflow-y-auto scrollbar-auto">
<MainContainer className="text-text-secondary">
<div className="text-base font-medium text-text-primary">
{t('knowledgeConfiguration.baseInfo')}
</div>
<GeneralForm></GeneralForm>
<Divider />
<div className="text-base font-medium text-text-primary">
{t('knowledgeConfiguration.dataPipeline')}
</div>
<ParseTypeItem line={1} />
{parseType === 1 && (
<ChunkMethodItem line={1}></ChunkMethodItem>
)}
{parseType === 2 && (
<DataFlowSelect
isMult={false}
showToDataPipeline={true}
formFieldName="pipeline_id"
layout={FormLayout.Horizontal}
/>
)}
{/* <Divider /> */}
{parseType === 1 && <ChunkMethodForm />}
{/* <LinkDataPipeline
data={pipelineData}
handleLinkOrEditSubmit={handleLinkOrEditSubmit}
unbindFunc={unbindFunc}
handleAutoParse={handleAutoParse}
/>
<Divider />
<div className="text-base font-medium text-text-primary">
{t('knowledgeConfiguration.globalIndex')}
</div>
<GraphRagItems
className="border-none p-0"
data={graphRagGenerateData as IGenerateLogButtonProps}
onDelete={() =>
handleDeletePipelineTask(GenerateType.KnowledgeGraph)
}
></GraphRagItems>
<Divider />
<RaptorFormFields
data={raptorGenerateData as IGenerateLogButtonProps}
onDelete={() =>
handleDeletePipelineTask(GenerateType.Raptor)
}
></RaptorFormFields>
</MainContainer>
</div>
<div className="text-right items-center flex justify-end gap-3 w-[768px]">
<Button
type="reset"
className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
data-testid="ds-settings-page-cancel-btn"
onClick={() => {
form.reset();
}}
>
{t('knowledgeConfiguration.cancel')}
</Button>
<SavingButton></SavingButton>
</div>
</form>
</Form>
<div className="flex-1">
/> */}
<Divider />
<LinkDataSource
data={sourceData}
handleLinkOrEditSubmit={handleLinkOrEditSubmit}
unbindFunc={unbindFunc}
handleAutoParse={handleAutoParse}
/>
<Divider />
<div className="text-base font-medium text-text-primary">
{t('knowledgeConfiguration.globalIndex')}
</div>
<GraphRagItems
className="border-none p-0"
data={graphRagGenerateData as IGenerateLogButtonProps}
onDelete={() =>
handleDeletePipelineTask(GenerateType.KnowledgeGraph)
}
></GraphRagItems>
<Divider />
<RaptorFormFields
data={raptorGenerateData as IGenerateLogButtonProps}
onDelete={() =>
handleDeletePipelineTask(GenerateType.Raptor)
}
></RaptorFormFields>
</MainContainer>
</div>
<div className="p-5 text-right items-center flex justify-end gap-3 w-[768px]">
<Button
type="reset"
variant="transparent"
onClick={() => {
form.reset();
}}
>
{t('knowledgeConfiguration.cancel')}
</Button>
<SavingButton />
</div>
</form>
</Form>
</DataSetContext.Provider>
<div className="flex-1 p-5 overflow-auto">
{parseType === 1 && <ChunkMethodLearnMore parserId={selectedTag} />}
</div>
</DataSetContext.Provider>
</div>
</section>
</CardContent>
</Card>
</div>
);
}

67
web/src/pages/dataset/dataset/generate-button/generate.tsx
View File

@ -7,6 +7,11 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Modal } from '@/components/ui/modal/modal';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
import { toFixed } from '@/utils/common-util';
import { formatDate } from '@/utils/date';
@ -25,6 +30,7 @@ import {
useTraceGenerate,
useUnBindTask,
} from './hook';
export enum GenerateType {
KnowledgeGraph = 'KnowledgeGraph',
Raptor = 'Raptor',
@ -191,45 +197,46 @@ const Generate: React.FC<GenerateProps> = (props) => {
};
return (
<div className="generate">
<DropdownMenu open={open} onOpenChange={handleOpenChange}>
<DropdownMenuTrigger asChild disabled={disabled}>
<div className={cn({ 'cursor-not-allowed': disabled })}>
<DropdownMenu open={open} onOpenChange={handleOpenChange}>
<DropdownMenuTrigger asChild disabled={disabled}>
<Tooltip>
<TooltipTrigger asChild>
<Button
disabled={disabled}
variant={'transparent'}
className={cn(disabled && '!cursor-not-allowed')}
variant="transparent"
size="icon"
onClick={() => {
if (!disabled) {
handleOpenChange(!open);
}
}}
>
<WandSparkles className="mr-2 size-4" />
{t('knowledgeDetails.generate')}
<WandSparkles />
</Button>
</div>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[380px] p-5 flex flex-col gap-2 ">
{Object.values(GenerateType).map((name) => {
const data = (
name === GenerateType.KnowledgeGraph
? graphRunData
: raptorRunData
) as ITraceInfo;
return (
<div key={name}>
<MenuItem
name={name}
runGenerate={runGenerate}
data={data}
pauseGenerate={pauseGenerate}
/>
</div>
);
})}
</DropdownMenuContent>
</DropdownMenu>
</div>
</TooltipTrigger>
<TooltipContent>{t('knowledgeDetails.generate')}</TooltipContent>
</Tooltip>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[380px] p-5 flex flex-col gap-2 ">
{Object.values(GenerateType).map((name) => {
const data = (
name === GenerateType.KnowledgeGraph ? graphRunData : raptorRunData
) as ITraceInfo;
return (
<div key={name}>
<MenuItem
name={name}
runGenerate={runGenerate}
data={data}
pauseGenerate={pauseGenerate}
/>
</div>
);
})}
</DropdownMenuContent>
</DropdownMenu>
);
};

4
web/src/pages/dataset/dataset/index.tsx
View File

@ -137,9 +137,6 @@ export default function Dataset() {
return (
<>
<div className="absolute top-4 right-5">
<Generate disabled={!(dataSetData.chunk_num > 0)} />
</div>
<section className="p-5 min-w-[880px]">
<ListFilterBar
title={t('header.dataset')}
@ -158,6 +155,7 @@ export default function Dataset() {
</div>
</div>
}
preChildren={<Generate disabled={!(dataSetData.chunk_num > 0)} />}
// preChildren={
// <Button
// variant={'ghost'}

44
web/src/pages/dataset/index.tsx
View File

@ -1,51 +1,19 @@
import { PageHeader } from '@/components/page-header';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
import { KnowledgeBaseProvider } from '@/pages/dataset/contexts/knowledge-base-context';
import { useTranslation } from 'react-i18next';
import { Outlet } from 'react-router';
import { SideBar } from './sidebar';
export default function DatasetWrapper() {
const { navigateToDatasetList } = useNavigatePage();
const { t } = useTranslation();
const { data, loading } = useFetchKnowledgeBaseConfiguration();
return (
<KnowledgeBaseProvider knowledgeBase={data} loading={loading}>
<section className="flex h-full flex-col w-full">
<PageHeader>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onClick={navigateToDatasetList}>
{t('knowledgeDetails.dataset')}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage className="w-28 whitespace-nowrap text-ellipsis overflow-hidden">
{data.name}
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</PageHeader>
<div className="flex flex-1 min-h-0">
<SideBar></SideBar>
<div className="flex-1 overflow-auto">
<Outlet />
</div>
</div>
</section>
<article className="pt-3 size-full grid grid-cols-[auto_1fr] grid-rows-1">
<SideBar />
<Outlet />
</article>
</KnowledgeBaseProvider>
);
}

81
web/src/pages/dataset/sidebar/index.tsx
View File

@ -1,3 +1,15 @@
import { isEmpty } from 'lodash';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
LucideFolderOpen,
LucideLogs,
LucideSettings,
LucideTextSearch,
} from 'lucide-react';
import { IconFontFill } from '@/components/icon-font';
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
import { Button } from '@/components/ui/button';
@ -9,11 +21,8 @@ import {
import { cn, formatBytes } from '@/lib/utils';
import { Routes } from '@/routes';
import { formatPureDate } from '@/utils/date';
import { isEmpty } from 'lodash';
import { Banknote, FileSearch2, FolderOpen, Logs } from 'lucide-react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useHandleMenuClick } from './hooks';
import { useParams } from 'react-router';
type PropType = {
refreshCount?: number;
@ -21,7 +30,7 @@ type PropType = {
export function SideBar({ refreshCount }: PropType) {
const pathName = useSecondPathName();
const { handleMenuClick } = useHandleMenuClick();
const { id } = useParams();
// refreshCount: be for avatar img sync update on top left
const { data } = useFetchKnowledgeBaseConfiguration({ refreshCount });
const { data: routerData } = useFetchKnowledgeGraph();
@ -30,75 +39,91 @@ export function SideBar({ refreshCount }: PropType) {
const items = useMemo(() => {
const list = [
{
icon: <FolderOpen className="size-4" />,
icon: <LucideFolderOpen className="size-[1em]" />,
label: t(`knowledgeDetails.subbarFiles`),
key: Routes.DatasetBase,
},
{
icon: <FileSearch2 className="size-4" />,
icon: <LucideTextSearch className="size-[1em]" />,
label: t(`knowledgeDetails.testing`),
key: Routes.DatasetTesting,
},
{
icon: <Logs className="size-4" />,
icon: <LucideLogs className="size-[1em]" />,
label: t(`knowledgeDetails.overview`),
key: Routes.DataSetOverview,
},
{
icon: <Banknote className="size-4" />,
icon: <LucideSettings className="size-[1em]" />,
label: t(`knowledgeDetails.configuration`),
key: Routes.DataSetSetting,
},
];
if (!isEmpty(routerData?.graph)) {
list.push({
icon: <IconFontFill name="knowledgegraph" className="size-4" />,
icon: <IconFontFill name="knowledgegraph" className="size-[1em]" />,
label: t(`knowledgeDetails.knowledgeGraph`),
key: Routes.KnowledgeGraph,
});
}
return list;
}, [t, routerData]);
return (
<aside className="relative p-5 space-y-8">
<div className="flex gap-2.5 max-w-[200px] items-center">
<aside className="w-64 relative px-5 space-y-8">
<header
className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto] gap-x-3"
style={{
gridTemplateAreas: '"avatar title" "avatar stats"',
}}
>
<RAGFlowAvatar
avatar={data.avatar}
name={data.name}
className="size-16"
></RAGFlowAvatar>
<div className=" text-text-secondary text-xs space-y-1 overflow-hidden">
<h3 className="text-lg font-semibold line-clamp-1 text-text-primary text-ellipsis overflow-hidden">
{data.name}
</h3>
style={{ gridArea: 'avatar' }}
/>
<h3
className="text-lg font-semibold line-clamp-1 text-text-primary text-ellipsis overflow-hidden"
style={{ gridArea: 'title' }}
>
{data.name}
</h3>
<div
className="self-end text-text-secondary text-xs overflow-hidden"
style={{ gridArea: 'stats' }}
>
<div className="flex justify-between">
<span>
{data.doc_num} {t('knowledgeDetails.files')}
</span>
<span>{formatBytes(data.size)}</span>
</div>
<div>
<div className="mt-0.5">
{t('knowledgeDetails.created')} {formatPureDate(data.create_time)}
</div>
</div>
</div>
</header>
<div className="w-[200px] flex flex-col gap-5">
<div className="flex flex-col gap-5">
{items.map((item, itemIdx) => {
const active = '/' + pathName === item.key;
return (
<Button
key={itemIdx}
variant={active ? 'secondary' : 'ghost'}
asLink
variant="ghost"
className={cn(
'w-full justify-start gap-2.5 px-3 relative h-10 text-text-secondary',
{
'bg-bg-card': active,
'text-text-primary': active,
},
'w-full justify-start gap-2.5 px-3 relative h-10 text-base',
active && 'bg-bg-card text-text-primary',
)}
onClick={handleMenuClick(item.key)}
to={`${Routes.DatasetBase}${item.key}/${id}`}
>
{item.icon}
<span>{item.label}</span>

153
web/src/pages/dataset/testing/index.tsx
View File

@ -1,7 +1,13 @@
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { useTestRetrieval } from '@/hooks/use-knowledge-request';
import { t } from 'i18next';
import { useState } from 'react';
import { TopTitle } from '../dataset-title';
import TestingForm from './testing-form';
import { TestingResult } from './testing-result';
@ -21,79 +27,92 @@ export default function RetrievalTesting() {
const [count] = useState(1);
return (
<div className="p-5">
<section className="flex justify-between items-center">
<TopTitle
title={t('knowledgeDetails.retrievalTesting')}
description={t('knowledgeDetails.testingDescription')}
></TopTitle>
{/* <Button>Save as Preset</Button> */}
</section>
{count === 1 ? (
<section className="flex divide-x h-full">
<div className="p-4 flex-1">
<div className="flex justify-between pb-2.5">
<span className="text-text-primary font-semibold text-2xl">
{t('knowledgeDetails.testSetting')}
</span>
{/* <Button variant={'outline'} onClick={addCount}>
<Plus /> Add New Test
</Button> */}
<div className="pr-5 pb-5">
<Card className="size-full bg-transparent shadow-none flex flex-col">
<CardHeader className="p-5 border-b-0.5 border-border-button">
<header>
<CardTitle as="h1">
{t('knowledgeDetails.retrievalTesting')}
</CardTitle>
<CardDescription>
{t('knowledgeDetails.testingDescription')}
</CardDescription>
{/* <Button>Save as Preset</Button> */}
</header>
</CardHeader>
{count === 1 ? (
<CardContent className="flex-1 overflow-hidden p-0 grid grid-rows-1 grid-cols-2 divide-x-0.5">
<article className="size-full flex-1 flex flex-col">
<header className="px-5 py-3">
<h2 className="font-semibold text-base leading-8">
{t('knowledgeDetails.testSetting')}
</h2>
{/* <Button variant={'outline'} onClick={addCount}>
<Plus /> Add New Test
</Button> */}
</header>
<div className="flex-1 h-0">
<TestingForm
loading={loading}
setValues={setValues}
refetch={refetch}
/>
</div>
</article>
<div className="flex-1">
<TestingResult
data={data}
page={page}
loading={loading}
pageSize={pageSize}
filterValue={filterValue}
handleFilterSubmit={handleFilterSubmit}
onPaginationChange={onPaginationChange}
/>
</div>
<div className="h-[calc(100vh-241px)] overflow-auto scrollbar-thin px-1">
</CardContent>
) : (
<CardContent className="p-0 flex gap-2">
<div className="flex-1">
<TestingForm
loading={loading}
setValues={setValues}
refetch={refetch}
></TestingForm>
<TestingResult
data={data}
page={page}
loading={loading}
pageSize={pageSize}
filterValue={filterValue}
handleFilterSubmit={handleFilterSubmit}
onPaginationChange={onPaginationChange}
></TestingResult>
</div>
</div>
<TestingResult
data={data}
page={page}
loading={loading}
pageSize={pageSize}
filterValue={filterValue}
handleFilterSubmit={handleFilterSubmit}
onPaginationChange={onPaginationChange}
></TestingResult>
</section>
) : (
<section className="flex gap-2">
<div className="flex-1">
<TestingForm
loading={loading}
setValues={setValues}
refetch={refetch}
></TestingForm>
<TestingResult
data={data}
page={page}
loading={loading}
pageSize={pageSize}
filterValue={filterValue}
handleFilterSubmit={handleFilterSubmit}
onPaginationChange={onPaginationChange}
></TestingResult>
</div>
<div className="flex-1">
<TestingForm
loading={loading}
setValues={setValues}
refetch={refetch}
></TestingForm>
<TestingResult
data={data}
page={page}
loading={loading}
pageSize={pageSize}
filterValue={filterValue}
handleFilterSubmit={handleFilterSubmit}
onPaginationChange={onPaginationChange}
></TestingResult>
</div>
</section>
)}
<div className="flex-1">
<TestingForm
loading={loading}
setValues={setValues}
refetch={refetch}
></TestingForm>
<TestingResult
data={data}
page={page}
loading={loading}
pageSize={pageSize}
filterValue={filterValue}
handleFilterSubmit={handleFilterSubmit}
onPaginationChange={onPaginationChange}
></TestingResult>
</div>
</CardContent>
)}
</Card>
</div>
);
}

81
web/src/pages/dataset/testing/testing-form.tsx
View File

@ -90,43 +90,52 @@ export default function TestingForm({
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormContainer className="p-10">
<SimilaritySliderFormField
isTooltipShown={true}
></SimilaritySliderFormField>
<RerankFormFields></RerankFormFields>
<UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
<CrossLanguageFormField
name={'cross_languages'}
></CrossLanguageFormField>
<MetadataFilter prefix=""></MetadataFilter>
</FormContainer>
<FormField
control={form.control}
name="question"
render={({ field }) => (
<FormItem>
{/* <FormLabel>{t('knowledgeDetails.testText')}</FormLabel> */}
<FormControl>
<Textarea {...field}></Textarea>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-end">
<ButtonLoading
type="submit"
disabled={!!!trim(question)}
loading={loading}
>
{/* {!loading && <CirclePlay />} */}
{t('knowledgeDetails.testingLabel')}
<Send />
</ButtonLoading>
<form
className="size-full flex flex-col"
onSubmit={form.handleSubmit(onSubmit)}
>
<div className="px-5 h-0 flex-1">
<FormContainer className="p-5 h-full overflow-auto">
<SimilaritySliderFormField
isTooltipShown={true}
></SimilaritySliderFormField>
<RerankFormFields></RerankFormFields>
<UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
<CrossLanguageFormField
name={'cross_languages'}
></CrossLanguageFormField>
<MetadataFilter prefix=""></MetadataFilter>
</FormContainer>
</div>
<footer className="flex-0 p-5">
<FormField
control={form.control}
name="question"
render={({ field }) => (
<FormItem>
{/* <FormLabel>{t('knowledgeDetails.testText')}</FormLabel> */}
<FormControl>
<Textarea {...field}></Textarea>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="mt-2.5 text-end">
<ButtonLoading
type="submit"
disabled={!!!trim(question)}
loading={loading}
>
{/* {!loading && <CirclePlay />} */}
{t('knowledgeDetails.testingLabel')}
<Send />
</ButtonLoading>
</div>
</footer>
</form>
</Form>
);

98
web/src/pages/dataset/testing/testing-result.tsx
View File

@ -1,9 +1,9 @@
import { EmptyType } from '@/components/empty/constant';
import Empty from '@/components/empty/empty';
import { FormContainer } from '@/components/form-container';
import { FilterButton } from '@/components/list-filter-bar';
import { FilterPopover } from '@/components/list-filter-bar/filter-popover';
import { FilterCollection } from '@/components/list-filter-bar/interface';
import { Card } from '@/components/ui/card';
import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
import { useTranslate } from '@/hooks/common-hooks';
import { useTestRetrieval } from '@/hooks/use-knowledge-request';
@ -21,12 +21,12 @@ const similarityList: Array<{ field: keyof ITestingChunk; label: string }> = [
const ChunkTitle = ({ item }: { item: ITestingChunk }) => {
const { t } = useTranslate('knowledgeDetails');
return (
<div className="flex gap-3 text-xs text-text-sub-title-invert italic">
<div className="text-xs text-text-sub-title-invert italic space-x-4 rtl:space-x-reverse">
{similarityList.map((x) => (
<div key={x.field} className="space-x-1">
<span>{((item[x.field] as number) * 100).toFixed(2)}</span>
<span>{t(camelCase(x.field))}</span>
</div>
<p key={x.field} className="inline">
{((item[x.field] as number) * 100).toFixed(2)}{' '}
<dfn>{t(camelCase(x.field))}</dfn>
</p>
))}
</div>
);
@ -68,11 +68,12 @@ export function TestingResult({
}, [data.doc_aggs]);
return (
<div className="p-4 flex-1">
<div className="flex justify-between pb-2.5">
<span className="text-text-primary font-semibold text-2xl">
<article className="size-full flex flex-col">
<header className="flex-0 px-5 py-3 flex justify-between">
<h2 className="font-semibold text-base leading-8">
{t('knowledgeDetails.testResults')}
</span>
</h2>
<FilterPopover
filters={filters}
onChange={handleFilterSubmit}
@ -80,43 +81,48 @@ export function TestingResult({
>
<FilterButton></FilterButton>
</FilterPopover>
</div>
{data.chunks?.length > 0 && !loading && (
<>
<section className="flex flex-col gap-5 overflow-auto h-[calc(100vh-241px)] scrollbar-thin mb-5">
{data.chunks?.map((x) => (
<FormContainer key={x.chunk_id} className="px-5 py-2.5">
<ChunkTitle item={x}></ChunkTitle>
<p className="!mt-2.5"> {x.content_with_weight}</p>
</FormContainer>
))}
</section>
<RAGFlowPagination
total={data.total}
onChange={onPaginationChange}
current={page}
pageSize={pageSize}
></RAGFlowPagination>
</>
)}
{!data.chunks?.length && !loading && (
<div className="flex justify-center items-center w-full h-[calc(100vh-280px)]">
<div>
<Empty type={EmptyType.SearchData} iconWidth={80}>
{data.isRuned && (
<div className="text-text-secondary">
{t('knowledgeDetails.noTestResultsForRuned')}
</header>
<div className="flex-1 h-0">
{data.chunks?.length > 0 && !loading && (
<>
<section className="px-5 pb-5 flex flex-col gap-5 overflow-auto h-full scrollbar-thin">
{data.chunks?.map((x) => (
<article>
<Card
key={x.chunk_id}
className="px-5 py-2.5 bg-transparent shadow-none"
>
<ChunkTitle item={x}></ChunkTitle>
<p className="!mt-2.5"> {x.content_with_weight}</p>
</Card>
</article>
))}
</section>
<RAGFlowPagination
total={data.total}
onChange={onPaginationChange}
current={page}
pageSize={pageSize}
></RAGFlowPagination>
</>
)}
{!data.chunks?.length && !loading && (
<div className="size-full p-5 flex justify-center items-center">
<div>
<Empty type={EmptyType.SearchData} iconWidth={80}>
<div className="text-text-secondary text-sm">
{t(
data.isRuned
? 'knowledgeDetails.noTestResultsForRuned'
: 'knowledgeDetails.noTestResultsForNotRuned',
)}
</div>
)}
{!data.isRuned && (
<div className="text-text-secondary">
{t('knowledgeDetails.noTestResultsForNotRuned')}
</div>
)}
</Empty>
</Empty>
</div>
</div>
</div>
)}
</div>
)}
</div>
</article>
);
}

4
web/src/pages/datasets/index.tsx
View File

@ -66,10 +66,10 @@ export default function Datasets() {
searchUrl.delete('isCreate');
setSearchUrl(searchUrl);
}
}, [isCreate, showModal, searchUrl, setSearchUrl]);
}, [isCreate, showModal, searchUrl, setSearchUrl, queryClient]);
return (
<>
<section className="py-4 flex-1 flex flex-col">
<section className="py-4 pt-8 flex-1 flex flex-col">
{(!kbs?.length || kbs?.length <= 0) && !searchString && (
<div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
<EmptyAppCard

8
web/src/pages/home/banner.tsx
View File

@ -42,11 +42,11 @@ export function Banner() {
export function NextBanner() {
const { t } = useTranslation();
return (
<section className="text-5xl pt-10 pb-14 font-bold px-10">
<span className="text-text-primary">{t('header.welcome')}</span>
<span className="pl-3 text-transparent bg-clip-text bg-gradient-to-l from-[#40EBE3] to-[#4A51FF]">
<h1 className="text-5xl font-bold leading-normal">
<span className="text-text-primary">{t('header.welcome')} </span>
<span className="text-transparent bg-clip-text bg-gradient-to-l from-[#40EBE3] to-[#4A51FF]">
RAGFlow
</span>
</section>
</h1>
);
}

16
web/src/pages/home/index.tsx
View File

@ -1,16 +1,18 @@
import { PageContainer } from '@/layouts/page-container';
import { Applications } from './applications';
import { NextBanner } from './banner';
import { Datasets } from './datasets';
const Home = () => {
return (
<section>
<NextBanner></NextBanner>
<section className="h-[calc(100dvh-260px)] overflow-auto px-10">
<Datasets></Datasets>
<Applications></Applications>
</section>
</section>
<PageContainer>
<header className="mb-8">
<NextBanner />
</header>
<Datasets />
<Applications />
</PageContainer>
);
};

172
web/src/pages/login-next/index.tsx
View File

@ -71,43 +71,24 @@ function LoginFormContent({
</div>
<div className=" w-full max-w-[540px] bg-bg-component backdrop-blur-sm rounded-2xl shadow-xl pt-14 pl-10 pr-10 pb-2 border border-border-button ">
{!disablePasswordLogin && (
<Form {...form}>
<form
className="flex flex-col gap-8 text-text-primary "
data-testid="auth-form"
data-active={isActiveFace ? 'true' : undefined}
onSubmit={form.handleSubmit(onCheck)}
>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel required>{t('emailLabel')}</FormLabel>
<FormControl>
<Input
data-testid="auth-email"
placeholder={t('emailPlaceholder')}
autoComplete="email"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{title === 'register' && (
<Form {...form}>
<form
className="flex flex-col gap-8 text-text-primary "
data-testid="auth-form"
data-active={isActiveFace ? 'true' : undefined}
onSubmit={form.handleSubmit(onCheck)}
>
<FormField
control={form.control}
name="nickname"
name="email"
render={({ field }) => (
<FormItem>
<FormLabel required>{t('nicknameLabel')}</FormLabel>
<FormLabel required>{t('emailLabel')}</FormLabel>
<FormControl>
<Input
data-testid="auth-nickname"
placeholder={t('nicknamePlaceholder')}
autoComplete="username"
data-testid="auth-email"
placeholder={t('emailPlaceholder')}
autoComplete="email"
{...field}
/>
</FormControl>
@ -115,73 +96,92 @@ function LoginFormContent({
</FormItem>
)}
/>
)}
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel required>{t('passwordLabel')}</FormLabel>
<FormControl>
<div className="relative">
<Input
data-testid="auth-password"
type={'password'}
placeholder={t('passwordPlaceholder')}
autoComplete={
title === 'login'
? 'current-password'
: 'new-password'
}
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
{title === 'register' && (
<FormField
control={form.control}
name="nickname"
render={({ field }) => (
<FormItem>
<FormLabel required>{t('nicknameLabel')}</FormLabel>
<FormControl>
<Input
data-testid="auth-nickname"
placeholder={t('nicknamePlaceholder')}
autoComplete="username"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
/>
{title === 'login' && (
<FormField
control={form.control}
name="remember"
name="password"
render={({ field }) => (
<FormItem>
<FormLabel required>{t('passwordLabel')}</FormLabel>
<FormControl>
<div className="flex gap-2">
<Checkbox
checked={field.value}
onCheckedChange={(checked) => {
field.onChange(checked);
}}
<div className="relative">
<Input
data-testid="auth-password"
type={'password'}
placeholder={t('passwordPlaceholder')}
autoComplete={
title === 'login'
? 'current-password'
: 'new-password'
}
{...field}
/>
<FormLabel
className={cn(' hover:text-text-primary', {
'text-text-disabled': !field.value,
'text-text-primary': field.value,
})}
>
{t('rememberMe')}
</FormLabel>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<ButtonLoading
data-testid="auth-submit"
type="submit"
loading={loading}
className="bg-metallic-gradient border-b-[#00BEB4] border-b-2 hover:bg-metallic-gradient hover:border-b-[#02bcdd] w-full my-8"
>
{title === 'login' ? t('login') : t('continue')}
</ButtonLoading>
</form>
</Form>
{title === 'login' && (
<FormField
control={form.control}
name="remember"
render={({ field }) => (
<FormItem>
<FormControl>
<div className="flex gap-2">
<Checkbox
checked={field.value}
onCheckedChange={(checked) => {
field.onChange(checked);
}}
/>
<FormLabel
className={cn(' hover:text-text-primary', {
'text-text-disabled': !field.value,
'text-text-primary': field.value,
})}
>
{t('rememberMe')}
</FormLabel>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<ButtonLoading
data-testid="auth-submit"
type="submit"
loading={loading}
className="bg-metallic-gradient border-b-[#00BEB4] border-b-2 hover:bg-metallic-gradient hover:border-b-[#02bcdd] w-full my-8"
>
{title === 'login' ? t('login') : t('continue')}
</ButtonLoading>
</form>
</Form>
)}
{title === 'login' && channels && channels.length > 0 && (
@ -361,7 +361,7 @@ const Login = () => {
<div className=" h-[inherit] relative overflow-auto">
<BgSvg isPaused />
<div className="absolute top-3 flex flex-col items-center mb-12 w-full text-text-primary">
<div className="z-20 absolute top-3 flex flex-col items-center mb-12 w-full text-text-primary">
<div className="flex items-center mb-4 w-full pl-10 pt-10 ">
<div className="w-12 h-12 p-2 rounded-lg flex items-center justify-center mr-3">
<img
@ -399,4 +399,4 @@ const Login = () => {
);
};
export default Login;
export default Login;

2
web/src/pages/next-chats/chat/chat-box/next-multiple-chat-box.tsx
View File

@ -181,7 +181,7 @@ const ChatCard = forwardRef(function ChatCard(
</div>
<div className="space-x-2">
<Tooltip>
<TooltipTrigger>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon-sm"

136
web/src/pages/next-chats/chat/index.tsx
View File

@ -1,36 +1,18 @@
import EmbedDialog from '@/components/embed-dialog';
import { useShowEmbedModal } from '@/components/embed-dialog/use-show-embed-dialog';
import { PageHeader } from '@/components/page-header';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { SharedFrom } from '@/constants/chat';
import {
useFetchConversationList,
useFetchConversationManually,
useFetchDialog,
useGetChatSearchParams,
} from '@/hooks/use-chat-request';
import { IClientConversation } from '@/interfaces/database/chat';
import { NextLayoutContainer } from '@/layouts/next';
import { cn } from '@/lib/utils';
import { Routes } from '@/routes';
import { useMount } from 'ahooks';
import { isEmpty } from 'lodash';
import {
LucideArrowBigLeft,
LucideArrowUpRight,
LucideSend,
} from 'lucide-react';
import { LucideArrowBigLeft, LucideArrowUpRight } from 'lucide-react';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router';
import { useHandleClickConversationCard } from '../hooks/use-click-card';
import { ChatSettings } from './app-settings/chat-settings';
import { MultipleChatBox } from './chat-box/next-multiple-chat-box';
@ -40,8 +22,6 @@ import { useAddChatBox } from './use-add-box';
import { useSwitchDebugMode } from './use-switch-debug-mode';
export default function Chat() {
const { id } = useParams();
const { data } = useFetchDialog();
const { t } = useTranslation();
const [currentConversation, setCurrentConversation] =
useState<IClientConversation>({} as IClientConversation);
@ -55,9 +35,6 @@ export default function Chat() {
const { removeChatBox, addChatBox, chatBoxIds, hasSingleChatBox } =
useAddChatBox(isDebugMode);
const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
useShowEmbedModal();
const { conversationId, isNew } = useGetChatSearchParams();
const { data: dialogList } = useFetchConversationList();
@ -93,7 +70,7 @@ export default function Chat() {
if (isDebugMode) {
return (
<section
className="pt-5 pb-16 h-[100vh] flex flex-col"
className="pt-5 pb-14 h-[100vh] flex flex-col"
data-testid="chat-detail-multimodel-root"
>
<header className="px-10 pb-5">
@ -126,77 +103,46 @@ export default function Chat() {
}
return (
<section className="h-full flex flex-col" data-testid="chat-detail">
<PageHeader>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink
// Not friendly for keyboard navigation
// onClick={navigateToChatList}
href={Routes.Chats}
>
{t('chat.chat')}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{data.name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<Button onClick={showEmbedModal} data-testid="chat-detail-embed-open">
<LucideSend />
{t('common.embedIntoSite')}
</Button>
</PageHeader>
<NextLayoutContainer>
<section className="h-full flex flex-col" data-testid="chat-detail">
<article className="flex flex-1 min-h-0 pb-9">
<Sessions handleConversationCardClick={handleSessionClick}></Sessions>
<article className="flex flex-1 min-h-0 pb-9">
<Sessions handleConversationCardClick={handleSessionClick}></Sessions>
<Card className="flex-1 min-w-0 bg-transparent border-none shadow-none h-full">
<CardContent className="flex p-0 h-full">
<Card className="flex flex-col flex-1 bg-transparent min-w-0">
<CardHeader
className={cn('p-5', {
'border-b-0.5 border-border-button': hasSingleChatBox,
})}
>
<CardTitle className="flex justify-between items-center text-base gap-2">
<div className="truncate">{currentConversationName}</div>
<Card className="flex-1 min-w-0 bg-transparent border-none shadow-none h-full">
<CardContent className="flex p-0 h-full">
<Card className="flex flex-col flex-1 bg-transparent min-w-0">
<CardHeader
className={cn('p-5', {
'border-b-0.5 border-border-button': hasSingleChatBox,
})}
>
<CardTitle className="flex justify-between items-center text-base gap-2">
<div className="truncate">{currentConversationName}</div>
<Button
variant={'ghost'}
onClick={switchDebugMode}
data-testid="chat-detail-multimodel-toggle"
>
<LucideArrowUpRight /> {t('chat.multipleModels')}
</Button>
</CardTitle>
</CardHeader>
<CardContent className="flex-1 p-0 min-h-0">
<SingleChatBox
controller={controller}
stopOutputMessage={stopOutputMessage}
conversation={currentConversation}
/>
</CardContent>
</Card>
<Button
variant="ghost"
onClick={switchDebugMode}
data-testid="chat-detail-multimodel-toggle"
>
<LucideArrowUpRight />
{t('chat.multipleModels')}
</Button>
</CardTitle>
</CardHeader>
<CardContent className="flex-1 p-0 min-h-0">
<SingleChatBox
controller={controller}
stopOutputMessage={stopOutputMessage}
conversation={currentConversation}
/>
</CardContent>
</Card>
<ChatSettings hasSingleChatBox={hasSingleChatBox}></ChatSettings>
</CardContent>
</Card>
</article>
{embedVisible && (
<EmbedDialog
visible={embedVisible}
hideModal={hideEmbedModal}
token={id!}
from={SharedFrom.Chat}
beta={beta}
isAgent={false}
></EmbedDialog>
)}
</section>
<ChatSettings hasSingleChatBox={hasSingleChatBox}></ChatSettings>
</CardContent>
</Card>
</article>
</section>
</NextLayoutContainer>
);
}

40
web/src/pages/next-chats/chat/sessions.tsx
View File

@ -1,9 +1,17 @@
import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
import EmbedDialog from '@/components/embed-dialog';
import { useShowEmbedModal } from '@/components/embed-dialog/use-show-embed-dialog';
import { MoreButton } from '@/components/more-button';
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { SearchInput } from '@/components/ui/input';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { SharedFrom } from '@/constants/chat';
import { useSetModalState } from '@/hooks/common-hooks';
import {
useFetchDialog,
@ -15,11 +23,13 @@ import {
LucideListChecks,
LucidePanelLeftClose,
LucidePlus,
LucideSend,
LucideTrash2,
LucideUndo2,
} from 'lucide-react';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router';
import { useChatUrlParams } from '../hooks/use-chat-url';
import { useHandleClickConversationCard } from '../hooks/use-click-card';
import { useSelectDerivedConversationList } from '../hooks/use-select-conversation-list';
@ -132,6 +142,10 @@ export function Sessions({ handleConversationCardClick }: SessionProps) {
const selectedCount = useMemo(() => selectedIds.size, [selectedIds]);
const { id } = useParams();
const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
useShowEmbedModal();
if (!visible) {
return (
<div className="p-5">
@ -158,7 +172,7 @@ export function Sessions({ handleConversationCardClick }: SessionProps) {
role="complementary"
data-testid="chat-detail-sessions"
>
<header className="flex items-center text-base justify-between gap-2">
<header className="flex items-center text-base justify-between gap-4">
<div className="flex gap-3 items-center min-w-0">
<RAGFlowAvatar
avatar={data.icon}
@ -169,10 +183,32 @@ export function Sessions({ handleConversationCardClick }: SessionProps) {
<span className="flex-1 truncate">{data.name}</span>
</div>
<Tooltip>
<TooltipTrigger asChild>
<Button
onClick={showEmbedModal}
size="icon-xs"
data-testid="chat-detail-embed-open"
>
<LucideSend />
</Button>
</TooltipTrigger>
<TooltipContent>{t('common.embedIntoSite')}</TooltipContent>
</Tooltip>
<EmbedDialog
visible={embedVisible}
hideModal={hideEmbedModal}
token={id!}
from={SharedFrom.Chat}
beta={beta}
isAgent={false}
/>
<Button
variant="transparent"
size="icon-sm"
className="border-0"
className="border-0 ml-auto"
onClick={switchVisible}
data-testid="chat-detail-sessions-close"
>

32
web/src/pages/next-search/index.tsx
View File

@ -1,16 +1,7 @@
import { useFetchTokenListBeforeOtherStep } from '@/components/embed-dialog/use-show-embed-dialog';
import { PageHeader } from '@/components/page-header';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { SharedFrom } from '@/constants/chat';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import {
useFetchTenantInfo,
useFetchUserInfo,
@ -31,7 +22,6 @@ import { SearchSetting } from './search-setting';
import SearchingPage from './searching';
export default function SearchPage() {
const { navigateToSearchList } = useNavigatePage();
const [isSearching, setIsSearching] = useState(false);
const { data: SearchData } = useFetchSearchDetail();
const { beta, handleOperate } = useFetchTokenListBeforeOtherStep();
@ -57,22 +47,7 @@ export default function SearchPage() {
}, [isSearching]);
return (
<section data-testid="search-detail">
<PageHeader>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onClick={navigateToSearchList}>
{t('header.search')}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{SearchData?.name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</PageHeader>
<section className="size-full relative" data-testid="search-detail">
<div className="flex gap-3 w-full bg-bg-base">
<div className="flex-1">
{!isSearching && (
@ -128,9 +103,8 @@ export default function SearchPage() {
// ></EmbedDialog>
}
</div>
<div className="absolute end-5 top-4 ">
<div className="absolute end-5 top-4">
<Button
className="bg-text-primary text-bg-base border-b-accent-primary border-b-2"
onClick={() => {
handleOperate().then((res) => {
console.log(res, 'res');

47
web/src/pages/user-setting/index.tsx
View File

@ -1,52 +1,15 @@
import { Outlet } from 'react-router';
import { SideBar } from './sidebar';
import { PageHeader } from '@/components/page-header';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { cn } from '@/lib/utils';
import { House } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import styles from './index.module.less';
const UserSetting = () => {
const { t } = useTranslation();
const { navigateToHome } = useNavigatePage();
return (
<section className="flex flex-col h-full">
<PageHeader>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onClick={navigateToHome}>
<House className="size-4" />
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{t('setting.profile')}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</PageHeader>
<div
className={cn(
styles.settingWrapper,
'overflow-auto flex flex-1 pt-4 pr-4 pb-4',
)}
>
<SideBar></SideBar>
<div className={cn(styles.outletWrapper, 'flex flex-1 rounded-lg')}>
<Outlet></Outlet>
</div>
<section className="pt-8 size-full grid grid-cols-[auto_1fr] grid-rows-1">
<SideBar></SideBar>
<div className={cn('pr-6 pb-6 flex flex-1 rounded-lg overflow-hidden')}>
<Outlet></Outlet>
</div>
</section>
);

307
web/src/routes.tsx
View File

@ -165,62 +165,71 @@ const routeConfigOptions = [
],
},
{
path: Routes.Datasets,
layout: false,
path: Routes.Chat + '/:id',
Component: () => import('@/pages/next-chats/chat'),
},
{
path: Routes.Root,
Component: () => import('@/layouts/next'),
children: [
{
path: Routes.Datasets,
Component: () => import('@/pages/datasets'),
},
],
},
{
path: Routes.Chats,
layout: false,
Component: () => import('@/layouts/next'),
children: [
{
path: Routes.DatasetBase,
Component: () => import('@/pages/dataset'),
children: [
{
path: `${Routes.Dataset}/:id`,
Component: () => import('@/pages/dataset/dataset'),
},
{
path: `${Routes.DatasetBase}${Routes.DatasetTesting}/:id`,
Component: () => import('@/pages/dataset/testing'),
},
{
path: `${Routes.DatasetBase}${Routes.KnowledgeGraph}/:id`,
Component: () => import('@/pages/dataset/knowledge-graph'),
},
{
path: `${Routes.DatasetBase}${Routes.DataSetOverview}/:id`,
Component: () => import('@/pages/dataset/dataset-overview'),
},
{
path: `${Routes.DatasetBase}${Routes.DataSetSetting}/:id`,
Component: () => import('@/pages/dataset/dataset-setting'),
},
],
},
{
path: Routes.Chats,
Component: () => import('@/pages/next-chats'),
},
],
},
{
path: Routes.Chat + '/:id',
layout: false,
Component: () => import('@/pages/next-chats/chat'),
},
{
path: Routes.Searches,
layout: false,
Component: () => import('@/layouts/next'),
children: [
{
path: Routes.Searches,
Component: () => import('@/pages/next-searches'),
},
],
},
{
path: Routes.Memories,
layout: false,
Component: () => import('@/layouts/next'),
children: [
{
path: `${Routes.Search}/:id`,
layout: false,
Component: () => import('@/pages/next-search'),
},
{
path: Routes.Agents,
Component: () => import('@/pages/agents'),
},
{
path: Routes.AgentTemplates,
layout: false,
Component: () => import('@/pages/agents/agent-templates'),
},
{
path: Routes.Memories,
Component: () => import('@/pages/memories'),
},
],
},
{
path: `${Routes.Memory}`,
layout: false,
Component: () => import('@/layouts/next'),
children: [
{
path: `${Routes.Memory}`,
layout: false,
Component: () => import('@/pages/memory'),
children: [
{
@ -233,181 +242,105 @@ const routeConfigOptions = [
},
],
},
],
},
{
path: `${Routes.Search}/:id`,
layout: false,
Component: () => import('@/pages/next-search'),
},
{
path: `${Routes.SearchShare}`,
layout: false,
Component: () => import('@/pages/next-search/share'),
},
{
path: Routes.Agents,
layout: false,
Component: () => import('@/layouts/next'),
children: [
{
path: Routes.Agents,
Component: () => import('@/pages/agents'),
},
],
},
{
path: `${Routes.AgentLogPage}/:id`,
layout: false,
Component: () => import('@/pages/agents/agent-log-page'),
},
{
path: `${Routes.Agent}/:id`,
layout: false,
Component: () => import('@/pages/agent'),
},
{
path: Routes.AgentExplore,
layout: false,
Component: () => import('@/pages/agent/explore'),
errorElement: <FallbackComponent />,
},
{
path: Routes.AgentTemplates,
layout: false,
Component: () => import('@/pages/agents/agent-templates'),
},
{
path: Routes.Files,
layout: false,
Component: () => import('@/layouts/next'),
children: [
{
path: Routes.Files,
Component: () => import('@/pages/files'),
},
],
},
{
path: Routes.DatasetBase,
layout: false,
Component: () => import('@/layouts/next'),
children: [
{
path: Routes.DatasetBase,
element: <Navigate to={Routes.Dataset} replace />,
},
],
},
{
path: Routes.DatasetBase,
layout: false,
Component: () => import('@/pages/dataset'),
children: [
{
path: `${Routes.Dataset}/:id`,
Component: () => import('@/pages/dataset/dataset'),
},
{
path: `${Routes.DatasetBase}${Routes.DatasetTesting}/:id`,
Component: () => import('@/pages/dataset/testing'),
},
{
path: `${Routes.DatasetBase}${Routes.KnowledgeGraph}/:id`,
Component: () => import('@/pages/dataset/knowledge-graph'),
},
{
path: `${Routes.DatasetBase}${Routes.DataSetOverview}/:id`,
Component: () => import('@/pages/dataset/dataset-overview'),
},
{
path: `${Routes.DatasetBase}${Routes.DataSetSetting}/:id`,
Component: () => import('@/pages/dataset/dataset-setting'),
},
],
},
{
path: `${Routes.DataflowResult}`,
layout: false,
Component: () => import('@/pages/dataflow-result'),
},
{
path: `${Routes.ParsedResult}/chunks`,
layout: false,
Component: () =>
import('@/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk'),
},
{
path: Routes.Chunk,
layout: false,
children: [
{
path: Routes.Chunk,
Component: () => import('@/pages/chunk'),
path: Routes.UserSetting,
Component: () => import('@/pages/user-setting'),
layout: false,
children: [
{
path: `${Routes.ChunkResult}/:id`,
Component: () => import('@/pages/chunk/chunk-result'),
path: Routes.UserSetting,
element: (
<Navigate to={`/user-setting${Routes.DataSource}`} replace />
),
},
{
path: `${Routes.ResultView}/:id`,
Component: () => import('@/pages/chunk/result-view'),
path: `${Routes.UserSetting}/profile`,
Component: () => import('@/pages/user-setting/profile'),
},
{
path: `${Routes.UserSetting}/locale`,
Component: () => import('@/pages/user-setting/setting-locale'),
},
{
path: `${Routes.UserSetting}/model`,
Component: () => import('@/pages/user-setting/setting-model'),
},
{
path: `${Routes.UserSetting}/team`,
Component: () => import('@/pages/user-setting/setting-team'),
},
{
path: `${Routes.UserSetting}${Routes.Api}`,
Component: () => import('@/pages/user-setting/setting-api'),
},
{
path: `${Routes.UserSetting}${Routes.Mcp}`,
Component: () => import('@/pages/user-setting/mcp'),
},
{
path: `${Routes.UserSetting}${Routes.DataSource}${Routes.DataSourceDetailPage}`,
Component: () =>
import('@/pages/user-setting/data-source/data-source-detail-page'),
},
{
path: `${Routes.UserSetting}${Routes.DataSource}`,
Component: () => import('@/pages/user-setting/data-source'),
},
],
},
],
},
{
path: Routes.Chunk,
layout: false,
Component: () => import('@/pages/chunk'),
path: `${Routes.SearchShare}`,
Component: () => import('@/pages/next-search/share'),
},
{
path: '/user-setting',
Component: () => import('@/pages/user-setting'),
layout: false,
path: Routes.Agent,
children: [
{
path: '/user-setting',
element: <Navigate to={`/user-setting${Routes.DataSource}`} replace />,
path: `${Routes.Agent}/:id`,
Component: () => import('@/pages/agent'),
},
{
path: '/user-setting/profile',
Component: () => import('@/pages/user-setting/profile'),
},
{
path: '/user-setting/locale',
Component: () => import('@/pages/user-setting/setting-locale'),
},
{
path: '/user-setting/model',
Component: () => import('@/pages/user-setting/setting-model'),
},
{
path: '/user-setting/team',
Component: () => import('@/pages/user-setting/setting-team'),
},
{
path: `/user-setting${Routes.Api}`,
Component: () => import('@/pages/user-setting/setting-api'),
},
{
path: `/user-setting${Routes.Mcp}`,
Component: () => import('@/pages/user-setting/mcp'),
},
{
path: `/user-setting${Routes.DataSource}`,
Component: () => import('@/pages/user-setting/data-source'),
path: Routes.AgentExplore,
Component: () => import('@/pages/agent/explore'),
errorElement: <FallbackComponent />,
},
],
},
{
path: `/user-setting${Routes.DataSource}${Routes.DataSourceDetailPage}`,
Component: () =>
import('@/pages/user-setting/data-source/data-source-detail-page'),
layout: false,
path: `${Routes.AgentLogPage}/:id`,
Component: () => import('@/pages/agents/agent-log-page'),
},
{
path: `${Routes.DataflowResult}`,
Component: () => import('@/pages/dataflow-result'),
},
{
path: Routes.Chunk,
children: [
{
path: `${Routes.Chunk}`,
Component: () => import('@/pages/chunk'),
},
{
path: `${Routes.ParsedResult}/chunks`,
Component: () =>
import('@/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk'),
},
{
path: `${Routes.ChunkResult}/:id`,
Component: () => import('@/pages/chunk/chunk-result'),
},
{
path: `${Routes.ResultView}/:id`,
Component: () => import('@/pages/chunk/result-view'),
},
],
},
{
path: Routes.Admin,
@ -420,7 +353,6 @@ const routeConfigOptions = [
{
path: Routes.Admin,
Component: () => import('@/pages/admin/layouts/authorized-layout'),
children: [
{
path: `${Routes.AdminUserManagement}/:id`,
@ -428,7 +360,6 @@ const routeConfigOptions = [
},
{
Component: () => import('@/pages/admin/layouts/navigation-layout'),
children: [
{
path: Routes.AdminServices,

5
web/src/utils/css-support.ts Normal file
View File

@ -0,0 +1,5 @@
export const supportsCssAnchor =
CSS.supports('position-anchor', '--anchor-name') &&
CSS.supports('anchor-name', '--anchor-name') &&
CSS.supports('top', 'anchor(--anchor-name bottom)') &&
CSS.supports('width', 'anchor-size(--anchor-name width)');

24
web/tailwind.config.js
View File

@ -191,9 +191,18 @@ module.exports = {
'linear-gradient(104deg, rgb(var(--text-primary)) 30%, var(--metallic) 50%, rgb(var(--text-primary)) 70%)',
},
borderRadius: {
lg: `var(--radius)`,
md: `calc(var(--radius) - 2px)`,
sm: 'calc(var(--radius) - 4px)',
px: '1px',
'4xl': '1rem' /* 16px */,
'3xl': '0.75rem' /* 12px */,
'2xl': '0.625rem' /* 10px */,
xl: '0.5rem' /* 8px */,
lg: '0.4375rem' /* 7px */,
DEFAULT: '0.375rem' /* 6px */,
sm: '0.3125rem' /* 5px */,
xs: '0.25rem' /* 4px */,
'2xs': '0.1875rem' /* 3px */,
'3xs': '0.125' /* 2px */,
},
fontFamily: {
sans: ['var(--font-sans)', ...fontFamily.sans],
@ -215,12 +224,21 @@ module.exports = {
from: { transform: 'rotate(0deg)' },
to: { transform: 'rotate(-360deg)' },
},
'bell-shake': {
'0%,25%': { transform: 'rotate(0)', transformOrigin: 'center 25% ' },
'3.125%': { transform: 'rotate(-12.5deg)' },
'9.375%': { transform: 'rotate(11deg)' },
'15.625%': { transform: 'rotate(-9.5deg)' },
'21.875%': { transform: 'rotate(7.5deg)' },
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
'caret-blink': 'caret-blink 1.25s ease-out infinite',
'spin-reverse': 'spin-reverse 1s linear infinite',
'bell-shake':
'bell-shake 2s 1s cubic-bezier(0.33, 1, 0.68, 1) infinite',
},
},
},

8
web/tailwind.css
View File

@ -286,6 +286,14 @@
}
}
@layer base {
* {
/* Make this default */
scrollbar-width: thin;
scrollbar-color: var(--border-default) var(--bg-card);
}
}
@layer utilities {
.scrollbar-auto {
/* hide scrollbar */