@lobehub/lobehub 2.0.0-next.342 → 2.0.0-next.343

package/packages/types/src/userMemory/shared.ts

@@ -76,3 +76,33 @@ export enum ContextStatusEnum {
   Planned = 'planned',
 }
 export const CONTEXT_STATUS = Object.values(ContextStatusEnum);
+
+/**
+ * Shared types for memory list queries
+ */
+
+export interface BaseListParams {
+  order?: 'asc' | 'desc';
+  page?: number;
+  pageSize?: number;
+  q?: string;
+  tags?: string[];
+  types?: string[];
+}
+
+export interface BaseListResult<T> {
+  items: T[];
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface BaseListItem {
+  capturedAt: Date;
+  createdAt: Date;
+  id: string;
+  tags: string[] | null;
+  title: string | null;
+  type: string | null;
+  updatedAt: Date;
+}

package/src/app/[variants]/(main)/group/profile/features/Header/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Flexbox } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { Crown, Users } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,7 +17,7 @@ import { systemStatusSelectors } from '@/store/global/selectors';
 import AgentBuilderToggle from './AgentBuilderToggle';
 import ChromeTabs, { type ChromeTabItem } from './ChromeTabs';
 
-const useStyles = createStyles(({ css, token }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   header: css`
     overflow: hidden;
     flex: none;
@@ -26,7 +26,7 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 44px;
     padding-block: 8px;
     padding-inline: 12px;
-    border-block-end: 1px solid ${token.colorBorderSecondary};
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
   `,
   tabsWrapper: css`
     scrollbar-width: none;
@@ -42,7 +42,6 @@ const useStyles = createStyles(({ css, token }) => ({
 
 const Header = memo(() => {
   const { t } = useTranslation('chat');
-  const { styles } = useStyles();
 
   const [showAddModal, setShowAddModal] = useState(false);
 

package/src/app/[variants]/(main)/home/features/InputArea/SkillInstallBanner.tsx

@@ -2,7 +2,7 @@
 
 import { getKlavisServerByServerIdentifier, getLobehubSkillProviderById } from '@lobechat/const';
 import { Avatar, Flexbox, Icon } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { Blocks } from 'lucide-react';
 import { type ReactNode, createElement, memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +11,7 @@ import SkillStore from '@/features/SkillStore';
 import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 
-const useStyles = createStyles(({ css, token }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   banner: css`
     cursor: pointer;
 
@@ -28,24 +28,24 @@ const useStyles = createStyles(({ css, token }) => ({
     margin-block-end: 6px;
     padding-block: 42px 10px;
     padding-inline: 16px;
-    border: 1px solid ${token.colorBorderSecondary};
+    border: 1px solid ${cssVar.colorBorderSecondary};
     border-radius: 20px;
 
-    background: ${token.colorFillQuaternary};
+    background: ${cssVar.colorFillQuaternary};
     box-shadow: 0 12px 32px rgb(0 0 0 / 4%);
 
     transition: background 0.2s ease-in-out;
 
     &:hover {
-      background: ${token.colorFillQuaternary};
+      background: ${cssVar.colorFillQuaternary};
     }
   `,
   icon: css`
-    color: ${token.colorTextSecondary};
+    color: ${cssVar.colorTextSecondary};
   `,
   text: css`
     font-size: 13px;
-    color: ${token.colorTextSecondary};
+    color: ${cssVar.colorTextSecondary};
   `,
 }));
 
@@ -60,7 +60,6 @@ const BANNER_SKILL_IDS = [
 ] as const;
 
 const SkillInstallBanner = memo(() => {
-  const { styles } = useStyles();
   const { t } = useTranslation('plugin');
   const [open, setOpen] = useState(false);
 

package/src/app/[variants]/(main)/memory/(home)/features/Persona/PersonaDetail.tsx

@@ -0,0 +1,58 @@
+import { Markdown } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { memo } from 'react';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  markdown: css`
+    h2 {
+      margin-block: 24px 12px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    h3 {
+      margin-block: 16px 8px;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    p {
+      margin-block-end: 8px;
+      font-size: 14px;
+      line-height: 1.6;
+      color: ${cssVar.colorTextSecondary};
+    }
+
+    ul {
+      margin-block: 8px;
+      margin-inline: 0;
+      padding-inline-start: 20px;
+
+      li {
+        margin-block-end: 4px;
+        font-size: 14px;
+        line-height: 1.6;
+        color: ${cssVar.colorTextSecondary};
+      }
+    }
+
+    strong {
+      font-weight: 500;
+      color: ${cssVar.colorText};
+    }
+  `,
+}));
+
+interface PersonaDetailProps {
+  children: string;
+}
+
+const PersonaDetail = memo<PersonaDetailProps>(({ children }) => {
+  return (
+    <Markdown className={styles.markdown} enableImageGallery={false} enableLatex={false}>
+      {children}
+    </Markdown>
+  );
+});
+
+export default PersonaDetail;

package/src/app/[variants]/(main)/memory/(home)/features/Persona/PersonaHeader.tsx

@@ -0,0 +1,22 @@
+import { Text } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { memo } from 'react';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  title: css`
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 1.4;
+    color: ${cssVar.colorText};
+  `,
+}));
+
+const PersonaHeader = memo(() => {
+  return (
+    <Text as={'h1'} className={styles.title}>
+      Persona
+    </Text>
+  );
+});
+
+export default PersonaHeader;

package/src/app/[variants]/(main)/memory/(home)/features/Persona/PersonaSummary.tsx

@@ -0,0 +1,43 @@
+import { createStaticStyles } from 'antd-style';
+import { memo } from 'react';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  summary: css`
+    position: relative;
+
+    padding-block: 16px;
+    padding-inline: 20px;
+    border-radius: 8px;
+
+    font-size: 15px;
+    font-style: italic;
+    line-height: 1.6;
+    color: ${cssVar.colorText};
+
+    background: ${cssVar.colorFillQuaternary};
+
+    &::before {
+      content: '"';
+
+      position: absolute;
+      inset-block-start: 8px;
+      inset-inline-start: 12px;
+
+      font-family: Georgia, serif;
+      font-size: 28px;
+      font-style: normal;
+      line-height: 1;
+      color: ${cssVar.colorTextQuaternary};
+    }
+  `,
+}));
+
+interface PersonaSummaryProps {
+  children: string;
+}
+
+const PersonaSummary = memo<PersonaSummaryProps>(({ children }) => {
+  return <div className={styles.summary}>{children}</div>;
+});
+
+export default PersonaSummary;

package/src/app/[variants]/(main)/memory/(home)/features/Persona/index.tsx

@@ -0,0 +1,53 @@
+import { Flexbox } from '@lobehub/ui';
+import { cx } from 'antd-style';
+import { memo, useState } from 'react';
+
+import { EditorModal } from '@/features/EditorModal';
+import { useUserMemoryStore } from '@/store/userMemory';
+
+import PersonaDetail from './PersonaDetail';
+import PersonaSummary from './PersonaSummary';
+
+interface PersonaProps {
+  className?: string;
+  onEditClick?: () => void;
+}
+
+export const usePersonaEditor = () => {
+  const [editOpen, setEditOpen] = useState(false);
+  const persona = useUserMemoryStore((s) => s.persona);
+
+  const openEditor = () => setEditOpen(true);
+  const closeEditor = () => setEditOpen(false);
+
+  const EditorModalElement = persona ? (
+    <EditorModal
+      onCancel={closeEditor}
+      onConfirm={async () => {
+        closeEditor();
+      }}
+      open={editOpen}
+      value={persona.content}
+    />
+  ) : null;
+
+  return { EditorModalElement, openEditor };
+};
+
+const Persona = memo<PersonaProps>(({ className }) => {
+  const useFetchPersona = useUserMemoryStore((s) => s.useFetchPersona);
+  const persona = useUserMemoryStore((s) => s.persona);
+
+  const { isLoading } = useFetchPersona();
+
+  if (isLoading || !persona) return null;
+
+  return (
+    <Flexbox className={cx(className)} gap={24}>
+      {persona.summary && <PersonaSummary>{persona.summary}</PersonaSummary>}
+      <PersonaDetail>{persona.content}</PersonaDetail>
+    </Flexbox>
+  );
+});
+
+export default Persona;

package/src/app/[variants]/(main)/memory/(home)/features/RoleTagCloud/index.tsx

@@ -1,12 +1,12 @@
 import { ActionIcon, Block } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { MaximizeIcon, MinimizeIcon } from 'lucide-react';
-import dynamic from '@/libs/next/dynamic';
 import { memo, useEffect, useState } from 'react';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { type QueryTagsResult } from '@/database/models/userMemory';
+import dynamic from '@/libs/next/dynamic';
 
 const TagCloudCanvas = dynamic(() => import('./TagCloudCanvas'), {
   loading: () => <Loading debugId={'TagCloud'} />,
@@ -36,7 +36,7 @@ const styles = createStaticStyles(({ css }) => ({
     position: relative;
     overflow: hidden;
     width: 100%;
-    height: 480px;
+    height: 400px;
 
     .fullscreen-icon {
       opacity: 0;

package/src/app/[variants]/(main)/memory/(home)/index.tsx

@@ -1,20 +1,24 @@
 import { Flexbox } from '@lobehub/ui';
+// import { PencilLineIcon } from 'lucide-react';
 import { type FC } from 'react';
 
-import MemoryEmpty from '@/app/[variants]/(main)/memory/features/MemoryEmpty';
-import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/memory/features/TimeLineView/useScrollParent';
 import Loading from '@/components/Loading/BrandTextLoading';
 import NavHeader from '@/features/NavHeader';
 import WideScreenContainer from '@/features/WideScreenContainer';
 import WideScreenButton from '@/features/WideScreenContainer/WideScreenButton';
 import { useUserMemoryStore } from '@/store/userMemory';
 
+import MemoryEmpty from '../features/MemoryEmpty';
+import { SCROLL_PARENT_ID } from '../features/TimeLineView/useScrollParent';
+import Persona from './features/Persona';
+import PersonaHeader from './features/Persona/PersonaHeader';
 import RoleTagCloud from './features/RoleTagCloud';
 
 const Home: FC = () => {
   const useFetchTags = useUserMemoryStore((s) => s.useFetchTags);
   const roles = useUserMemoryStore((s) => s.roles);
   const { isLoading } = useFetchTags();
+  // const { EditorModalElement, openEditor } = usePersonaEditor();
 
   if (isLoading) return <Loading debugId={'Home'} />;
 
@@ -25,7 +29,12 @@ const Home: FC = () => {
   return (
     <Flexbox flex={1} height={'100%'}>
       <NavHeader
-        right={<WideScreenButton />}
+        right={
+          <Flexbox gap={8} horizontal>
+            {/* <ActionIcon icon={PencilLineIcon} onClick={openEditor} /> */}
+            <WideScreenButton />
+          </Flexbox>
+        }
         style={{
           zIndex: 1,
         }}
@@ -37,9 +46,12 @@ const Home: FC = () => {
         width={'100%'}
       >
         <WideScreenContainer gap={32} paddingBlock={48}>
+          <PersonaHeader />
           <RoleTagCloud tags={roles} />
+          <Persona />
         </WideScreenContainer>
       </Flexbox>
+      {/* {EditorModalElement} */}
     </Flexbox>
   );
 };

package/src/app/[variants]/(main)/memory/experiences/features/List/GridView/ExperienceCard.tsx

@@ -1,3 +1,4 @@
+import type { ExperienceListItem } from '@lobechat/types';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { memo } from 'react';
@@ -5,15 +6,14 @@ import { useTranslation } from 'react-i18next';
 
 import GridCard from '@/app/[variants]/(main)/memory/features/GridView/GridCard';
 import ProgressIcon from '@/app/[variants]/(main)/memory/features/ProgressIcon';
-import { type DisplayExperienceMemory } from '@/database/repositories/userMemory';
 
 import ExperienceDropdown from '../../ExperienceDropdown';
 
 dayjs.extend(relativeTime);
 
 interface ExperienceCardProps {
-  experience: DisplayExperienceMemory;
-  onClick: (experience: DisplayExperienceMemory) => void;
+  experience: ExperienceListItem;
+  onClick: (experience: ExperienceListItem) => void;
 }
 
 const ExperienceCard = memo<ExperienceCardProps>(({ experience, onClick }) => {

package/src/app/[variants]/(main)/memory/experiences/features/List/GridView/index.tsx

@@ -1,15 +1,15 @@
+import type { ExperienceListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import { type DisplayExperienceMemory } from '@/database/repositories/userMemory';
 import { useUserMemoryStore } from '@/store/userMemory';
 
 import { GridView } from '../../../../features/GridView';
 import ExperienceCard from './ExperienceCard';
 
 interface GridViewProps {
-  experiences: DisplayExperienceMemory[];
+  experiences: ExperienceListItem[];
   isLoading?: boolean;
-  onClick: (experience: DisplayExperienceMemory) => void;
+  onClick: (experience: ExperienceListItem) => void;
 }
 
 const ExperiencesGridView = memo<GridViewProps>(({ experiences, isLoading, onClick }) => {

package/src/app/[variants]/(main)/memory/experiences/features/List/TimelineView/ExperienceCard.tsx

@@ -1,13 +1,13 @@
+import type { ExperienceListItem } from '@lobechat/types';
 import { memo } from 'react';
 
 import TimeLineCard from '@/app/[variants]/(main)/memory/features/TimeLineView/TimeLineCard';
-import { type DisplayExperienceMemory } from '@/database/repositories/userMemory';
 
 import ExperienceDropdown from '../../ExperienceDropdown';
 
 interface ExperienceCardProps {
-  experience: DisplayExperienceMemory;
-  onClick: (experience: DisplayExperienceMemory) => void;
+  experience: ExperienceListItem;
+  onClick: (experience: ExperienceListItem) => void;
 }
 
 const ExperienceCard = memo<ExperienceCardProps>(({ experience, onClick }) => {

package/src/app/[variants]/(main)/memory/experiences/features/List/TimelineView/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import type { ExperienceListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import { type DisplayExperienceMemory } from '@/database/repositories/userMemory';
 import { useUserMemoryStore } from '@/store/userMemory';
 
 import { TimelineView as GenericTimelineView } from '../../../../features/TimeLineView';
@@ -10,9 +10,9 @@ import { PeriodHeader, TimelineItemWrapper } from '../../../../features/TimeLine
 import ExperienceCard from './ExperienceCard';
 
 interface ExperienceTimelineViewProps {
-  experiences: DisplayExperienceMemory[];
+  experiences: ExperienceListItem[];
   isLoading?: boolean;
-  onCardClick: (experience: DisplayExperienceMemory) => void;
+  onCardClick: (experience: ExperienceListItem) => void;
 }
 
 const ExperienceTimelineView = memo<ExperienceTimelineViewProps>(

package/src/app/[variants]/(main)/memory/features/SourceLink.tsx

@@ -1,28 +1,19 @@
 import { Button, Icon, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Link2 } from 'lucide-react';
-import Link from '@/libs/router/Link';
 import { memo } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { type MemorySource } from '@/database/repositories/userMemory';
+import Link from '@/libs/router/Link';
 
 const SourceLink = memo<{ source?: MemorySource | null }>(({ source }) => {
-  const navigate = useNavigate();
-
   if (!source) return;
 
   const title = source.title || source.id?.replace('tpc_', '').slice(0, 8);
 
   return (
     <Link
-      href={`/agent/${source.agentId}?topicId=${source.id}`}
-      onClick={(e) => {
-        if (!source) return;
-        e.stopPropagation();
-        e.preventDefault();
-        navigate(`/agent/${source.agentId}?topicId=${source.id}`);
-      }}
+      href={`/agent/${source.agentId}?topic=${source.id}`}
       style={{
         flex: 1,
         maxWidth: '100%',

package/src/app/[variants]/(main)/memory/features/TimeLineView/TimeLineCard.tsx

@@ -1,6 +1,5 @@
-import { Block, Flexbox, Icon, Tag, Text } from '@lobehub/ui';
+import { Block, Flexbox, Tag, Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { Link2 } from 'lucide-react';
 import { type ReactNode, memo } from 'react';
 
 import CateTag from '../CateTag';
@@ -67,13 +66,7 @@ const TimeLineCard = memo<TimeLineCardProps>(
             ) : (
               title
             )}
-            {typeof titleAddon === 'string' ? (
-              <Tag icon={<Icon icon={Link2} />} variant="borderless">
-                {titleAddon}
-              </Tag>
-            ) : (
-              titleAddon
-            )}
+            {!!titleAddon ? <Tag>{titleAddon}</Tag> : titleAddon}
           </Flexbox>
         )}
         {typeof children === 'string' ? (

package/src/app/[variants]/(main)/memory/identities/features/IdentityRightPanel.tsx

@@ -39,7 +39,7 @@ const IdentityRightPanel = memo(() => {
           }}
           weight={'bold'}
         >
-          {identity.role || identity.relationship || 'Identity'}
+          {identity.title}
         </Text>
         <Time capturedAt={identity.capturedAt || identity.updatedAt || identity.createdAt} />
         {identity.description && <HighlightedContent>{identity.description}</HighlightedContent>}

package/src/app/[variants]/(main)/memory/identities/features/List/GridView/IdentityCard.tsx

@@ -1,13 +1,13 @@
+import type { IdentityListItem } from '@lobechat/types';
 import { memo } from 'react';
 
 import GridCard from '@/app/[variants]/(main)/memory/features/GridView/GridCard';
-import { type DisplayIdentityMemory } from '@/database/repositories/userMemory';
 
 import IdentityDropdown from '../../IdentityDropdown';
 
 interface IdentityCardProps {
-  identity: DisplayIdentityMemory;
-  onClick?: (identity: DisplayIdentityMemory) => void;
+  identity: IdentityListItem;
+  onClick?: (identity: IdentityListItem) => void;
 }
 
 const IdentityCard = memo<IdentityCardProps>(({ identity, onClick }) => {
@@ -17,7 +17,8 @@ const IdentityCard = memo<IdentityCardProps>(({ identity, onClick }) => {
       cate={identity.type}
       hashTags={identity.tags}
       onClick={() => onClick?.(identity)}
-      title={identity.role}
+      title={identity.title}
+      titleAddon={identity.role?.toLowerCase()}
     >
       {identity.description}
     </GridCard>

package/src/app/[variants]/(main)/memory/identities/features/List/GridView/index.tsx

@@ -1,15 +1,15 @@
+import type { IdentityListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import { type DisplayIdentityMemory } from '@/database/repositories/userMemory';
 import { useUserMemoryStore } from '@/store/userMemory';
 
 import { GridView } from '../../../../features/GridView';
 import IdentityCard from './IdentityCard';
 
 interface GridViewProps {
-  identities: DisplayIdentityMemory[];
+  identities: IdentityListItem[];
   isLoading?: boolean;
-  onClick?: (identity: DisplayIdentityMemory) => void;
+  onClick?: (identity: IdentityListItem) => void;
 }
 
 const IdentityGridView = memo<GridViewProps>(({ identities, isLoading, onClick }) => {

package/src/app/[variants]/(main)/memory/identities/features/List/TimelineView/IdentityCard.tsx

@@ -1,13 +1,12 @@
+import type { IdentityListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import TimeLineCard from '@/app/[variants]/(main)/memory/features/TimeLineView/TimeLineCard';
-import { type DisplayIdentityMemory } from '@/database/repositories/userMemory';
-
+import TimeLineCard from '../../../../features/TimeLineView/TimeLineCard';
 import IdentityDropdown from '../../IdentityDropdown';
 
 interface IdentityCardProps {
-  identity: DisplayIdentityMemory;
-  onClick?: (identity: DisplayIdentityMemory) => void;
+  identity: IdentityListItem;
+  onClick?: (identity: IdentityListItem) => void;
 }
 
 const IdentityCard = memo<IdentityCardProps>(({ identity, onClick }) => {
@@ -18,7 +17,8 @@ const IdentityCard = memo<IdentityCardProps>(({ identity, onClick }) => {
       cate={identity.type}
       hashTags={identity.tags}
       onClick={() => onClick?.(identity)}
-      title={identity.role}
+      title={identity.title}
+      titleAddon={identity.role?.toLowerCase()}
     >
       {identity.description}
     </TimeLineCard>

package/src/app/[variants]/(main)/memory/identities/features/List/TimelineView/index.tsx

@@ -1,6 +1,6 @@
+import type { IdentityListItem } from '@lobechat/types';
 import { memo } from 'react';
 
-import { type DisplayIdentityMemory } from '@/database/repositories/userMemory';
 import { useUserMemoryStore } from '@/store/userMemory';
 
 import { TimelineView as GenericTimelineView } from '../../../../features/TimeLineView';
@@ -8,9 +8,9 @@ import { PeriodHeader, TimelineItemWrapper } from '../../../../features/TimeLine
 import IdentityCard from './IdentityCard';
 
 interface TimelineViewProps {
-  identities: DisplayIdentityMemory[];
+  identities: IdentityListItem[];
   isLoading?: boolean;
-  onClick?: (identity: DisplayIdentityMemory) => void;
+  onClick?: (identity: IdentityListItem) => void;
 }
 
 const TimelineView = memo<TimelineViewProps>(({ identities, isLoading, onClick }) => {
@@ -20,7 +20,9 @@ const TimelineView = memo<TimelineViewProps>(({ identities, isLoading, onClick }
   return (
     <GenericTimelineView
       data={identities}
-      getDateForGrouping={(identity) => identity.episodicDate || identity.capturedAt || identity.createdAt}
+      getDateForGrouping={(identity) =>
+        identity.episodicDate || identity.capturedAt || identity.createdAt
+      }
       groupBy="month"
       hasMore={identitiesHasMore}
       isLoading={isLoading}