@lobehub/lobehub 2.0.0-next.295 → 2.0.0-next.297

package/packages/builtin-tool-memory/src/client/Inspector/UpdateIdentityMemory/index.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import type { UpdateIdentityMemoryParams, UpdateIdentityMemoryState } from '../../../types';
+
+const styles = createStaticStyles(({ css }) => ({
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const UpdateIdentityMemoryInspector = memo<
+  BuiltinInspectorProps<UpdateIdentityMemoryParams, UpdateIdentityMemoryState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading, pluginState }) => {
+  const { t } = useTranslation('plugin');
+
+  const id = args?.id || partialArgs?.id;
+
+  // Initial streaming state
+  if (isArgumentsStreaming && !id) {
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-user-memory.apiName.updateIdentityMemory')}</span>
+      </div>
+    );
+  }
+
+  const isSuccess = pluginState?.identityId;
+
+  return (
+    <div
+      className={cx(
+        inspectorTextStyles.root,
+        (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText,
+      )}
+    >
+      <span>{t('builtins.lobe-user-memory.apiName.updateIdentityMemory')}</span>
+      {id && (
+        <>
+          : <span className={highlightTextStyles.warning}>{id}</span>
+        </>
+      )}
+      {!isLoading && isSuccess && (
+        <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+      )}
+    </div>
+  );
+});
+
+UpdateIdentityMemoryInspector.displayName = 'UpdateIdentityMemoryInspector';
+
+export default UpdateIdentityMemoryInspector;

package/packages/builtin-tool-memory/src/client/Inspector/index.ts

@@ -0,0 +1,35 @@
+import { type BuiltinInspector } from '@lobechat/types';
+
+import { MemoryApiName } from '../../types';
+import { AddContextMemoryInspector } from './AddContextMemory';
+import { AddExperienceMemoryInspector } from './AddExperienceMemory';
+import { AddIdentityMemoryInspector } from './AddIdentityMemory';
+import { AddPreferenceMemoryInspector } from './AddPreferenceMemory';
+import { RemoveIdentityMemoryInspector } from './RemoveIdentityMemory';
+import { SearchUserMemoryInspector } from './SearchUserMemory';
+import { UpdateIdentityMemoryInspector } from './UpdateIdentityMemory';
+
+/**
+ * Memory Inspector Components Registry
+ *
+ * Inspector components customize the title/header area
+ * of tool calls in the conversation UI.
+ */
+export const MemoryInspectors: Record<string, BuiltinInspector> = {
+  [MemoryApiName.addContextMemory]: AddContextMemoryInspector as BuiltinInspector,
+  [MemoryApiName.addExperienceMemory]: AddExperienceMemoryInspector as BuiltinInspector,
+  [MemoryApiName.addIdentityMemory]: AddIdentityMemoryInspector as BuiltinInspector,
+  [MemoryApiName.addPreferenceMemory]: AddPreferenceMemoryInspector as BuiltinInspector,
+  [MemoryApiName.removeIdentityMemory]: RemoveIdentityMemoryInspector as BuiltinInspector,
+  [MemoryApiName.searchUserMemory]: SearchUserMemoryInspector as BuiltinInspector,
+  [MemoryApiName.updateIdentityMemory]: UpdateIdentityMemoryInspector as BuiltinInspector,
+};
+
+// Re-export individual inspectors
+export { AddContextMemoryInspector } from './AddContextMemory';
+export { AddExperienceMemoryInspector } from './AddExperienceMemory';
+export { AddIdentityMemoryInspector } from './AddIdentityMemory';
+export { AddPreferenceMemoryInspector } from './AddPreferenceMemory';
+export { RemoveIdentityMemoryInspector } from './RemoveIdentityMemory';
+export { SearchUserMemoryInspector } from './SearchUserMemory';
+export { UpdateIdentityMemoryInspector } from './UpdateIdentityMemory';

package/packages/builtin-tool-memory/src/client/Intervention/AddExperienceMemory/index.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import type { BuiltinInterventionProps } from '@lobechat/types';
+import { memo } from 'react';
+
+import type { AddExperienceMemoryParams } from '../../../types';
+import { ExperienceMemoryCard } from '../../components';
+
+const AddExperienceMemoryIntervention = memo<BuiltinInterventionProps<AddExperienceMemoryParams>>(
+  ({ args }) => {
+    return <ExperienceMemoryCard data={args} />;
+  },
+);
+
+AddExperienceMemoryIntervention.displayName = 'AddExperienceMemoryIntervention';
+
+export default AddExperienceMemoryIntervention;

