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

package/src/components/ChatBubble/ChatBubble.tsx

@@ -39,7 +39,6 @@ import {
 } from '../../helpers/message';
 import { Expandable, Modal } from '@memori.ai/ui';
 import memoriApiClient from '@memori.ai/memori-api-client';
-import { usePressTooltip } from '../../helpers/usePressTooltip';
 import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 const ASSET_URL_PATTERN = /https?:\/\/\S*\/api\/v\d+\/asset\/\S+/gi;
 
@@ -131,7 +130,6 @@ const ChatBubble: React.FC<Props> = ({
   const { t, i18n } = useTranslation();
   const surfaceEl = useWidgetSurfaceEl();
   const lang = i18n.language || 'en';
-  const generatedByAiTooltip = usePressTooltip();
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
   const [openFunctionCache, setOpenFunctionCache] = useState(false);
   const [copyStatus, setCopyStatus] = useState<{
@@ -498,19 +496,17 @@ const ChatBubble: React.FC<Props> = ({
       ) || []),
     ...parseDocumentAttachmentsFromMessage(
       message.translatedText || message.text
-    ).map(
-      (attachment, attachmentIndex): Medium & { type?: string } => ({
-        mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
-          .toString(36)
-          .substr(2, 9)}`,
-        url: attachment.url,
-        mimeType: attachment.type,
-        title: attachment.filename,
-        content: attachment.content,
-        properties: { isDocumentAttachment: true },
-        type: 'document',
-      })
-    ),
+    ).map((attachment, attachmentIndex): Medium & { type?: string } => ({
+      mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
+        .toString(36)
+        .substr(2, 9)}`,
+      url: attachment.url,
+      mimeType: attachment.type,
+      title: attachment.filename,
+      content: attachment.content,
+      properties: { isDocumentAttachment: true },
+      type: 'document',
+    })),
   ];
 
   const codeMediaWidgetMedia =
@@ -562,307 +558,319 @@ const ChatBubble: React.FC<Props> = ({
               'memori-chat--bubble-shell--from-user': !!message.fromUser,
             })}
           >
-          <div
-            className={cx('memori-chat--bubble-anchor', {
-              'memori-chat--bubble-anchor--from-user': !!message.fromUser,
-              'memori-chat--bubble-anchor--has-addon': shouldShowBubbleAddon,
-            })}
-          >
-          <div
-            className={cx('memori-chat--bubble', {
-              'memori-chat--user-bubble': !!message.fromUser,
-              'memori-chat--with-addon':
-                shouldShowCopyButtons || (showFeedback && simulateUserPrompt),
-              'memori-chat--ai-generated': message.generatedByAI,
-              'memori-chat--with-feedback': showFeedback,
-            })}
-          >
-            {message.fromUser ? (
-              <Expandable
-                className="memori-chat--bubble-content"
-                mode="characters"
-              >
-                <div
-                  dir="auto"
-                  className="memori-chat--bubble-content"
-                  dangerouslySetInnerHTML={{ __html: sanitizeMsg(cleanText) }}
-                />
-              </Expandable>
-            ) : (
-              <div
-                dir="auto"
-                className="memori-chat--bubble-content"
-                dangerouslySetInnerHTML={{ __html: renderedText }}
-              />
-            )}
-
-            {!!usageHtml && (
+            <div
+              className={cx('memori-chat--bubble-anchor', {
+                'memori-chat--bubble-anchor--from-user': !!message.fromUser,
+                'memori-chat--bubble-anchor--has-addon': shouldShowBubbleAddon,
+              })}
+            >
               <div
-                className="memori-chat--usage-inside-bubble"
-                dangerouslySetInnerHTML={{ __html: usageHtml }}
-              />
-            )}
-          </div>
+                className={cx('memori-chat--bubble', {
+                  'memori-chat--user-bubble': !!message.fromUser,
+                  'memori-chat--with-addon':
+                    shouldShowCopyButtons ||
+                    (showFeedback && simulateUserPrompt),
+                  'memori-chat--ai-generated': message.generatedByAI,
+                  'memori-chat--with-feedback': showFeedback,
+                })}
+              >
+                {message.fromUser ? (
+                  <Expandable
+                    className="memori-chat--bubble-content"
+                    mode="characters"
+                  >
+                    <div
+                      dir="auto"
+                      className="memori-chat--bubble-content"
+                      dangerouslySetInnerHTML={{
+                        __html: sanitizeMsg(cleanText).replaceAll(
+                          '\n',
+                          '<br/>'
+                        ),
+                      }}
+                    />
+                  </Expandable>
+                ) : (
+                  <div
+                    dir="auto"
+                    className="memori-chat--bubble-content"
+                    dangerouslySetInnerHTML={{ __html: renderedText }}
+                  />
+                )}
 
