@memori.ai/memori-react 8.45.2 → 8.45.5

package/src/components/Header/Header.css

@@ -1,282 +0,0 @@
-.memori-header {
-    position: relative;
-    z-index: 1000;
-    height: 50px;
-    padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
-    border-radius: 10px;
-    margin-left: auto;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    background-color: var(--memori-inner-bg, #fff);
-    text-align: right;
-}
-
-@media (max-width: 870px) {
-    .memori-header {
-        width: 100%;
-        margin-left: 0;
-    }
-}
-
-.memori-header--button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.memori-header--button + .memori-header--button {
-    margin-left: 0;
-}
-
-.memori-header--position .memori-header--button {
-    margin-right: 0;
-    margin-left: 0;
-}
-
-/* Spaced layout: small space between header buttons (FULLPAGE, CHAT, ZOOMED_FULL_BODY) */
-.memori-header.memori-header--spaced,
-.memori-chat-layout .memori-header.memori-header--spaced {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 0.25rem;
-}
-
-.memori-header.memori-header--spaced .memori-header--button + .memori-header--button,
-.memori-chat-layout .memori-header.memori-header--spaced .memori-header--button + .memori-header--button {
-    margin-left: 0;
-}
-
-.memori-header--button[disabled]:not(.memori-header--button--knownfacts) {
-    border: 0;
-    cursor: not-allowed;
-    opacity: 0.5;
-    pointer-events: none;
-}
-
-.memori-header--button svg {
-    width: 1em;
-    height: 1em;
-    font-size: 1em;
-    line-height: 1;
-}
-
-.memori-header--button.memori-header--button--experts svg {
-    fill: currentColor;
-}
-
-.memori-header--position {
-    display: inline-flex;
-    align-items: center;
-}
-
-.memori-header--position .memori-header--position-placeName {
-    display: inline-block;
-    overflow: hidden;
-    max-width: 250px;
-    padding-right: 0.25rem;
-    margin: 0;
-    font-style: italic;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-@media (max-width: 768px) {
-    .memori-header--position .memori-header--position-placeName {
-        display: none;
-    }
-}
-
-@media (max-width: 425px) {
-    .memori-header--button {
-        padding: 0.785rem;
-    }
-    .memori-chat-layout--header {
-        margin-bottom: 0;
-    }
-}
-
-.memori-header--button--sustainability-icon {
-    width: 1em;
-    color: currentColor;
-}
-.memori-header .memori-header--button--position {
-    margin-right: 0;
-}
-
-.memori-header--button--sustainability {
-    max-height: 37px;
-}
-
-.memori-dropdown--avatar-input {
-    position: absolute;
-    top: 20px;
-    left: 15px;
-    width: 48px;
-    height: 48px;
-    cursor: pointer;
-    opacity: 0;
-}
-
-.memori-dropdown--avatar:hover,
-.memori-dropdown--avatar-initial:hover,
-.memori-dropdown--avatar-input:hover {
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
-    cursor: pointer;
-    pointer-events: cursor;
-    transform: scale(1.05);
-}
-
-.memori-dropdown--avatar-initial:hover + .memori-dropdown--avatar-input,
-.memori-dropdown--avatar:hover + .memori-dropdown--avatar-input {
-    display: block;
-}
-
-.memori-dropdown--sustainability {
-    min-width: 300px;
-    padding: 0.85rem;
-    border: 1px solid color-mix(in srgb, var(--memori-button-border-color, #d9d9d9) 75%, white);
-    border-radius: 12px;
-    background: linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(245, 248, 252, 0.98) 100%);
-    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
-}
-
-.memori-dropdown--sustainability-title {
-    padding-bottom: 12px;
-    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
-    margin: 0.2rem 0.2rem 1rem;
-    color: color-mix(in srgb, var(--memori-text-color, #111827) 92%, #36506b);
-    font-size: 0.95rem;
-    font-weight: 700;
-    line-height: 1.2;
-    text-align: left;
-}
-
-.memori-dropdown--sustainability-section,
-.memori-dropdown--sustainability-metrics {
-    display: flex;
-    flex-direction: column;
-    gap: 0.35rem;
-}
-
-.memori-dropdown--sustainability-section-title {
-    margin: 0 0 0.1rem;
-    color: color-mix(in srgb, var(--memori-text-color, #111827) 62%, #64748b);
-    font-size: 0.71rem;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    line-height: 1.2;
-    text-transform: uppercase;
-}
-
-.memori-dropdown--sustainability-section {
-    padding-bottom: 0.65rem;
-    margin-bottom: 0.65rem;
-    /* border-bottom: 1px solid rgba(15, 23, 42, 0.08); */
-}
-
-.memori-dropdown--sustainability-summary {
-    display: grid;
-    gap: 0.5rem;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.memori-dropdown--sustainability-stat {
-    display: flex;
-    flex-direction: column;
-    padding: 0.55rem 0.65rem;
-    border: 1px solid rgba(15, 23, 42, 0.07);
-    border-radius: 10px;
-    background: rgba(255, 255, 255, 0.78);
-    gap: 0.15rem;
-}
-
-.memori-dropdown--sustainability-stat-label,
-.memori-dropdown--sustainability-stat-meta {
-    font-size: 0.72rem;
-    line-height: 1.2;
-}
-
-.memori-dropdown--sustainability-stat-label {
-    color: color-mix(in srgb, var(--memori-text-color, #111827) 68%, #6b7280);
-    font-weight: 600;
-    letter-spacing: 0.02em;
-}
-
-.memori-dropdown--sustainability-stat-value {
-    color: color-mix(in srgb, var(--memori-text-color, #111827) 94%, #1d4ed8);
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1.1;
-}
-
-.memori-dropdown--sustainability-stat-meta {
-    color: color-mix(in srgb, var(--memori-text-color, #111827) 55%, #64748b);
-}
-
-.memori-dropdown--sustainability-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 0.6rem;
-    border: 1px solid rgba(15, 23, 42, 0.05);
-    border-radius: 10px;
-    background: rgba(255, 255, 255, 0.72);
-    gap: 1rem;
-}
-
-.memori-dropdown--sustainability-row--stacked {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.45rem;
-}
-
-.memori-dropdown--sustainability-label {
-    display: inline-flex;
-    align-items: center;
-    color: color-mix(in srgb, var(--memori-text-color, #111827) 76%, #64748b);
-    font-size: 0.82rem;
-    font-weight: 600;
-    gap: 0.35rem;
-}
-
-.memori-dropdown--sustainability-value {
-    color: color-mix(in srgb, var(--memori-text-color, #111827) 96%, black);
-    font-size: 0.88rem;
-    font-weight: 700;
-    white-space: nowrap;
-}
-
-.memori-dropdown--sustainability-value--multiline {
-    width: 100%;
-    overflow-wrap: anywhere;
-    white-space: normal;
-}
-
-.memori-dropdown--sustainability-tags {
-    display: flex;
-    width: 100%;
-    flex-wrap: wrap;
-    gap: 0.35rem;
-}
-
-.memori-dropdown--sustainability-tag {
-    display: inline-flex;
-    min-height: 1.75rem;
-    align-items: center;
-    padding: 0.2rem 0.55rem;
-    /* border: 1px solid rgba(15, 23, 42, 0.08); */
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.88);
-    color: color-mix(in srgb, var(--memori-text-color, #111827) 85%, #475569);
-    font-size: 0.76rem;
-    font-weight: 600;
-    line-height: 1.1;
-}
-
-@media (max-width: 480px) {
-    .memori-dropdown--sustainability {
-        min-width: min(300px, calc(100vw - 2rem));
-    }
-}

package/src/components/Header/Header.stories.tsx

@@ -1,338 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { memori, tenant, history } from '../../mocks/data';
-import I18nWrapper from '../../I18nWrapper';
-import Header, { Props } from './Header';
-import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
-import LoginDrawer from '../LoginDrawer/LoginDrawer';
-import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
-
-import './Header.css';
-
-const meta: Meta = {
-  title: 'Widget/Header',
-  component: Header,
-  argTypes: {
-    showShare: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const historyWithConsumption = [
-  ...history,
-  {
-    ...history[history.length - 1],
-    llmUsage: {
-      energyImpact: {
-        energy: { parsedValue: 0.0012 },
-        gwp: { parsedValue: 0.00045 },
-        wcf: { parsedValue: 0.0021 },
-      },
-    },
-  },
-  {
-    ...history[history.length - 1],
-    text: 'Second sustainability sample',
-    llmUsage: {
-      provider: 'OpenAI',
-      model: 'gpt-5',
-      totalInputTokens: 19168,
-      inputCacheReadTokens: 0,
-      inputCacheWriteTokens: 0,
-      outputTokens: 588,
-      durationMs: 13697,
-      energyImpact: {
-        energy: 0.0008,
-        gwp: { source: '0.00035' },
-        wcf: { source: '0.0014' },
-      },
-    },
-  },
-] as any;
-
-const Template: Story<Props> = args => {
-  const [speakerMuted, setSpeakerMuted] = React.useState(args.speakerMuted);
-  const [showSettingsDrawer, setShowSettingsDrawer] = React.useState(false);
-  const [showKnownFactsDrawer, setShowKnownFactsDrawer] = React.useState(false);
-  const [showExpertsDrawer, setShowExpertsDrawer] = React.useState(false);
-  const [continuousSpeech, setContinuousSpeech] = React.useState(true);
-  const [continuousSpeechTimeout, setContinuousSpeechTimeout] =
-    React.useState(2);
-  const [showLoginDrawer, setShowLoginDrawer] = React.useState(false);
-
-  return (
-    <I18nWrapper>
-      <ArtifactProvider>
-        <Header
-          {...args}
-          speakerMuted={speakerMuted}
-          setSpeakerMuted={setSpeakerMuted}
-          showSettings
-          setShowSettingsDrawer={() => setShowSettingsDrawer(true)}
-          setShowKnownFactsDrawer={() => setShowKnownFactsDrawer(true)}
-          setShowExpertsDrawer={() => setShowExpertsDrawer(true)}
-          setShowLoginDrawer={() => setShowLoginDrawer(true)}
-        />
-        <SettingsDrawer
-          open={!!showSettingsDrawer}
-          onClose={() => setShowSettingsDrawer(false)}
-          microphoneMode="HOLD_TO_TALK"
-          setMicrophoneMode={() => {}}
-          continuousSpeechTimeout={2}
-          setContinuousSpeechTimeout={() => {}}
-          controlsPosition="bottom"
-          setControlsPosition={() => {}}
-          hideEmissions={false}
-          setHideEmissions={() => {}}
-          setAvatarType={() => {}}
-          setEnablePositionControls={() => {}}
-        />
-        <LoginDrawer
-          setUser={() => {}}
-          tenant={tenant}
-          open={!!showLoginDrawer}
-          onClose={() => setShowLoginDrawer(false)}
-          onLogin={(user, token) => {
-            console.log(user, token);
-            setShowLoginDrawer(false);
-          }}
-          onLogout={() => setShowLoginDrawer(false)}
-          apiClient={
-            {
-              backend: {},
-            } as any
-          }
-        />
-      </ArtifactProvider>
-    </I18nWrapper>
-  );
-};
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  memori,
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: false,
-  showShare: false,
-  showSettings: false,
-};
-
-export const WithPosition = Template.bind({});
-WithPosition.args = {
-  memori: {
-    ...memori,
-    needsPosition: true,
-  },
-  history,
-  position: {
-    placeName: 'Berlin',
-    latitude: 52.520008,
-    longitude: 13.404954,
-  },
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: false,
-  showShare: false,
-  showSettings: false,
-};
-
-export const SpeakerMuted = Template.bind({});
-SpeakerMuted.args = {
-  memori,
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: true,
-  hasUserActivatedSpeak: false,
-  showShare: false,
-  showSettings: false,
-};
-
-export const WithoutAudio = Template.bind({});
-WithoutAudio.args = {
-  memori,
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: true,
-  enableAudio: false,
-  hasUserActivatedSpeak: false,
-  showShare: false,
-  showSettings: false,
-};
-
-export const WithShare = Template.bind({});
-WithShare.args = {
-  memori,
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: false,
-  showShare: true,
-  showSettings: false,
-};
-
-export const WithSettings = Template.bind({});
-WithSettings.args = {
-  memori,
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: false,
-  showShare: false,
-  showSettings: true,
-};
-
-export const WithClear = Template.bind({});
-WithClear.args = {
-  memori,
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: false,
-  showShare: false,
-  showSettings: false,
-  showClear: true,
-};
-
-export const WithOngoingChat = Template.bind({});
-WithOngoingChat.args = {
-  memori,
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: true,
-  showShare: false,
-  showSettings: false,
-};
-
-export const WithDeepThoughtEnabled = Template.bind({});
-WithDeepThoughtEnabled.args = {
-  memori: {
-    ...memori,
-    enableDeepThought: true,
-  },
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: false,
-  showShare: false,
-  showSettings: false,
-  loginToken: 'abcd',
-};
-
-export const WithDeepThoughtEnabledAndOngoingChat = Template.bind({});
-WithDeepThoughtEnabledAndOngoingChat.args = {
-  memori: {
-    ...memori,
-    enableDeepThought: true,
-  },
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: true,
-  showShare: false,
-  showSettings: false,
-  sessionID: '1234',
-  loginToken: 'abcd',
-};
-
-export const ForBoardOfExperts = Template.bind({});
-ForBoardOfExperts.args = {
-  memori: {
-    ...memori,
-    enableBoardOfExperts: true,
-  },
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  showExperts: true,
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: false,
-  showShare: false,
-  showSettings: false,
-  loginToken: 'abcd',
-};
-
-export const ForBoardOfExpertsAndOngoingChat = Template.bind({});
-ForBoardOfExpertsAndOngoingChat.args = {
-  memori: {
-    ...memori,
-    enableBoardOfExperts: true,
-  },
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  showExperts: true,
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: true,
-  showShare: false,
-  showSettings: false,
-  sessionID: '1234',
-  loginToken: 'abcd',
-};
-
-export const WithLogin = Template.bind({});
-WithLogin.args = {
-  memori,
-  history,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: false,
-  showLogin: true,
-};
-
-export const WithSustainabilityPopover = Template.bind({});
-WithSustainabilityPopover.args = {
-  memori,
-  history: historyWithConsumption,
-  setShowPositionDrawer: () => {},
-  setShowSettingsDrawer: () => {},
-  setShowChatHistoryDrawer: () => {},
-  setShowKnownFactsDrawer: () => {},
-  setShowExpertsDrawer: () => {},
-  setShowLoginDrawer: () => {},
-  clearHistory: () => {},
-  speakerMuted: false,
-  hasUserActivatedSpeak: true,
-  showShare: false,
-  showSettings: false,
-  showMessageConsumption: true,
-  apiClient: {
-    backend: {},
-  } as any,
-};