@memori.ai/memori-react 9.0.0-alpha.4 → 9.0.0-alpha.6

package/esm/types/integration.d.ts

@@ -0,0 +1,3 @@
+export type AvatarMode = 'readyplayerme' | 'readyplayerme-full' | 'customglb' | 'customrpm' | 'userAvatar' | 'avatar-configurator';
+export declare const is3dAvatarWithUrl: (avatar: AvatarMode | string | undefined, avatarURL: string | undefined) => boolean;
+export declare const usesRpmAvatarView: (avatar: AvatarMode | string | undefined) => boolean;

package/esm/types/integration.js

@@ -0,0 +1,11 @@
+export const is3dAvatarWithUrl = (avatar, avatarURL) => !!avatarURL &&
+    (avatar === 'readyplayerme' ||
+        avatar === 'readyplayerme-full' ||
+        avatar === 'customglb' ||
+        avatar === 'customrpm' ||
+        avatar === 'avatar-configurator');
+export const usesRpmAvatarView = (avatar) => avatar === 'readyplayerme' ||
+    avatar === 'readyplayerme-full' ||
+    avatar === 'customrpm' ||
+    avatar === 'avatar-configurator';
+//# sourceMappingURL=integration.js.map

package/esm/types/integration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration.js","sourceRoot":"","sources":["../../src/types/integration.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAAuC,EACvC,SAA6B,EACpB,EAAE,CACX,CAAC,CAAC,SAAS;IACX,CAAC,MAAM,KAAK,eAAe;QACzB,MAAM,KAAK,oBAAoB;QAC/B,MAAM,KAAK,WAAW;QACtB,MAAM,KAAK,WAAW;QACtB,MAAM,KAAK,qBAAqB,CAAC,CAAC;AAGtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAAuC,EAC9B,EAAE,CACX,MAAM,KAAK,eAAe;IAC1B,MAAM,KAAK,oBAAoB;IAC/B,MAAM,KAAK,WAAW;IACtB,MAAM,KAAK,qBAAqB,CAAC"}

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "9.0.0-alpha.4";
+export declare const version = "9.0.0-alpha.6";

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '9.0.0-alpha.4';
+export const version = '9.0.0-alpha.6';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.0-alpha.4",
+  "version": "9.0.0-alpha.6",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -301,12 +301,14 @@
     "typescript": ">=4.8"
   },
   "dependencies": {
-    "@memori.ai/memori-api-client": "6.22.0",
-    "@memori.ai/ui": "^1.15.0",
+    "@memori.ai/memori-api-client": "6.24.1",
+    "@memori.ai/ui": "^1.16.1",
+    "@nats-io/jetstream": "^3.4.0",
+    "@nats-io/nats-core": "^3.4.0",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "classnames": "2.5.1",
-    "dompurify": "^3.4.0",
+    "dompurify": "^3.4.12",
     "ellipsed": "1.6.0",
     "i18next": "22.0.6",
     "katex": "^0.16.11",

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -66,6 +66,10 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
     setSubmitting(false);
   }, [add, birthDate, minAge, onClose, t]);
 