package/packages/builtin-tool-memory/src/client/Intervention/index.ts

@@ -0,0 +1,13 @@
+import type { BuiltinIntervention } from '@lobechat/types';
+
+import { MemoryApiName } from '../../types';
+import AddExperienceMemoryIntervention from './AddExperienceMemory';
+
+/**
+ * Memory Intervention Components Registry
+ *
+ * Intervention components display when human approval is required before tool execution.
+ */
+export const MemoryInterventions: Record<string, BuiltinIntervention> = {
+  [MemoryApiName.addExperienceMemory]: AddExperienceMemoryIntervention as BuiltinIntervention,
+};

package/packages/builtin-tool-memory/src/client/Render/AddExperienceMemory/index.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import type { BuiltinRenderProps } from '@lobechat/types';
+import { memo } from 'react';
+
+import type { AddExperienceMemoryParams, AddExperienceMemoryState } from '../../../types';
+import { ExperienceMemoryCard } from '../../components';
+
+const AddExperienceMemoryRender = memo<
+  BuiltinRenderProps<AddExperienceMemoryParams, AddExperienceMemoryState>
+>(({ args }) => {
+  return <ExperienceMemoryCard data={args} />;
+});
+
+AddExperienceMemoryRender.displayName = 'AddExperienceMemoryRender';
+
+export default AddExperienceMemoryRender;