-          {shouldShowBubbleAddon && (
-            <div className="memori-chat--bubble-addon">
-              {shouldShowTimestampInAddon && (
-                <div className="memori-chat--bubble-timestamp-container">
-                  <p className="memori-chat--bubble-timestamp">
-                    {formattedTimestamp}
-                  </p>
-                  {hasAddonAfterTimestamp && (
-                    <span className="memori-chat--bubble-timestamp-separator">
-                      •
-                    </span>
+                {!!usageHtml && (
+                  <div
+                    className="memori-chat--usage-inside-bubble"
+                    dangerouslySetInnerHTML={{ __html: usageHtml }}
+                  />
+                )}
+              </div>
+
+              {shouldShowBubbleAddon && (
+                <div className="memori-chat--bubble-addon">
+                  {shouldShowTimestampInAddon && (
+                    <div className="memori-chat--bubble-timestamp-container">
+                      <p className="memori-chat--bubble-timestamp">
+                        {formattedTimestamp}
+                      </p>
+                      {hasAddonAfterTimestamp && (
+                        <span className="memori-chat--bubble-timestamp-separator">
+                          •
+                        </span>
+                      )}
+                    </div>
                   )}
-                </div>
-              )}
-              {shouldShowCopyButtons && (
-                <Tooltip
-                  {...bubbleAddonTooltipProps}
-                  placement="bottom"
-                  content={
-                    copyStatus.plain === 'success'
-                      ? copiedLabel
-                      : copyStatus.plain === 'error'
-                      ? t('copyFailed')
-                      : t('copy') || 'Copy'
-                  }
-                >
-                  <span className="memori-chat--bubble-addon-tooltip-trigger">
-                    <Button
-                      variant="ghost"
-                      shape="circle"
-                      type="button"
-                      aria-label={
+                  {shouldShowCopyButtons && (
+                    <Tooltip
+                      {...bubbleAddonTooltipProps}
+                      placement="bottom"
+                      content={
                         copyStatus.plain === 'success'
-                          ? String(copiedLabel)
+                          ? copiedLabel
                           : copyStatus.plain === 'error'
-                          ? String(t('copyFailed'))
-                          : String(t('copy') || 'Copy')
+                          ? t('copyFailed')
+                          : t('copy') || 'Copy'
                       }
-                      className={cx(
-                        'memori-chat--bubble-action-button',
-                        'memori-share-button--copy-item',
-                        {
-                          'memori-share-button--copy-item--success':
-                            copyStatus.plain === 'success',
-                          'memori-share-button--copy-item--error':
-                            copyStatus.plain === 'error',
-                        }
-                      )}
-                      icon={
-                        copyStatus.plain === 'success' ? (
-                          <Check
-                            className="memori-share-button--copy-icon"
-                            aria-hidden
-                            strokeWidth={2.5}
-                          />
-                        ) : (
-                          <Copy
-                            className="memori-share-button--copy-icon"
-                            aria-hidden
-                          />
-                        )
-                      }
-                      onClick={() => handleCopyClick('plain', copyText)}
-                    />
-                  </span>
-                </Tooltip>
-              )}
+                    >
+                      <span className="memori-chat--bubble-addon-tooltip-trigger">
+                        <Button
+                          variant="ghost"
+                          shape="circle"
+                          type="button"
+                          size="sm"
+                          aria-label={
+                            copyStatus.plain === 'success'
+                              ? String(copiedLabel)
+                              : copyStatus.plain === 'error'
+                              ? String(t('copyFailed'))
+                              : String(t('copy') || 'Copy')
+                          }
+                          className={cx(
+                            'memori-chat--bubble-action-button',
+                            'memori-share-button--copy-item',
+                            {
+                              'memori-share-button--copy-item--success':
+                                copyStatus.plain === 'success',
+                              'memori-share-button--copy-item--error':
+                                copyStatus.plain === 'error',
+                            }
+                          )}
+                          icon={
+                            copyStatus.plain === 'success' ? (
+                              <Check
+                                className="memori-share-button--copy-icon"
+                                aria-hidden
+                                strokeWidth={2.5}
+                              />
+                            ) : (
+                              <Copy
+                                className="memori-share-button--copy-icon"
+                                aria-hidden
+                              />
+                            )
+                          }
+                          onClick={() => handleCopyClick('plain', copyText)}
+                        />
+                      </span>
+                    </Tooltip>
+                  )}
 
-              {shouldShowCopyRawButton && (
-                <Tooltip
-                  {...bubbleAddonTooltipProps}
-                  placement="bottom"
-                  content={
-                    copyStatus.raw === 'success'
-                      ? copiedLabel
-                      : copyStatus.raw === 'error'
-                      ? t('copyFailed')
-                      : t('copyRawCode') || 'Copy raw code'
-                  }
-                >
-                  <span className="memori-chat--bubble-addon-tooltip-trigger">
-                    <Button
-                      variant="ghost"
-                      shape="circle"
-                      type="button"
-                      aria-label={
+                  {shouldShowCopyRawButton && (
+                    <Tooltip
+                      {...bubbleAddonTooltipProps}
+                      placement="bottom"
+                      content={
                         copyStatus.raw === 'success'
-                          ? String(copiedLabel)
+                          ? copiedLabel
                           : copyStatus.raw === 'error'
-                          ? String(t('copyFailed'))
-                          : String(t('copyRawCode') || 'Copy raw code')
-                      }
-                      className={cx(
-                        'memori-chat--bubble-action-button',
-                        'memori-share-button--copy-item',
-                        {
-                          'memori-share-button--copy-item--success':
-                            copyStatus.raw === 'success',
-                          'memori-share-button--copy-item--error':
-                            copyStatus.raw === 'error',
-                        }
-                      )}
-                      icon={
-                        copyStatus.raw === 'success' ? (
-                          <Check
-                            className="memori-share-button--copy-icon"
-                            aria-hidden
-                            strokeWidth={2.5}
-                          />
-                        ) : (
-                          <Code
-                            className="memori-share-button--copy-icon"
-                            aria-hidden
-                          />
-                        )
+                          ? t('copyFailed')
+                          : t('copyRawCode') || 'Copy raw code'
                       }
-                      onClick={() => handleCopyClick('raw', rawMessageText)}
-                    />
-                  </span>
-                </Tooltip>
-              )}
+                    >
+                      <span className="memori-chat--bubble-addon-tooltip-trigger">
+                        <Button
+                          variant="ghost"
+                          shape="circle"
+                          type="button"
+                          size="sm"
+                          aria-label={
+                            copyStatus.raw === 'success'
+                              ? String(copiedLabel)
+                              : copyStatus.raw === 'error'
+                              ? String(t('copyFailed'))
+                              : String(t('copyRawCode') || 'Copy raw code')
+                          }
+                          className={cx(
+                            'memori-chat--bubble-action-button',
+                            'memori-share-button--copy-item',
+                            {
+                              'memori-share-button--copy-item--success':
+                                copyStatus.raw === 'success',
+                              'memori-share-button--copy-item--error':
+                                copyStatus.raw === 'error',
+                            }
+                          )}
+                          icon={
+                            copyStatus.raw === 'success' ? (
+                              <Check
+                                className="memori-share-button--copy-icon"
+                                aria-hidden
+                                strokeWidth={2.5}
+                              />
+                            ) : (
+                              <Code
+                                className="memori-share-button--copy-icon"
+                                aria-hidden
+                              />
+                            )
+                          }
+                          onClick={() => handleCopyClick('raw', rawMessageText)}
+                        />
+                      </span>
+                    </Tooltip>
+                  )}
 
-              {!message.fromUser &&
-                showFunctionCache &&
-                message.media?.some(
-                  m =>
-                    Boolean(m.properties?.functionCache) ||
-                    m.properties?.functionCache === 'true'
-                ) && (
-                  <Tooltip
-                    {...bubbleAddonTooltipProps}
-                    placement="bottom"
-                    content={t('functionCache') || 'Function cache'}
-                    className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug"
-                  >
-                    <span className="memori-chat--bubble-addon-tooltip-trigger">
-                      <Button
-                        variant="ghost"
-                        shape="circle"
-                        className="memori-chat--bubble-action-button"
-                        icon={
-                          <Bug
-                            aria-label={t('functionCache') || 'Function cache'}
+                  {!message.fromUser &&
+                    showFunctionCache &&
+                    message.media?.some(
+                      m =>
+                        Boolean(m.properties?.functionCache) ||
+                        m.properties?.functionCache === 'true'
+                    ) && (
+                      <Tooltip
+                        {...bubbleAddonTooltipProps}
+                        placement="bottom"
+                        content={t('functionCache') || 'Function cache'}
+                        className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug"
+                      >
+                        <span className="memori-chat--bubble-addon-tooltip-trigger">
+                          <Button
+                            variant="ghost"
+                            shape="circle"
+                            size="sm"
+                            className="memori-chat--bubble-action-button"
+                            icon={
+                              <Bug
+                                aria-label={
+                                  t('functionCache') || 'Function cache'
+                                }
+                              />
+                            }
+                            onClick={() => setOpenFunctionCache(true)}
                           />
-                        }
-                        onClick={() => setOpenFunctionCache(true)}
-                      />
-                    </span>
-                  </Tooltip>
-                )}
-
-              {showFeedback && !!simulateUserPrompt && (
-                <FeedbackButtons
-                  memori={memori}
-                  className="memori-chat--bubble-feedback"
-                  dropdown
-                  onNegativeClick={msg => {
-                    if (msg) simulateUserPrompt(msg);
-                  }}
-                />
-              )}
-
-              {message.generatedByAI && showAIicon && (
-                <Tooltip
-                  {...bubbleAddonTooltipProps}
-                  placement="bottom"
-                  content={t('generatedByAI')}
-                  className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
-                  {...generatedByAiTooltip.tooltipProps}
-                >
-                  <span className="memori-chat--bubble-addon-tooltip-trigger">
-                    <Button
-                      variant="ghost"
-                      shape="circle"
-                      type="button"
-                      className="memori-chat--bubble-action-button"
-                      aria-label={String(t('generatedByAI'))}
-                      icon={<Bot aria-hidden />}
-                      {...generatedByAiTooltip.pressTriggerProps}
+                        </span>
+                      </Tooltip>
+                    )}
+
+                  {showFeedback && !!simulateUserPrompt && (
+                    <FeedbackButtons
+                      memori={memori}
+                      className="memori-chat--bubble-feedback"
+                      dropdown
+                      onNegativeClick={msg => {
+                        if (msg) simulateUserPrompt(msg);
+                      }}
                     />
-                  </span>
-                </Tooltip>
-              )}
+                  )}
 
-              {showTranslationOriginal &&
-                message.translatedText &&
-                message.translatedText !== message.text && (
-                  <Tooltip
-                    {...bubbleAddonTooltipProps}
-                    placement="bottom"
-                    content={`${
-                      lang === 'it' ? 'Testo originale' : 'Original text'
-                    }: ${stripAllInternalTags(message.text)}`}
-                    className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
-                  >
-                    <span className="memori-chat--bubble-addon-tooltip-trigger">
-                      <Button
-                        variant="ghost"
-                        shape="circle"
-                        type="button"
-                        className="memori-chat--bubble-action-button"
-                        aria-label={
-                          lang === 'it' ? 'Testo originale' : 'Original text'
-                        }
-                        icon={<Languages aria-hidden />}
-                      />
-                    </span>
-                  </Tooltip>
-                )}
+                  {message.generatedByAI && showAIicon && (
+                    <Tooltip
+                      {...bubbleAddonTooltipProps}
+                      placement="bottom"
+                      content={t('generatedByAI')}
+                      className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+                    >
+                      <span
+                        className="memori-chat--bubble-addon-tooltip-trigger memori-chat--bubble-ai-icon"
+                        role="img"
+                        aria-label={String(t('generatedByAI'))}
+                      >
+                        <Bot aria-hidden />
+                      </span>
+                    </Tooltip>
+                  )}
 
-              {!message.fromUser &&
-                message.questionAnswered &&
-                apiUrl &&
-                showWhyThisAnswer && (
-                  <Tooltip
-                    {...bubbleAddonTooltipProps}
-                    placement="bottom"
-                    content={t('whyThisAnswer') || 'Why this answer?'}
-                  >
-                    <span className="memori-chat--bubble-addon-tooltip-trigger">
-                      <Button
-                        variant="ghost"
-                        shape="circle"
-                        className="memori-chat--bubble-action-button"
-                        onClick={() => setShowingWhyThisAnswer(true)}
-                        disabled={showingWhyThisAnswer}
-                        aria-label={t('whyThisAnswer') || 'Why this answer?'}
-                        icon={<HelpCircle aria-hidden />}
-                      />
-                    </span>
-                  </Tooltip>
-                )}
+                  {showTranslationOriginal &&
+                    message.translatedText &&
+                    message.translatedText !== message.text && (
+                      <Tooltip
+                        {...bubbleAddonTooltipProps}
+                        placement="bottom"
+                        content={`${
+                          lang === 'it' ? 'Testo originale' : 'Original text'
+                        }: ${stripAllInternalTags(message.text)}`}
+                        className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+                      >
+                        <span className="memori-chat--bubble-addon-tooltip-trigger">
+                          <Button
+                            variant="ghost"
+                            shape="circle"
+                            type="button"
+                            size="sm"
+                            className="memori-chat--bubble-action-button"
+                            aria-label={
+                              lang === 'it'
+                                ? 'Testo originale'
+                                : 'Original text'
+                            }
+                            icon={<Languages aria-hidden />}
+                          />
+                        </span>
+                      </Tooltip>
+                    )}
+
+                  {!message.fromUser &&
+                    message.questionAnswered &&
+                    apiUrl &&
+                    showWhyThisAnswer && (
+                      <Tooltip
+                        {...bubbleAddonTooltipProps}
+                        placement="bottom"
+                        content={t('whyThisAnswer') || 'Why this answer?'}
+                      >
+                        <span className="memori-chat--bubble-addon-tooltip-trigger">
+                          <Button
+                            variant="ghost"
+                            shape="circle"
+                            size="sm"
+                            className="memori-chat--bubble-action-button"
+                            onClick={() => setShowingWhyThisAnswer(true)}
+                            disabled={showingWhyThisAnswer}
+                            aria-label={
+                              t('whyThisAnswer') || 'Why this answer?'
+                            }
+                            icon={<HelpCircle aria-hidden />}
+                          />
+                        </span>
+                      </Tooltip>
+                    )}
+                </div>
+              )}
             </div>
-          )}
-          </div>
 
-          {!message.fromUser && (
-            <div
-              className={cx('memori-chat--artifact-block', {
-                'memori-chat--artifact-block--chatlog': isChatlogPanel,
-              })}
-            >
-              <ArtifactHandler
-                isChatlogPanel={isChatlogPanel}
-                message={message}
-              />
-            </div>
-          )}
-
-          <MediaWidget
-            simulateUserPrompt={simulateUserPrompt}
-            media={codeMediaWidgetMedia}
-            sessionID={sessionID}
-            baseUrl={baseUrl}
-            apiUrl={apiUrl}
-            translateTo={translateTo}
-            customMediaRenderer={customMediaRenderer}
-            fromUser={message.fromUser}
-          />
+            {!message.fromUser && (
+              <div
+                className={cx('memori-chat--artifact-block', {
+                  'memori-chat--artifact-block--chatlog': isChatlogPanel,
+                })}
+              >
+                <ArtifactHandler
+                  isChatlogPanel={isChatlogPanel}
+                  message={message}
+                />
+              </div>
+            )}
+
+            <MediaWidget
+              simulateUserPrompt={simulateUserPrompt}
+              media={codeMediaWidgetMedia}
+              sessionID={sessionID}
+              baseUrl={baseUrl}
+              apiUrl={apiUrl}
+              translateTo={translateTo}
+              customMediaRenderer={customMediaRenderer}
+              fromUser={message.fromUser}
+            />
           </div>
 
           {message.fromUser && renderUserAvatar()}
@@ -885,6 +893,7 @@ const ChatBubble: React.FC<Props> = ({
         container={surfaceEl ?? undefined}
         open={openFunctionCache}
         className="memori-chat--function-cache-modal"
+        stacking="stacked"
         title={t('functionCache') || 'Function Cache'}
         closable={true}
         onOpenChange={setOpenFunctionCache}