@memori.ai/memori-react 9.0.0-alpha.21 → 9.0.0-alpha.23

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

@@ -9,7 +9,7 @@ import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContex
 import { VisemeProvider } from '../../context/visemeContext';
 
 const meta: Meta = {
-  title: 'Widget/Avatar',
+  title: 'Compositions/Avatar',
   component: Avatar,
   argTypes: {
     avatar3dVisible: {
@@ -99,23 +99,6 @@ AvatarInBlob.args = {
   },
 };
 
-export const CustomGLBModel = Template.bind({});
-CustomGLBModel.args = {
-  memori,
-  tenant,
-  instruct: false,
-  avatar3dVisible: true,
-  setAvatar3dVisible: () => {},
-  hasUserActivatedSpeak: false,
-  isPlayingAudio: false,
-  integrationConfig: {
-    ...integrationConfig,
-    avatar: 'customglb',
-    avatarURL:
-      'https://assets.memori.ai/api/v2/asset/7383f05a-0788-49b0-b9b9-3bfc402c7ddf.glb#1669136149862',
-  },
-};
-
 export const ReadyPlayerMeAvatar = Template.bind({});
 ReadyPlayerMeAvatar.args = {
   memori,

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

@@ -5,7 +5,7 @@ import AvatarView, { Props } from './index';
 import { VisemeProvider } from '../../../context/visemeContext';
 
 const meta: Meta = {
-  title: 'RPM 3D Avatar',
+  title: 'Internals/RPM 3D Avatar',
   component: AvatarView,
   argTypes: {
     url: {
@@ -150,105 +150,3 @@ Speaking.args = {
     'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
 };
 
-export const Fullbody = Template.bind({});
-Fullbody.args = {
-  sex: 'MALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  halfBody: false,
-};
-
-export const FullbodyZoomed = Template.bind({});
-FullbodyZoomed.args = {
-  sex: 'FEMALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  isZoomed: true,
-  updateCurrentViseme: () => {},
-  url: 'https://assets.memori.ai/api/v2/asset/3f5ef41c-6c4c-449c-888d-cf9c89782528.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  halfBody: false,
-};
-
-export const FullbodyAnimatedIdle = Template.bind({});
-FullbodyAnimatedIdle.args = {
-  sex: 'MALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  animation: 'Idle',
-  halfBody: false,
-};
-
-export const FullbodyAnimatedLoading = Template.bind({});
-FullbodyAnimatedLoading.args = {
-  sex: 'MALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  animation: 'Loading',
-  halfBody: false,
-};
-
-export const FullbodyAnimatedSpeaking = Template.bind({});
-FullbodyAnimatedSpeaking.args = {
-  sex: 'MALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: true,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  animation: 'Talk 1',
-  halfBody: false,
-};
-
-export const FullbodyFemale = Template.bind({});
-FullbodyFemale.args = {
-  sex: 'FEMALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/650d50c2663b19e0d2831b2b.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  halfBody: false,
-};
-
-export const FullbodyAnimatedFemale = Template.bind({});
-FullbodyAnimatedFemale.args = {
-  sex: 'FEMALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: true,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/650d50c2663b19e0d2831b2b.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  animation: 'Idle',
-  halfBody: false,
-};

package/src/components/Blob/Blob.stories.tsx

@@ -5,7 +5,7 @@ import Blob, { Props } from './Blob';
 import './Blob.css';
 
 const meta: Meta = {
-  title: 'Blob',
+  title: 'Internals/Blob',
   component: Blob,
   argTypes: {
     avatar: {

package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.css

@@ -7,8 +7,8 @@
 
 .blocked-memori-badge {
     display: flex;
-    width: 1.75rem;
-    height: 1.75rem;
+    width: 1.25rem;
+    height: 1.25rem;
     align-items: center;
     justify-content: center;
     border: 1.5px solid #ffe58f;
@@ -21,12 +21,13 @@
 }
 
 .blocked-memori-badge--icon {
-    width: 1rem;
-    height: 1rem;
-    color: var(--memori-text-color);
+    width: 0.75rem;
+    height: 0.75rem;
+    color: #d48806;
     cursor: pointer;
-    fill: currentColor;
+    fill: none;
     font-size: var(--memori-text-size-base);
+    stroke: currentColor;
 }
 
 .blocked-memori-badge--tooltip {

package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.stories.tsx

@@ -6,7 +6,7 @@ import BlockedMemoriBadge, { Props } from './BlockedMemoriBadge';
 import './BlockedMemoriBadge.css';
 
 const meta: Meta = {
-  title: 'Blocked Memori Badge',
+  title: 'Internals/Blocked Memori Badge',
   component: BlockedMemoriBadge,
   argTypes: {},
   parameters: {

package/src/components/ChangeMode/ChangeMode.stories.tsx

@@ -6,7 +6,7 @@ import ChangeMode, { Props } from './ChangeMode';
 import './ChangeMode.css';
 
 const meta: Meta = {
-  title: 'Widget/Change Mode',
+  title: 'Internals/Change Mode',
   component: ChangeMode,
   argTypes: {
     instruct: {

package/src/components/Chat/Chat.css

@@ -367,6 +367,7 @@
     font-weight: 600;
 }
 
+.memori-chat--usage-modal.memori-modal__viewport .memori-modal__popup,
 .memori-chat--usage-modal .memori-modal--panel {
     min-width: 20rem;
     max-width: 30rem;

package/src/components/Chat/Chat.stories.tsx

@@ -16,15 +16,20 @@ import I18nWrapper from '../../I18nWrapper';
 import Chat, { Props } from './Chat';
 
 import './Chat.css';
-import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
+import {
+  ArtifactProvider,
+  useArtifact,
+} from '../MemoriArtifactSystem/context/ArtifactContext';
+import ArtifactDrawer from '../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
 import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'Widget/Chat',
+  title: 'Compositions/Chat',
   component: Chat,
   argTypes: {},
   parameters: {
     controls: { expanded: true },
+    layout: 'fullscreen',
   },
 };
 
@@ -35,6 +40,53 @@ const dialogState = {
   hints: [],
 };
 
+/**
+ * Layouts normally mount ArtifactDrawer as a side column. Chat stories render
+ * Chat on its own, so non-chatlog artifacts would open into a missing drawer.
+ */
+const ChatStoryLayout: React.FC<{
+  isChatlogPanel?: boolean;
+  children: React.ReactNode;
+}> = ({ isChatlogPanel, children }) => {
+  const { state } = useArtifact();
+  const showSideDrawer =
+    !isChatlogPanel &&
+    state.isDrawerOpen &&
+    !state.isChatLogPanelPresentation;
+
+  return (
+    <div
+      className="memori-chat-story-layout"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        minHeight: 0,
+        flex: 1,
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flex: 1,
+          minWidth: 0,
+          minHeight: 0,
+          height: '100%',
+          flexDirection: 'column',
+        }}
+      >
+        {children}
+      </div>
+      {/* Overlay drawer: layouts normally mount a side column, which Chat
+          stories do not have. Avoid a height:100% sibling or the chat
+          column collapses to 0 in Storybook's column flex canvas. */}
+      {showSideDrawer && <ArtifactDrawer />}
+    </div>
+  );
+};
+
 const Template: Story<Props> = args => {
   const [userMessage, setUserMessage] = useState(args.userMessage);
 
@@ -42,11 +94,13 @@ const Template: Story<Props> = args => {
     <I18nWrapper>
       <AlertProvider defaultDuration={5000}>
         <ArtifactProvider>
-          <Chat
-            {...args}
-            userMessage={userMessage}
-            onChangeUserMessage={setUserMessage}
-          />
+          <ChatStoryLayout isChatlogPanel={args.isChatlogPanel}>
+            <Chat
+              {...args}
+              userMessage={userMessage}
+              onChangeUserMessage={setUserMessage}
+            />
+          </ChatStoryLayout>
         </ArtifactProvider>
       </AlertProvider>
     </I18nWrapper>

package/src/components/Chat/Chat.tsx

@@ -656,6 +656,7 @@ const Chat: React.FC<Props> = ({
             : undefined
         }
         className="memori-chat--usage-modal"
+        stacking="stacked"
       >
         {activeUsageBadge?.type === 'llm' && (
           <dl className="memori-chat--usage-details">