diff --git a/.gitignore b/.gitignore index b2f86d2f..1c51adb7 100644 --- a/.gitignore +++ b/.gitignore @@ -16,4 +16,3 @@ coverage !.yarn/releases !.yarn/sdks !.yarn/versions -.env \ No newline at end of file diff --git a/README.md b/README.md index 035b2cd2..9397d255 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ const App = () => ( | `showLogin` | | `bool` | `true` | Show the login button | | `showClear` | | `bool` | `false` | Show clear chat history button | | `showOnlyLastMessages` | | `bool` | `true` or `false` \* | Show only last 2 messages. (\*) Defaults to `true` for `TOTEM` and `WEBSITE_ASSISTANT` layouts, `false` otherwise | +| `showUpload` | | `bool` | `true` | Show the upload button within the chat | | `baseURL` | | `string` | | Base URL of the Memori, example: "https://aisuru.com" | | `apiURL` | | `string` | "https://backend.memori.ai" | URL of the Memori Backend API | | `engineURL` | | `string` | "https://engine.memori.ai" | URL of the Memori Engine API | @@ -89,7 +90,7 @@ const App = () => ( | `defaultSpeakerActive` | | `boolean` | `true` | Default value for the speaker activation | | `disableTextEnteredEvents` | | `boolean` | `false` | Disable MemoriTextEntered events listeners for `typeMessage` functions, useful to avoid issues with multiple widgets in page. | | `AZURE_COGNITIVE_SERVICES_TTS_KEY` | | `string` | | Azure Cognitive Services TTS key, used to generate the audio of the Memori and for STT recognition | -| `layout` | | `string` | | Layout of the Memori, can be "FULLPAGE" (default), "CHAT", "WEBSITE_ASSISTANT", "TOTEM", "HIDDEN_CHAT" or "ZOOMED_FULL_BODY". see [below](#layouts) | +| `layout` | | `string` | | Layout of the Memori, can be "FULLPAGE" (default), "CHAT", "WEBSITE_ASSISTANT", "TOTEM", "HIDDEN_CHAT" or "ZOOMED_FULL_BODY". see [below](#layouts) | | `customLayout` | | `React.FC` | | Custom layout component, see [below](#custom-layout) | | `customMediaRenderer` | | `(mimeType: string) => JSX.Element \| null` | | Custom media renderer, see [below](#custom-media-renderer) | | `additionalSettings` | | `JSX.Element` | | Custom JSX or component to render within the settings drawer | diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index e872189d..b8a2332a 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -57,13 +57,16 @@ export interface Props { showMicrophone?: boolean; userMessage?: string; onChangeUserMessage: (userMessage: string) => void; - sendMessage: (msg: string, media?: { - mediumID: string; - mimeType: string; - content: string; - title?: string; - properties?: { [key: string]: any }; - }) => void; + sendMessage: ( + msg: string, + media?: { + mediumID: string; + mimeType: string; + content: string; + title?: string; + properties?: { [key: string]: any }; + } + ) => void; listening?: boolean; setEnableFocusChatInput: (enableFocusChatInput: boolean) => void; isPlayingAudio?: boolean; @@ -140,7 +143,7 @@ const Chat: React.FC = ({ const onTextareaFocus = () => { stopListening(); - const hasTouch = hasTouchscreen(); + const hasTouch = hasTouchscreen(); if (hasTouch) setEnableFocusChatInput(true); // if the user is on mobile and had not recorded audio, add the chat-focused class to the chat wrapper @@ -208,8 +211,6 @@ const Chat: React.FC = ({ {history.map((message, index) => ( - - {/* Main message */} = ({ showCopyButton={showCopyButton} /> - {/* Date and time */} {showDates && !!message.timestamp && ( = ({ )} - {/* Context variables */} {showContextPerLine && !!Object.keys(message.contextVars ?? {}).length && (
@@ -285,7 +284,6 @@ const Chat: React.FC = ({
)} - {/* Media */} = ({ (showFeedback && simulateUserPrompt), })} > - {/* Avatar for non-user messages */} {!message.fromUser && ( = ({ )} - {/* Message bubble content */} = ({ message.fromUser ? '30' : '-30' }`} > - {/* Message text content */}
- {/* Action buttons and indicators */} {((!message.fromUser && showCopyButton) || (message.generatedByAI && showAIicon) || (showFeedback && simulateUserPrompt)) && (
- {/* Copy text button */} {!message.fromUser && showCopyButton && (
)} - {/* Render User attachments if there are any */} {message.fromUser && message.media?.length && message.media[0].properties?.isAttachedFile && ( @@ -424,10 +411,8 @@ const ChatBubble: React.FC = ({ )} - {/* User avatar section */} {message.fromUser && ( <> - {/* Show user avatar if it's a URL or user has an avatar URL */} {(!!userAvatar && typeof userAvatar === 'string') || (!userAvatar && !!user?.avatarURL?.length) ? ( = ({ /> ) : !!userAvatar ? ( - /* Show custom avatar component if provided */ = ({ {userAvatar} ) : ( - /* Show default user icon if no avatar is provided */ void; - /** Current attachments menu state */ attachmentsMenuOpen?: 'link' | 'media'; - /** Callback to update attachments menu state */ setAttachmentsMenuOpen: (attachmentsMenuOpen: 'link' | 'media') => void; - /** Current user message text */ userMessage?: string; - /** Callback when user message changes */ onChangeUserMessage: (userMessage: string) => void; - /** Callback to send a message */ sendMessage: ( msg: string, media?: { @@ -39,40 +29,20 @@ export interface Props { properties?: { [key: string]: any }; } ) => void; - /** Callback when textarea is focused */ onTextareaFocus: () => void; - /** Callback when textarea loses focus */ onTextareaBlur: () => void; - /** Callback to reset speech transcript */ resetTranscript: () => void; - /** Whether microphone is currently listening */ listening?: boolean; - /** Whether audio is currently playing */ isPlayingAudio?: boolean; - /** Callback to stop audio playback */ stopAudio: () => void; - /** Callback to start microphone listening */ startListening: () => void; - /** Callback to stop microphone listening */ stopListening: () => void; - /** Whether to show microphone button */ showMicrophone?: boolean; - /** Microphone input mode */ microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK'; - /** Auth token for API requests */ authToken?: string; - /** Whether to show file upload button */ showUpload?: boolean; } -/** - * Chat inputs component - * Handles the chat input area, including: - * - Text input for typing messages - * - Send button - * - File upload/attachment - * - Voice input via microphone - */ const ChatInputs: React.FC = ({ dialogState, userMessage = '', @@ -92,7 +62,6 @@ const ChatInputs: React.FC = ({ }) => { const { t } = useTranslation(); - // State for file preview list const [previewFiles, setPreviewFiles] = useState< { name: string; id: string; content: string }[] @@ -177,13 +146,8 @@ const ChatInputs: React.FC = ({ /> {showUpload && ( <> - - + + )}