+  const handleDateChange = useCallback((date: DateTime | undefined) => {
+    setBirthDate(date);
+  }, []);
+
   return (
     <Modal
       open={visible}
@@ -93,8 +97,9 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
           required
         >
           <DateSelector
+            minAge={minAge}
             onChange={date => {
-              setBirthDate(date);
+              handleDateChange(date);
               setError(undefined);
             }}
           />

package/src/components/Avatar/Avatar.stories.tsx

@@ -6,6 +6,7 @@ import Avatar, { Props } from './Avatar';
 
 import './Avatar.css';
 import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
+import { VisemeProvider } from '../../context/visemeContext';
 
 const meta: Meta = {
   title: 'Widget/Avatar',
@@ -33,34 +34,38 @@ const Template: Story<Props> = args => {
 
   return (
     <I18nWrapper>
-      <ArtifactProvider>
-      <div
-        style={
-          args.integrationConfig?.avatar === 'customglb' ||
-          args.integrationConfig?.avatar === 'readyplayerme' ||
-          args.integrationConfig?.avatar === 'readyplayerme-full'
-            ? {}
-            : { marginTop: '20vw' }
-        }
-      >
-        <Avatar
-          {...args}
-          integrationConfig={
-            args.integrationConfig
-              ? {
-                  ...args.integrationConfig,
-                  avatarURL:
-                    args.integrationConfig.avatarURL?.split('#')?.[0] +
-                    `#${new Date(Date.now()).toISOString()}`,
-                }
-              : undefined
-          }
-          avatar3dVisible={avatar3dVisible}
-          setAvatar3dVisible={setAvatar3dVisible}
-          key={Date.now()}
-        />
-      </div>
-      </ArtifactProvider>
+      <VisemeProvider>
+        {' '}
+        <ArtifactProvider>
+          <div
+            style={
+              args.integrationConfig?.avatar === 'customglb' ||
+              args.integrationConfig?.avatar === 'readyplayerme' ||
+              args.integrationConfig?.avatar === 'readyplayerme-full' ||
+              args.integrationConfig?.avatar === 'avatar-configurator'
+                ? {}
+                : { marginTop: '20vw' }
+            }
+          >
+            <Avatar
+              {...args}
+              integrationConfig={
+                args.integrationConfig
+                  ? {
+                      ...args.integrationConfig,
+                      avatarURL:
+                        args.integrationConfig.avatarURL?.split('#')?.[0] +
+                        `#${new Date(Date.now()).toISOString()}`,
+                    }
+                  : undefined
+              }
+              avatar3dVisible={avatar3dVisible}
+              setAvatar3dVisible={setAvatar3dVisible}
+              key={Date.now()}
+            />
+          </div>
+        </ArtifactProvider>
+      </VisemeProvider>
     </I18nWrapper>
   );
 };
@@ -141,3 +146,15 @@ FullbodyReadyPlayerMeAvatar.args = {
       'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#1669136149862',
   },
 };
+
+export const AvatarConfigurator = Template.bind({});
+AvatarConfigurator.args = {
+  ...FullbodyReadyPlayerMeAvatar.args,
+  integrationConfig: {
+    ...integrationConfig,
+    avatar: 'avatar-configurator',
+    avatarURL:
+      'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#1669136149862',
+  },
+  avatarType: 'avatar3d',
+};

package/src/components/Avatar/Avatar.test.tsx

@@ -102,3 +102,57 @@ it('renders Avatar with rpm 3d avatar unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders Avatar with avatar-configurator like readyplayerme-full', () => {
+  const { container } = render(
+    <VisemeProvider>
+      <Avatar
+        memori={memori}
+        integration={integration}
+        isTotem={false}
+        setEnablePositionControls={() => {}}
+        integrationConfig={{
+          ...integrationConfig,
+          avatar: 'avatar-configurator',
+          avatarURL:
+            'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+        }}
+        tenant={tenant}
+        instruct={false}
+        avatar3dVisible={true}
+        setAvatar3dVisible={() => {}}
+        hasUserActivatedSpeak={false}
+        isPlayingAudio={false}
+        avatarType="avatar3d"
+      />
+    </VisemeProvider>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Avatar with avatar-configurator on totem layout unchanged', () => {
+  const { container } = render(
+    <VisemeProvider>
+      <Avatar
+        memori={memori}
+        integration={integration}
+        isTotem
+        setEnablePositionControls={() => {}}
+        integrationConfig={{
+          ...integrationConfig,
+          avatar: 'avatar-configurator',
+          avatarURL:
+            'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+        }}
+        tenant={tenant}
+        instruct={false}
+        avatar3dVisible={true}
+        setAvatar3dVisible={() => {}}
+        hasUserActivatedSpeak={false}
+        isPlayingAudio={false}
+        avatarType="avatar3d"
+      />
+    </VisemeProvider>
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/Avatar/Avatar.tsx

@@ -15,6 +15,7 @@ import { Eye, EyeOff, Pencil } from 'lucide-react';
 import cx from 'classnames';
 import ContainerAvatarView from './AvatarView';
 import { useViseme } from '../../context/visemeContext';
+import { is3dAvatarWithUrl, usesRpmAvatarView } from '../../types/integration';
 
 export interface Props {
   memori: Memori;
@@ -88,11 +89,10 @@ const Avatar: React.FC<Props> = ({
 
   const renderAvatar = () => {
     if (
-      (integrationConfig?.avatar === 'readyplayerme' ||
-        integrationConfig?.avatar === 'readyplayerme-full' ||
-        integrationConfig?.avatar === 'customglb' ||
-        integrationConfig?.avatar === 'customrpm') &&
-      integrationConfig?.avatarURL &&
+      is3dAvatarWithUrl(
+        integrationConfig?.avatar,
+        integrationConfig?.avatarURL
+      ) &&
       avatarType &&
       avatarType !== 'blob'
     ) {
@@ -121,12 +121,8 @@ const Avatar: React.FC<Props> = ({
   };
 
   const renderAvatarContent = () => {
-    if (!isClient) return null;
-    if (
-      integrationConfig?.avatar === 'readyplayerme' ||
-      integrationConfig?.avatar === 'readyplayerme-full' ||
-      integrationConfig?.avatar === 'customrpm'
-    ) {
+    if (!isClient || !integrationConfig) return null;
+    if (usesRpmAvatarView(integrationConfig.avatar)) {
       return (
         <ErrorBoundary
           fallback={
@@ -161,7 +157,7 @@ const Avatar: React.FC<Props> = ({
       );
     }
 
-    if (integrationConfig?.avatar === 'customglb') {
+    if (integrationConfig.avatar === 'customglb') {
       return (
         <ModelViewer
           poster={getAvatarUrl() || ''}

package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.tsx

@@ -9,6 +9,7 @@ import {
   ANIMATION_URLS,
   AVATAR_POSITION,
   AVATAR_ROTATION,
+  MALE_EXCLUDED_ANIMATIONS,
   SCALE_LERP_FACTOR,
 } from '../../constants';
 import DynamicShadow from '../../Shadow/DynamicShadow';
@@ -64,11 +65,17 @@ export function FullbodyAvatar({
     return found;
   }, [scene]);
 
-  // Merge base and additional animations only if needed
-  const mergedAnimations = useMemo(
-    () => needsAdditionalAnimations ? [...baseAnimations, ...additionalAnimations] : baseAnimations,
-    [baseAnimations, additionalAnimations, needsAdditionalAnimations]
-  );
+  // Merge base and additional animations only if needed.
+  // For male avatars, exclude problematic idle clips from the full set (base + pack).
+  const mergedAnimations = useMemo(() => {
+    const clips = needsAdditionalAnimations
+      ? [...baseAnimations, ...additionalAnimations]
+      : baseAnimations;
+
+    if (sex !== 'MALE') return clips;
+
+    return clips.filter(clip => !MALE_EXCLUDED_ANIMATIONS.has(clip.name));
+  }, [baseAnimations, additionalAnimations, needsAdditionalAnimations, sex]);
 
   // Create animation actions from the merged animations
   const { actions } = useAnimations(mergedAnimations, scene);

package/src/components/Avatar/AvatarView/AvatarComponent/components/controllers/MorphTargetController.ts

@@ -2,6 +2,7 @@ import { SkinnedMesh } from 'three';
 import { MathUtils } from 'three';
 import {
   EMOTION_SMOOTHING,
+  EMOTION_INTENSITY,
   VISEME_SMOOTHING,
   BLINK_CONFIG,
   MAPPING_EMOTIONS_ITALIAN_TO_ENGLISH,
@@ -214,7 +215,7 @@ export class MorphTargetController {
           const currentEmotionValue = this.currentEmotionValues[key] || 0;
           const newEmotionValue = MathUtils.lerp(
             currentEmotionValue,
-            targetEmotionValue * 1.5, // Apply emotion at 80% intensity for more natural expressions
+            targetEmotionValue * EMOTION_INTENSITY,
             EMOTION_SMOOTHING
           );
           this.currentEmotionValues[key] = newEmotionValue;

package/src/components/Avatar/AvatarView/AvatarComponent/constants.ts

@@ -58,7 +58,8 @@ export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM: BlendShapeMap = [
       'browDownRight': 0.5,
       'browOuterUpLeft': 0.5,
       'browOuterUpRight': 0.5,
-      'mouthSmile': -0.2,
+      'mouthSmileLeft': -0.2,
+      'mouthSmileRight': -0.2,
     },
   },
   {
@@ -77,7 +78,8 @@ export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM: BlendShapeMap = [
       'browDownRight': -0.5,
       'eyeSquintLeft': 0.5,
       'eyeSquintRight': 0.5,
-      'mouthSmile': -0.6,
+      'mouthSmileLeft': -0.6,
+      'mouthSmileRight': -0.6,
     },
   },
   {
@@ -88,7 +90,8 @@ export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM: BlendShapeMap = [
       'browOuterUpRight': 0.5,
       'eyeWideLeft': 0.5,
       'eyeWideRight': 0.5,
-      'mouthSmile': 0.5,
+      'mouthSmileLeft': 0.5,
+      'mouthSmileRight': 0.5,
     },
   },
   {
@@ -97,7 +100,8 @@ export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM: BlendShapeMap = [
       'browDownLeft': 0.5,
       'browDownRight': 0.5,
       'browInnerUp': 0.5,
-      'mouthSmile': 0.5,
+      'mouthSmileLeft': 0.5,
+      'mouthSmileRight': 0.5,
     },
   },
 ];
@@ -109,6 +113,12 @@ export const ANIMATION_URLS = {
     'https://assets.memori.ai/api/v2/asset/2adc934b-24b2-45bd-94ad-ffec58d3cb32.glb',
 };
 
+/** Idle clips excluded from the male animation pack. */
+export const MALE_EXCLUDED_ANIMATIONS = new Set([
+  'Idle',
+  'Idle2'
+]);
+
 // Blink configuration
 export const BLINK_CONFIG = {
   minInterval: 1000,
@@ -127,3 +137,5 @@ export const DEFAULT_CONFIG: AnimationConfig = {
 // Smoothing factors for emotion and viseme morphs
 export const EMOTION_SMOOTHING = 0.3;
 export const VISEME_SMOOTHING = 0.5;
+/** Multiplier applied to emotion morph target values before clamping (1 = raw mapping). */
+export const EMOTION_INTENSITY = 2.5;

package/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -1,5 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders Avatar with avatar-configurator like readyplayerme-full 1`] = `
+<div>
+  <div
+    class="memori--avatar-wrapper memori--avatar-avatar-configurator"
+  >
+    <div
+      class="memori--blob-container"
+    >
+      <div
+        class="memori-blob"
+      >
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="memori--avatar-toggle"
+  >
+    <button
+      aria-label="hide"
+      class="memori-button memori-button--ghost memori-button--md"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="memori-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="lucide lucide-eye-off"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+          />
+          <path
+            d="M14.084 14.158a3 3 0 0 1-4.242-4.242"
+          />
+          <path
+            d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+          />
+          <path
+            d="m2 2 20 20"
+          />
+        </svg>
+      </span>
+      <span
+        class="memori-button__content"
+      >
+        <span
+          class="memori--avatar-toggle-text"
+        >
+          hide
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Avatar with avatar-configurator on totem layout unchanged 1`] = `
+<div>
+  <div
+    class="memori--avatar-wrapper memori--avatar-avatar-configurator"
+  >
+    <div
+      class="memori--blob-container"
+    >
+      <div
+        class="memori-blob"
+      >
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="memori--avatar-toggle"
+  >
+    <button
+      aria-label="hide"
+      class="memori-button memori-button--ghost memori-button--md"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="memori-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="lucide lucide-eye-off"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+          />
+          <path
+            d="M14.084 14.158a3 3 0 0 1-4.242-4.242"
+          />
+          <path
+            d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+          />
+          <path
+            d="m2 2 20 20"
+          />
+        </svg>
+      </span>
+      <span
+        class="memori-button__content"
+      >
+        <span
+          class="memori--avatar-toggle-text"
+        >
+          hide
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders Avatar with blob and avatar in blob unchanged 1`] = `
 <div>
   <div

package/src/components/ChatBubble/ChatBubble.tsx

@@ -35,6 +35,7 @@ import {
 } from '../../helpers/message';
 import { Expandable, Modal } from '@memori.ai/ui';
 import memoriApiClient from '@memori.ai/memori-api-client';
+import { usePressTooltip } from '../../helpers/usePressTooltip';
 const ASSET_URL_PATTERN = /https?:\/\/\S*\/api\/v\d+\/asset\/\S+/gi;
 
 const sanitizeRawCopyText = (text: string) =>
@@ -122,18 +123,22 @@ const ChatBubble: React.FC<Props> = ({
 }) => {
   const { t, i18n } = useTranslation();
   const lang = i18n.language || 'en';
+  const generatedByAiTooltip = usePressTooltip();
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
   const [openFunctionCache, setOpenFunctionCache] = useState(false);
   const [copyStatus, setCopyStatus] = useState<{
     plain: 'idle' | 'success' | 'error';
     raw: 'idle' | 'success' | 'error';
-  }>({ plain: 'idle', raw: 'idle' });
+    functionCache: 'idle' | 'success' | 'error';
+  }>({ plain: 'idle', raw: 'idle', functionCache: 'idle' });
   const copyResetTimers = useRef<{
     plain: ReturnType<typeof setTimeout> | null;
     raw: ReturnType<typeof setTimeout> | null;
+    functionCache: ReturnType<typeof setTimeout> | null;
   }>({
     plain: null,
     raw: null,
+    functionCache: null,
   });
   // Initialize MathJax on component mount
   useEffect(() => {
@@ -242,26 +247,33 @@ const ChatBubble: React.FC<Props> = ({
 
   useEffect(() => {
     return () => {
-      (Object.keys(copyResetTimers.current) as Array<'plain' | 'raw'>).forEach(
-        key => {
-          const timer = copyResetTimers.current[key];
-          if (timer) {
-            clearTimeout(timer);
-            copyResetTimers.current[key] = null;
-          }
+      (
+        Object.keys(copyResetTimers.current) as Array<
+          'plain' | 'raw' | 'functionCache'
+        >
+      ).forEach(key => {
+        const timer = copyResetTimers.current[key];
+        if (timer) {
+          clearTimeout(timer);
+          copyResetTimers.current[key] = null;
         }
-      );
+      });
     };
   }, []);
 
-  const clearCopyReset = (type: 'plain' | 'raw') => {
+  const functionCacheCopyText =
+    functionCacheData
+      ?.map(f => `${f.title}\n\n${f.content}`)
+      .join('\n\n---\n\n') ?? '';
+
+  const clearCopyReset = (type: 'plain' | 'raw' | 'functionCache') => {
     if (copyResetTimers.current[type]) {
       clearTimeout(copyResetTimers.current[type]!);
       copyResetTimers.current[type] = null;
     }
   };
 
-  const scheduleCopyReset = (type: 'plain' | 'raw') => {
+  const scheduleCopyReset = (type: 'plain' | 'raw' | 'functionCache') => {
     clearCopyReset(type);
     copyResetTimers.current[type] = setTimeout(() => {
       setCopyStatus(prev => ({ ...prev, [type]: 'idle' }));
@@ -269,7 +281,10 @@ const ChatBubble: React.FC<Props> = ({
     }, COPY_FEEDBACK_MS);
   };
 
-  const handleCopyClick = async (type: 'plain' | 'raw', text: string) => {
+  const handleCopyClick = async (
+    type: 'plain' | 'raw' | 'functionCache',
+    text: string
+  ) => {
     if (!text?.length) return;
     try {
       if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
@@ -736,6 +751,7 @@ const ChatBubble: React.FC<Props> = ({
                   placement="bottom"
                   content={t('generatedByAI')}
                   className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+                  {...generatedByAiTooltip.tooltipProps}
                 >
                   <span className="memori-chat--bubble-addon-tooltip-trigger">
                     <Button
@@ -745,6 +761,7 @@ const ChatBubble: React.FC<Props> = ({
                       className="memori-chat--bubble-action-button"
                       aria-label={String(t('generatedByAI'))}
                       icon={<Bot aria-hidden />}
+                      {...generatedByAiTooltip.pressTriggerProps}
                     />
                   </span>
                 </Tooltip>
@@ -823,6 +840,18 @@ const ChatBubble: React.FC<Props> = ({
         closable={true}
         onOpenChange={setOpenFunctionCache}
       >
+        <div style={{ marginBottom: '1rem' }}>
+          <Button
+            icon={<Copy aria-hidden />}
+            onClick={() =>
+              handleCopyClick('functionCache', functionCacheCopyText)
+            }
+          >
+            {copyStatus.functionCache === 'success'
+              ? copiedLabel
+              : t('copy') || 'Copy'}
+          </Button>
+        </div>
         {functionCacheData?.map((f, i) => (
           <div
             key={f.mediumID}