package/packages/builtin-tool-memory/src/client/Render/SearchUserMemory/index.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import type { BuiltinRenderProps } from '@lobechat/types';
+import { Accordion, AccordionItem, Flexbox, Tag, Text } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles } from '@/styles';
+
+import type { SearchMemoryParams, SearchUserMemoryState } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  container: css`
+    overflow: hidden;
+
+    width: 100%;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 12px;
+
+    background: ${cssVar.colorBgContainer};
+  `,
+  empty: css`
+    padding: 24px;
+    color: ${cssVar.colorTextTertiary};
+    text-align: center;
+  `,
+  item: css`
+    padding-block: 10px;
+    padding-inline: 12px;
+    border-block-end: 1px dashed ${cssVar.colorBorderSecondary};
+
+    &:last-child {
+      border-block-end: none;
+    }
+  `,
+  itemContent: css`
+    font-size: 13px;
+    line-height: 1.5;
+    color: ${cssVar.colorTextSecondary};
+  `,
+  itemTitle: css`
+    font-size: 14px;
+    font-weight: 500;
+    color: ${cssVar.colorText};
+  `,
+  sectionHeader: css`
+    font-size: 12px;
+    font-weight: 500;
+  `,
+  tags: css`
+    padding-block-start: 6px;
+  `,
+}));
+
+interface MemoryItemProps {
+  content?: string | null;
+  subContent?: string | null;
+  tags?: string[] | null;
+  title?: string | null;
+}
+
+const MemoryItem = memo<MemoryItemProps>(({ title, content, subContent, tags }) => {
+  return (
+    <Flexbox className={styles.item} gap={4}>
+      {title && <div className={styles.itemTitle}>{title}</div>}
+      {content && <div className={styles.itemContent}>{content}</div>}
+      {subContent && (
+        <Text className={styles.itemContent} style={{ fontStyle: 'italic' }} type={'secondary'}>
+          {subContent}
+        </Text>
+      )}
+      {tags && tags.length > 0 && (
+        <Flexbox className={styles.tags} gap={4} horizontal wrap={'wrap'}>
+          {tags.map((tag, index) => (
+            <Tag key={index} size={'small'}>
+              {tag}
+            </Tag>
+          ))}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+MemoryItem.displayName = 'MemoryItem';
+
+const SearchUserMemoryRender = memo<BuiltinRenderProps<SearchMemoryParams, SearchUserMemoryState>>(
+  ({ pluginState }) => {
+    const { t } = useTranslation('plugin');
+
+    const contexts = pluginState?.contexts || [];
+    const experiences = pluginState?.experiences || [];
+    const preferences = pluginState?.preferences || [];
+
+    const totalCount = contexts.length + experiences.length + preferences.length;
+
+    if (totalCount === 0) {
+      return (
+        <div className={styles.container}>
+          <div className={styles.empty}>{t('builtins.lobe-user-memory.inspector.noResults')}</div>
+        </div>
+      );
+    }
+
+    const defaultActiveKeys = [
+      ...(contexts.length > 0 ? ['contexts'] : []),
+      ...(experiences.length > 0 ? ['experiences'] : []),
+      ...(preferences.length > 0 ? ['preferences'] : []),
+    ];
+
+    return (
+      <Flexbox className={styles.container}>
+        <Accordion defaultExpandedKeys={defaultActiveKeys} gap={0}>
+          {/* Contexts */}
+          {contexts.length > 0 && (
+            <AccordionItem
+              itemKey="contexts"
+              paddingBlock={8}
+              paddingInline={12}
+              title={
+                <Text className={styles.sectionHeader}>
+                  <span className={highlightTextStyles.info}>
+                    {t('builtins.lobe-user-memory.render.contexts' as any)}
+                  </span>
+                  <Text as={'span'} type={'secondary'}>
+                    {' '}
+                    ({contexts.length})
+                  </Text>
+                </Text>
+              }
+            >
+              <Flexbox>
+                {contexts.map((item) => (
+                  <MemoryItem
+                    content={item.description}
+                    key={item.id}
+                    subContent={item.currentStatus}
+                    tags={item.tags}
+                    title={item.title}
+                  />
+                ))}
+              </Flexbox>
+            </AccordionItem>
+          )}
+
+          {/* Experiences */}
+          {experiences.length > 0 && (
+            <AccordionItem
+              itemKey="experiences"
+              paddingBlock={8}
+              paddingInline={12}
+              title={
+                <Text className={styles.sectionHeader}>
+                  <span className={highlightTextStyles.gold}>
+                    {t('builtins.lobe-user-memory.render.experiences' as any)}
+                  </span>
+                  <Text as={'span'} type={'secondary'}>
+                    {' '}
+                    ({experiences.length})
+                  </Text>
+                </Text>
+              }
+            >
+              <Flexbox>
+                {experiences.map((item) => (
+                  <MemoryItem
+                    content={item.situation}
+                    key={item.id}
+                    subContent={item.keyLearning}
+                    tags={item.tags}
+                    title={item.action}
+                  />
+                ))}
+              </Flexbox>
+            </AccordionItem>
+          )}
+
+          {/* Preferences */}
+          {preferences.length > 0 && (
+            <AccordionItem
+              itemKey="preferences"
+              paddingBlock={8}
+              paddingInline={12}
+              title={
+                <Text className={styles.sectionHeader}>
+                  <span className={highlightTextStyles.warning}>
+                    {t('builtins.lobe-user-memory.render.preferences' as any)}
+                  </span>
+                  <Text as={'span'} type={'secondary'}>
+                    {' '}
+                    ({preferences.length})
+                  </Text>
+                </Text>
+              }
+            >
+              <Flexbox>
+                {preferences.map((item) => (
+                  <MemoryItem
+                    content={item.conclusionDirectives}
+                    key={item.id}
+                    subContent={item.suggestions}
+                    tags={item.tags}
+                  />
+                ))}
+              </Flexbox>
+            </AccordionItem>
+          )}
+        </Accordion>
+      </Flexbox>
+    );
+  },
+);
+
+SearchUserMemoryRender.displayName = 'SearchUserMemoryRender';
+
+export default SearchUserMemoryRender;

package/packages/builtin-tool-memory/src/client/Render/index.ts

@@ -0,0 +1,15 @@
+import type { BuiltinRender } from '@lobechat/types';
+
+import { MemoryApiName } from '../../types';
+import AddExperienceMemoryRender from './AddExperienceMemory';
+import SearchUserMemoryRender from './SearchUserMemory';
+
+/**
+ * Memory Render Components Registry
+ *
+ * Render components display the final result of tool execution.
+ */
+export const MemoryRenders: Record<string, BuiltinRender> = {
+  [MemoryApiName.addExperienceMemory]: AddExperienceMemoryRender as BuiltinRender,
+  [MemoryApiName.searchUserMemory]: SearchUserMemoryRender as BuiltinRender,
+};

package/packages/builtin-tool-memory/src/client/Streaming/AddExperienceMemory/index.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import type { BuiltinStreamingProps } from '@lobechat/types';
+import { memo } from 'react';
+
+import type { AddExperienceMemoryParams } from '../../../types';
+import { ExperienceMemoryCard } from '../../components';
+
+export const AddExperienceMemoryStreaming = memo<BuiltinStreamingProps<AddExperienceMemoryParams>>(
+  ({ args }) => {
+    return <ExperienceMemoryCard data={args} loading />;
+  },
+);
+
+AddExperienceMemoryStreaming.displayName = 'AddExperienceMemoryStreaming';
+
+export default AddExperienceMemoryStreaming;

package/packages/builtin-tool-memory/src/client/Streaming/index.ts

@@ -0,0 +1,18 @@
+import { type BuiltinStreaming } from '@lobechat/types';
+
+import { MemoryApiName } from '../../types';
+import { AddExperienceMemoryStreaming } from './AddExperienceMemory';
+
+/**
+ * Memory Streaming Components Registry
+ *
+ * Streaming components are used to render tool calls while arguments
+ * are still being generated, allowing real-time feedback to users.
+ */
+export const MemoryStreamings: Record<string, BuiltinStreaming> = {
+  [MemoryApiName.addExperienceMemory]: AddExperienceMemoryStreaming as BuiltinStreaming,
+};
+
+
+
+export {AddExperienceMemoryStreaming} from './AddExperienceMemory';

package/packages/builtin-tool-memory/src/client/components/ExperienceMemoryCard.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { Accordion, AccordionItem, Avatar, Flexbox, Tag, Text } from '@lobehub/ui';
+import { Steps } from 'antd';
+import { createStaticStyles, cssVar } from 'antd-style';
+import { memo } from 'react';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+import StreamingMarkdown from '@/components/StreamingMarkdown';
+import { highlightTextStyles } from '@/styles';
+
+import type { AddExperienceMemoryParams } from '../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  container: css`
+    overflow: hidden;
+
+    width: 100%;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 16px;
+
+    background: ${cssVar.colorBgContainer};
+  `,
+  content: css`
+    padding-block: 12px;
+    padding-inline: 16px;
+  `,
+  detail: css`
+    font-size: 13px;
+    line-height: 1.6;
+    color: ${cssVar.colorTextSecondary};
+  `,
+  header: css`
+    padding-block: 10px;
+    padding-inline: 12px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+  keyLearning: css`
+    font-size: 14px;
+    line-height: 1.6;
+    color: ${cssVar.colorText};
+  `,
+  section: css`
+    padding: 4px;
+    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+  stepContent: css`
+    font-size: 13px;
+    line-height: 1.6;
+    color: ${cssVar.colorTextSecondary};
+    white-space: pre-wrap;
+  `,
+  stepsContainer: css`
+    .ant-steps-item-content {
+      min-height: auto;
+    }
+
+    .ant-steps-item-description {
+      padding-block-end: 12px !important;
+    }
+  `,
+  summary: css`
+    font-size: 14px;
+    font-weight: 500;
+    color: ${cssVar.colorTextSecondary};
+  `,
+  tags: css`
+    padding-block-start: 8px;
+    border-block-start: 1px dashed ${cssVar.colorBorderSecondary};
+  `,
+  title: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-weight: 500;
+    color: ${cssVar.colorText};
+  `,
+}));
+
+export interface ExperienceMemoryCardProps {
+  data?: AddExperienceMemoryParams;
+  loading?: boolean;
+}
+
+export const ExperienceMemoryCard = memo<ExperienceMemoryCardProps>(({ data, loading }) => {
+  const { summary, details, tags, title, withExperience } = data || {};
+  const { situation, reasoning, action, possibleOutcome, keyLearning } = withExperience || {};
+
+  const hasStarContent = situation || reasoning || action || possibleOutcome;
+
+  if (!summary && !details && !tags?.length && !title && !hasStarContent && !keyLearning)
+    return null;
+
+  const starItems = [
+    { avatar: 'S', content: situation, title: 'Situation' },
+    { avatar: 'T', content: reasoning, title: 'Task' },
+    { avatar: 'A', content: action, title: 'Action' },
+    { avatar: 'R', content: possibleOutcome, title: 'Result' },
+  ].filter((item) => item.content);
+
+  return (
+    <Flexbox className={styles.container}>
+      {/* Header */}
+      <Flexbox align={'center'} className={styles.header} gap={8} horizontal>
+        <Flexbox flex={1}>
+          <div className={styles.title}>{title || 'Experience Memory'}</div>
+        </Flexbox>
+        {loading && <NeuralNetworkLoading size={20} />}
+      </Flexbox>
+
+      {/* When has STAR content: collapse summary */}
+      {hasStarContent ? (
+        <>
+          {/* Collapsed Summary */}
+          {(summary || tags?.length) && (
+            <Accordion gap={0}>
+              <AccordionItem
+                itemKey="summary"
+                paddingBlock={8}
+                paddingInline={8}
+                styles={{
+                  base: { marginBlock: 4, marginInline: 4 },
+                }}
+                title={
+                  <Text fontSize={12} type={'secondary'} weight={500}>
+                    Summary
+                  </Text>
+                }
+              >
+                <Flexbox gap={8} paddingBlock={'8px 12px'} paddingInline={8}>
+                  {summary && <div className={styles.summary}>{summary}</div>}
+                  {details && <div className={styles.detail}>{details}</div>}
+                  {tags && tags.length > 0 && (
+                    <Flexbox className={styles.tags} gap={8} horizontal wrap={'wrap'}>
+                      {tags.map((tag, index) => (
+                        <Tag key={index}>{tag}</Tag>
+                      ))}
+                    </Flexbox>
+                  )}
+                </Flexbox>
+              </AccordionItem>
+            </Accordion>
+          )}
+
+          {/* STAR Steps */}
+          <Accordion className={styles.section} defaultExpandedKeys={['star']} gap={0}>
+            <AccordionItem
+              itemKey="star"
+              paddingBlock={8}
+              paddingInline={8}
+              title={
+                <Text fontSize={12} type={'secondary'} weight={500}>
+                  STAR
+                </Text>
+              }
+            >
+              <Flexbox paddingBlock={'8px 12px'} paddingInline={8}>
+                <Steps
+                  className={styles.stepsContainer}
+                  current={null as any}
+                  direction="vertical"
+                  items={starItems.map((item) => ({
+                    description: <div className={styles.stepContent}>{item.content}</div>,
+                    icon: (
+                      <Avatar
+                        avatar={item.avatar}
+                        shadow
+                        shape={'square'}
+                        size={20}
+                        style={{
+                          border: `1px solid ${cssVar.colorBorderSecondary}`,
+                          fontSize: 11,
+                        }}
+                      />
+                    ),
+                    title: (
+                      <Text as={'span'} fontSize={12} type={'secondary'} weight={500}>
+                        {item.title}
+                      </Text>
+                    ),
+                  }))}
+                  size="small"
+                />
+              </Flexbox>
+            </AccordionItem>
+          </Accordion>
+
+          {/* Key Learning */}
+          {keyLearning && (
+            <Flexbox
+              className={styles.section}
+              gap={8}
+              style={{ paddingBlock: 16, paddingInline: 12 }}
+            >
+              <Text fontSize={12} weight={500}>
+                <span className={highlightTextStyles.gold}>Key Learning</span>
+              </Text>
+              <div className={styles.keyLearning}>{keyLearning}</div>
+            </Flexbox>
+          )}
+        </>
+      ) : (
+        /* When no STAR content: show summary and details */
+        <Flexbox className={styles.content} gap={8}>
+          {!summary && loading ? (
+            <BubblesLoading />
+          ) : (
+            <>
+              {summary && <div className={styles.summary}>{summary}</div>}
+              {details && <StreamingMarkdown>{details}</StreamingMarkdown>}
+              {tags && tags.length > 0 && (
+                <Flexbox className={styles.tags} gap={8} horizontal wrap={'wrap'}>
+                  {tags.map((tag, index) => (
+                    <Tag key={index}>{tag}</Tag>
+                  ))}
+                </Flexbox>
+              )}
+            </>
+          )}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+ExperienceMemoryCard.displayName = 'ExperienceMemoryCard';
+
+export default ExperienceMemoryCard;

package/packages/builtin-tool-memory/src/client/components/index.ts

@@ -0,0 +1 @@
+export { ExperienceMemoryCard, type ExperienceMemoryCardProps } from './ExperienceMemoryCard';

package/packages/builtin-tool-memory/src/client/index.ts

@@ -0,0 +1,27 @@
+// Inspector components (customized tool call headers)
+export { MemoryInspectors } from './Inspector';
+export {
+  AddContextMemoryInspector,
+  AddExperienceMemoryInspector,
+  AddIdentityMemoryInspector,
+  AddPreferenceMemoryInspector,
+  RemoveIdentityMemoryInspector,
+  SearchUserMemoryInspector,
+  UpdateIdentityMemoryInspector,
+} from './Inspector';
+
+// Intervention components (human approval UI before tool execution)
+export { MemoryInterventions } from './Intervention';
+
+// Render components (final result display after tool execution)
+export { MemoryRenders } from './Render';
+
+// Streaming components (real-time feedback during tool execution)
+export { AddExperienceMemoryStreaming, MemoryStreamings } from './Streaming';
+
+// Shared components
+export { ExperienceMemoryCard, type ExperienceMemoryCardProps } from './components';
+
+// Re-export types and manifest for convenience
+export { MemoryManifest } from '../manifest';
+export * from '../types';