feat: add chat component

src/components/Chat/Chat.css

@@ -0,0 +1,117 @@
+.memori-chat--wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    height: 100svh;
+    flex-direction: column;
+}
+
+.memori-chat--history {
+    width: 100%;
+    height: calc(100% - 50px);
+    flex: 1;
+    padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
+    border-radius: 10px;
+    margin: 1rem 0;
+    background-color: var(--memori-inner-bg);
+}
+
+.memori-chat--history.memori-chat--history-touch {
+    height: 80% !important;
+    padding: 0;
+}
+
+.memori-chat--content {
+    position: relative;
+    display: flex;
+    height: 100%;
+    flex: 1;
+    flex-direction: column;
+    padding: 2rem 10px;
+    mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%);
+    overflow-y: auto;
+}
+
+.memori-chat--content.memori-chat--content-touch {
+    padding: 0;
+}
+
+.memori-chat--cover {
+    position: relative;
+    width: 100%;
+    padding-top: 31.25%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background-position: center;
+    background-size: cover;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+.memori-chat--cover+.memori-chat--bubble-initial {
+    display: none;
+}
+
+.memori-chat--timestamp {
+    display: inline-block;
+    padding: 0 3.5rem;
+    margin-bottom: 0.5em;
+    color: #969696;
+    font-size: 0.8em;
+}
+
+.memori-chat--timestamp.text-left {
+    text-align: left;
+}
+
+.memori-chat--timestamp.text-right {
+    text-align: right;
+}
+
+.memori-chat--context-vars {
+    padding: 0 3.5rem;
+    margin-bottom: 0.5em;
+}
+
+.memori-chat--context-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 5px;
+    margin-right: 0.5rem;
+    box-shadow: 0 0 0.25rem var(--memori-primary);
+    color: var(--text-color, #333);
+    font-size: 0.75rem;
+}
+
+.memori-chat--context-tag:focus-within {
+    border: 1px solid var(--memori-primary);
+    box-shadow: none;
+}
+
+.memori-chat--context-tag.memori-chat--context-tag-canceled {
+    opacity: 0.7;
+    text-decoration: line-through 1.5px;
+}
+
+.memori-chat--context-tag-text {
+    display: inline-block;
+    overflow: hidden;
+    max-width: 200px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-chat--context-tag+.memori-chat--context-tag {
+    margin-top: 0.5rem;
+}
+
+.memori-chat--known-tags {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 1.5rem;
+}
+
+.memori-chat--known-tag {
+    margin-right: 0.5rem;
+}

src/components/Chat/Chat.stories.tsx

@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import {
+  memori,
+  tenant,
+  history,
+  historyWithMedia,
+  sessionID,
+  dialogState as dialogStateWithHints,
+} from '../../mocks/data';
+import Chat, { Props } from './Chat';
+
+const meta: Meta = {
+  title: 'Widget/Chat',
+  component: Chat,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const dialogState = {
+  ...dialogStateWithHints,
+  hints: [],
+};
+
+const Template: Story<Props> = args => {
+  const [userMessage, setUserMessage] = useState(args.userMessage);
+
+  return (
+    <Chat
+      {...args}
+      userMessage={userMessage}
+      onChangeUserMessage={setUserMessage}
+    />
+  );
+};
+
+// 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,
+  tenant,
+  sessionID,
+  history,
+  dialogState,
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const MemoriTyping = Template.bind({});
+MemoriTyping.args = {
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState,
+  simulateUserPrompt: () => {},
+  memoriTyping: true,
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const WithHints = Template.bind({});
+WithHints.args = {
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState: dialogStateWithHints,
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const WithMedia = Template.bind({});
+WithMedia.args = {
+  memori,
+  tenant,
+  sessionID,
+  history: historyWithMedia,
+  dialogState,
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const WithDates = Template.bind({});
+WithDates.args = {
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState,
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+  showDates: true,
+};
+
+export const WithContext = Template.bind({});
+WithContext.args = {
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState,
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+  showContextPerLine: true,
+};
+
+export const WithDatesAndContext = Template.bind({});
+WithDatesAndContext.args = {
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState,
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+  showDates: true,
+  showContextPerLine: true,
+};
+
+export const OnX3State = Template.bind({});
+OnX3State.args = {
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState: {
+    ...dialogState,
+    state: 'X3',
+  },
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const OnX2aState = Template.bind({});
+OnX2aState.args = {
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState: {
+    ...dialogState,
+    state: 'X2a',
+  },
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};