Skip to content

Commit

Permalink
chore: cleanup + add global prop for showUpload
Browse files Browse the repository at this point in the history
  • Loading branch information
@nzambello
nzambello committed Dec 19, 2024
1 parent ce33a34 commit fa29eb6
Show file tree
Hide file tree
Showing 8 changed files with 31 additions and 98 deletions.
1 change: 0 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,3 @@ coverage
!.yarn/releases
!.yarn/sdks
!.yarn/versions
.env
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand All @@ -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<LayoutProps>` | | 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 |
Expand Down
24 changes: 11 additions & 13 deletions src/components/Chat/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -140,7 +143,7 @@ const Chat: React.FC<Props> = ({

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
Expand Down Expand Up @@ -208,8 +211,6 @@ const Chat: React.FC<Props> = ({

{history.map((message, index) => (
<React.Fragment key={index}>

{/* Main message */}
<ChatBubble
isFirst={index === 0}
message={message}
Expand All @@ -233,7 +234,6 @@ const Chat: React.FC<Props> = ({
showCopyButton={showCopyButton}
/>

{/* Date and time */}
{showDates && !!message.timestamp && (
<small
className={`memori-chat--timestamp ${
Expand All @@ -254,7 +254,6 @@ const Chat: React.FC<Props> = ({
</small>
)}

{/* Context variables */}
{showContextPerLine &&
!!Object.keys(message.contextVars ?? {}).length && (
<div className="memori-chat--context-vars">
Expand Down Expand Up @@ -285,7 +284,6 @@ const Chat: React.FC<Props> = ({
</div>
)}

{/* Media */}
<MediaWidget
simulateUserPrompt={simulateUserPrompt}
media={message?.media?.filter(
Expand Down
19 changes: 1 addition & 18 deletions src/components/ChatBubble/ChatBubble.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,11 @@ import Copy from '../icons/Copy';
import Code from '../icons/Code';
import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
import { cleanUrl, stripHTML, stripOutputTags } from '../../helpers/utils';
import FilePreview from '../FilePreview/FilePreview';

import markedLinkifyIt from 'marked-linkify-it';
import markedKatex from 'marked-katex-extension';
import markedExtendedTables from '../../helpers/markedExtendedTables';
import UploadIcon from '../icons/Upload';
import PreviewIcon from '../icons/Preview';
import FilePreview from '../FilePreview/FilePreview';

export interface Props {
message: Message;
Expand Down Expand Up @@ -205,7 +203,6 @@ const ChatBubble: React.FC<Props> = ({
(showFeedback && simulateUserPrompt),
})}
>
{/* Avatar for non-user messages */}
{!message.fromUser && (
<Transition.Child
as="picture"
Expand Down Expand Up @@ -278,7 +275,6 @@ const ChatBubble: React.FC<Props> = ({
</Transition.Child>
)}

{/* Message bubble content */}
<Transition.Child
as="div"
className={cx('memori-chat--bubble', {
Expand All @@ -301,19 +297,16 @@ const ChatBubble: React.FC<Props> = ({
message.fromUser ? '30' : '-30'
}`}
>
{/* Message text content */}
<div
dir="auto"
className="memori-chat--bubble-content"
dangerouslySetInnerHTML={{ __html: renderedText }}
/>

{/* Action buttons and indicators */}
{((!message.fromUser && showCopyButton) ||
(message.generatedByAI && showAIicon) ||
(showFeedback && simulateUserPrompt)) && (
<div className="memori-chat--bubble-addon">
{/* Copy text button */}
{!message.fromUser && showCopyButton && (
<Button
ghost
Expand All @@ -325,7 +318,6 @@ const ChatBubble: React.FC<Props> = ({
/>
)}

{/* Copy raw code button */}
{!message.fromUser &&
showCopyButton &&
plainText !== message.text && (
Expand All @@ -341,7 +333,6 @@ const ChatBubble: React.FC<Props> = ({
/>
)}

{/* Feedback buttons */}
{showFeedback && !!simulateUserPrompt && (
<FeedbackButtons
memori={memori}
Expand All @@ -353,7 +344,6 @@ const ChatBubble: React.FC<Props> = ({
/>
)}

{/* AI generation indicator */}
{message.generatedByAI && showAIicon && (
<Tooltip
align="left"
Expand All @@ -366,7 +356,6 @@ const ChatBubble: React.FC<Props> = ({
</Tooltip>
)}

{/* Translation original text indicator */}
{showTranslationOriginal &&
message.translatedText &&
message.translatedText !== message.text && (
Expand All @@ -387,7 +376,6 @@ const ChatBubble: React.FC<Props> = ({
</Tooltip>
)}

{/* Why this answer button */}
{!message.fromUser &&
message.questionAnswered &&
apiUrl &&
Expand All @@ -407,7 +395,6 @@ const ChatBubble: React.FC<Props> = ({
</div>
)}

{/* Render User attachments if there are any */}
{message.fromUser &&
message.media?.length &&
message.media[0].properties?.isAttachedFile && (
Expand All @@ -424,10 +411,8 @@ const ChatBubble: React.FC<Props> = ({
)}
</Transition.Child>

{/* 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) ? (
<Transition.Child
Expand All @@ -451,7 +436,6 @@ const ChatBubble: React.FC<Props> = ({
/>
</Transition.Child>
) : !!userAvatar ? (
/* Show custom avatar component if provided */
<Transition.Child
as="div"
className="memori-chat--bubble-avatar"
Expand All @@ -469,7 +453,6 @@ const ChatBubble: React.FC<Props> = ({
{userAvatar}
</Transition.Child>
) : (
/* Show default user icon if no avatar is provided */
<Transition.Child
as="div"
className="memori-chat--bubble-avatar"
Expand Down
1 change: 0 additions & 1 deletion src/components/ChatInputs/ChatInputs.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import I18nWrapper from '../../I18nWrapper';
import { dialogState } from '../../mocks/data';

import './ChatInputs.css';
import UploadButton from '../UploadButton/UploadButton';

const meta: Meta = {
title: 'Widget/Chat inputs (footer)',
Expand Down
40 changes: 2 additions & 38 deletions src/components/ChatInputs/ChatInputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,15 @@ import Microphone from '../icons/Microphone';
import UploadButton from '../UploadButton/UploadButton';
import FilePreview from '../FilePreview/FilePreview';


export interface Props {
/** Current dialog state */
dialogState?: DialogState;
/** Whether to show instruction mode */
instruct?: boolean;
/** When to send message - on enter key or click */
sendOnEnter?: 'keypress' | 'click';
/** Callback to update send on enter setting */
setSendOnEnter: (sendOnEnter: 'keypress' | 'click') => 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?: {
Expand All @@ -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<Props> = ({
dialogState,
userMessage = '',
Expand All @@ -92,7 +62,6 @@ const ChatInputs: React.FC<Props> = ({
}) => {
const { t } = useTranslation();


// State for file preview list
const [previewFiles, setPreviewFiles] = useState<
{ name: string; id: string; content: string }[]
Expand Down Expand Up @@ -177,13 +146,8 @@ const ChatInputs: React.FC<Props> = ({
/>
{showUpload && (
<>
<FilePreview
previewFiles={previewFiles}
removeFile={removeFile}
/>
<UploadButton
setPreviewFiles={setPreviewFiles}
/>
<FilePreview previewFiles={previewFiles} removeFile={removeFile} />
<UploadButton setPreviewFiles={setPreviewFiles} />
</>
)}
<Button
Expand Down
Loading

0 comments on commit fa29eb6

Please sign in to comment.