Features: Memory page rendering and other bug fixes (#11784)

### What problem does this PR solve?

Features: Memory page rendering and other bug fixes
- Rendering of the Memory list page
- Rendering of the message list page in Memory
- Fixed an issue where the empty state was incorrectly displayed when
search criteria were applied
- Added a web link for the API-Key
- modifying the index_mode attribute of the Confluence data source.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/memory/sidebar/hooks.tsx

@@ -0,0 +1,17 @@
+import { Routes } from '@/routes';
+import { useCallback } from 'react';
+import { useNavigate, useParams } from 'umi';
+
+export const useHandleMenuClick = () => {
+  const navigate = useNavigate();
+  const { id } = useParams();
+
+  const handleMenuClick = useCallback(
+    (key: Routes) => () => {
+      navigate(`${Routes.Memory}${key}/${id}`);
+    },
+    [id, navigate],
+  );
+
+  return { handleMenuClick };
+};

web/src/pages/memory/sidebar/index.tsx

@@ -0,0 +1,88 @@
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { Button } from '@/components/ui/button';
+import { useSecondPathName } from '@/hooks/route-hook';
+import { cn, formatBytes } from '@/lib/utils';
+import { Routes } from '@/routes';
+import { formatPureDate } from '@/utils/date';
+import { Banknote, Logs } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFetchMemoryBaseConfiguration } from '../hooks/use-memory-setting';
+import { useHandleMenuClick } from './hooks';
+
+type PropType = {
+  refreshCount?: number;
+};
+
+export function SideBar({ refreshCount }: PropType) {
+  const pathName = useSecondPathName();
+  const { handleMenuClick } = useHandleMenuClick();
+  // refreshCount: be for avatar img sync update on top left
+  const { data } = useFetchMemoryBaseConfiguration({ refreshCount });
+  const { t } = useTranslation();
+
+  const items = useMemo(() => {
+    const list = [
+      {
+        icon: <Logs className="size-4" />,
+        label: t(`knowledgeDetails.overview`),
+        key: Routes.MemoryMessage,
+      },
+      {
+        icon: <Banknote className="size-4" />,
+        label: t(`knowledgeDetails.configuration`),
+        key: Routes.MemorySetting,
+      },
+    ];
+    return list;
+  }, [t]);
+
+  return (
+    <aside className="relative p-5 space-y-8">
+      <div className="flex gap-2.5 max-w-[200px] items-center">
+        <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>
+          <div className="flex justify-between">
+            <span>
+              {data.doc_num} {t('knowledgeDetails.files')}
+            </span>
+            <span>{formatBytes(data.size)}</span>
+          </div>
+          <div>
+            {t('knowledgeDetails.created')} {formatPureDate(data.create_time)}
+          </div>
+        </div>
+      </div>
+
+      <div className="w-[200px] flex flex-col gap-5">
+        {items.map((item, itemIdx) => {
+          const active = '/' + pathName === item.key;
+          return (
+            <Button
+              key={itemIdx}
+              variant={active ? 'secondary' : '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,
+                },
+              )}
+              onClick={handleMenuClick(item.key)}
+            >
+              {item.icon}
+              <span>{item.label}</span>
+            </Button>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}