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

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 { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 const ASSET_URL_PATTERN = /https?:\/\/\S*\/api\/v\d+\/asset\/\S+/gi;
 
 const sanitizeRawCopyText = (text: string) =>
@@ -128,7 +127,6 @@ const ChatBubble: React.FC<Props> = ({
   customMediaRenderer,
 }) => {
   const { t, i18n } = useTranslation();
-  const surfaceEl = useWidgetSurfaceEl();
   const lang = i18n.language || 'en';
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
   const [openFunctionCache, setOpenFunctionCache] = useState(false);
@@ -440,7 +438,6 @@ const ChatBubble: React.FC<Props> = ({
   const shouldShowTimestampInAddon =
     showDates && !!formattedTimestamp && !message.fromUser && !isChatlogPanel;
   const bubbleAddonTooltipProps = {
-    container: surfaceEl ?? undefined,
     slotProps: {
       positioner: {
         className: 'memori-chat--bubble-addon-tooltip-positioner',
@@ -538,268 +535,406 @@ const ChatBubble: React.FC<Props> = ({
         })}
         onClick={handleBubbleContainerClick}
       >
-        <MediaWidget
-          simulateUserPrompt={simulateUserPrompt}
-          links={topMediaWidgetLinks}
-          media={topMediaWidgetMedia}
-          sessionID={sessionID}
-          baseUrl={baseUrl}
-          apiUrl={apiUrl}
-          translateTo={translateTo}
-          customMediaRenderer={customMediaRenderer}
-          fromUser={message.fromUser}
-        />
+        {!message.fromUser && (
+          <MediaWidget
+            simulateUserPrompt={simulateUserPrompt}
+            links={topMediaWidgetLinks}
+            media={topMediaWidgetMedia}
+            sessionID={sessionID}
+            baseUrl={baseUrl}
+            apiUrl={apiUrl}
+            translateTo={translateTo}
+            customMediaRenderer={customMediaRenderer}
+            fromUser={message.fromUser}
+          />
+        )}
 
         <div className="memori-chat--bubble-message-row">
           {!message.fromUser && renderAssistantAvatar()}
 
-          <div
-            className={cx('memori-chat--bubble-shell', {
-              '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,
-              })}
-            >
+          {message.fromUser ? (
+            <div className="memori-chat--user-block">
+              {(topMediaWidgetMedia.length > 0 ||
+                topMediaWidgetLinks.length > 0) && (
+                <div className="memori-chat--attachment-strip">
+                  <MediaWidget
+                    simulateUserPrompt={simulateUserPrompt}
+                    links={topMediaWidgetLinks}
+                    media={topMediaWidgetMedia}
+                    sessionID={sessionID}
+                    baseUrl={baseUrl}
+                    apiUrl={apiUrl}
+                    translateTo={translateTo}
+                    customMediaRenderer={customMediaRenderer}
+                    fromUser={message.fromUser}
+                  />
+                </div>
+              )}
+
               <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,
+                className={cx('memori-chat--bubble-shell', {
+                  'memori-chat--bubble-shell--from-user': true,
                 })}
               >
-                {message.fromUser ? (
-                  <Expandable
-                    className="memori-chat--bubble-content"
-                    mode="characters"
+                <div
+                  className={cx('memori-chat--bubble-anchor', {
+                    'memori-chat--bubble-anchor--from-user': true,
+                    'memori-chat--bubble-anchor--has-addon':
+                      shouldShowBubbleAddon,
+                  })}
+                >
+                  <div
+                    className={cx('memori-chat--bubble', {
+                      'memori-chat--user-bubble': true,
+                      'memori-chat--with-addon':
+                        shouldShowCopyButtons ||
+                        (showFeedback && simulateUserPrompt),
+                      'memori-chat--ai-generated': message.generatedByAI,
+                      'memori-chat--with-feedback': showFeedback,
+                    })}
                   >
-                    <div
-                      dir="auto"
+                    <Expandable
                       className="memori-chat--bubble-content"
-                      dangerouslySetInnerHTML={{
-                        __html: sanitizeMsg(cleanText).replaceAll(
-                          '\n',
-                          '<br/>'
-                        ),
-                      }}
-                    />
-                  </Expandable>
-                ) : (
-                  <div
-                    dir="auto"
-                    className="memori-chat--bubble-content"
-                    dangerouslySetInnerHTML={{ __html: renderedText }}
-                  />
-                )}
+                      mode="characters"
+                    >
+                      <div
+                        dir="auto"
+                        className="memori-chat--bubble-content"
+                        dangerouslySetInnerHTML={{
+                          __html: sanitizeMsg(cleanText).replaceAll(
+                            '\n',
+                            '<br/>'
+                          ),
+                        }}
+                      />
+                    </Expandable>
 
-                {!!usageHtml && (
-                  <div
-                    className="memori-chat--usage-inside-bubble"
-                    dangerouslySetInnerHTML={{ __html: usageHtml }}
-                  />
-                )}
-              </div>
+                    {!!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>
+                  {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"
-                          size="sm"
-                          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"
-                          size="sm"
-                          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')
+                              ? t('copyFailed')
+                              : 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 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>
+                      )}
+
+                      {showFeedback && !!simulateUserPrompt && (
+                        <FeedbackButtons
+                          memori={memori}
+                          className="memori-chat--bubble-feedback"
+                          dropdown
+                          onNegativeClick={msg => {
+                            if (msg) simulateUserPrompt(msg);
+                          }}
                         />
-                      </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>
+                      )}
+
+                      {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>
+                        )}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {codeMediaWidgetMedia.length > 0 && (
+                <MediaWidget
+                  simulateUserPrompt={simulateUserPrompt}
+                  media={codeMediaWidgetMedia}
+                  sessionID={sessionID}
+                  baseUrl={baseUrl}
+                  apiUrl={apiUrl}
+                  translateTo={translateTo}
+                  customMediaRenderer={customMediaRenderer}
+                  fromUser={message.fromUser}
+                />
+              )}
+            </div>
+          ) : (
+            <div
+              className={cx('memori-chat--bubble-shell', {
+                '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,
+                  })}
+                >
+                  <div
+                    dir="auto"
+                    className="memori-chat--bubble-content"
+                    dangerouslySetInnerHTML={{ __html: renderedText }}
+                  />
+
+                  {!!usageHtml && (
+                    <div
+                      className="memori-chat--usage-inside-bubble"
+                      dangerouslySetInnerHTML={{ __html: usageHtml }}
+                    />
                   )}
+                </div>
 
-                  {!message.fromUser &&
-                    showFunctionCache &&
-                    message.media?.some(
-                      m =>
-                        Boolean(m.properties?.functionCache) ||
-                        m.properties?.functionCache === 'true'
-                    ) && (
+                {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>
+                    )}
+                    {shouldShowCopyButtons && (
                       <Tooltip
                         {...bubbleAddonTooltipProps}
                         placement="bottom"
-                        content={t('functionCache') || 'Function cache'}
-                        className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug"
+                        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"
                             size="sm"
-                            className="memori-chat--bubble-action-button"
+                            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={
-                              <Bug
-                                aria-label={
-                                  t('functionCache') || 'Function cache'
-                                }
-                              />
+                              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={() => setOpenFunctionCache(true)}
+                            onClick={() => handleCopyClick('plain', copyText)}
                           />
                         </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"
-                    >
-                      <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>
-                  )}
-
-                  {showTranslationOriginal &&
-                    message.translatedText &&
-                    message.translatedText !== message.text && (
+                    {shouldShowCopyRawButton && (
                       <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"
+                        content={
+                          copyStatus.raw === 'success'
+                            ? copiedLabel
+                            : copyStatus.raw === 'error'
+                            ? t('copyFailed')
+                            : t('copyRawCode') || 'Copy raw code'
+                        }
                       >
                         <span className="memori-chat--bubble-addon-tooltip-trigger">
                           <Button
@@ -807,71 +942,188 @@ const ChatBubble: React.FC<Props> = ({
                             shape="circle"
                             type="button"
                             size="sm"
-                            className="memori-chat--bubble-action-button"
                             aria-label={
-                              lang === 'it'
-                                ? 'Testo originale'
-                                : 'Original text'
+                              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)
                             }
-                            icon={<Languages aria-hidden />}
                           />
                         </span>
                       </Tooltip>
                     )}
 
-                  {!message.fromUser &&
-                    message.questionAnswered &&
-                    apiUrl &&
-                    showWhyThisAnswer && (
+                    {!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)}
+                            />
+                          </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('whyThisAnswer') || 'Why this answer?'}
+                        content={t('generatedByAI')}
+                        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"
-                            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
+                          className="memori-chat--bubble-addon-tooltip-trigger memori-chat--bubble-ai-icon"
+                          role="img"
+                          aria-label={String(t('generatedByAI'))}
+                        >
+                          <Bot 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>
+
+              {!message.fromUser && (
+                <div
+                  className={cx('memori-chat--artifact-block', {
+                    'memori-chat--artifact-block--chatlog': isChatlogPanel,
+                  })}
+                >
+                  <ArtifactHandler
+                    isChatlogPanel={isChatlogPanel}
+                    message={message}
+                  />
                 </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}
-            />
-          </div>
+              <MediaWidget
+                simulateUserPrompt={simulateUserPrompt}
+                media={codeMediaWidgetMedia}
+                sessionID={sessionID}
+                baseUrl={baseUrl}
+                apiUrl={apiUrl}
+                translateTo={translateTo}
+                customMediaRenderer={customMediaRenderer}
+                fromUser={message.fromUser}
+              />
+            </div>
+          )}
 
           {message.fromUser && renderUserAvatar()}
         </div>
@@ -890,7 +1142,6 @@ const ChatBubble: React.FC<Props> = ({
       )}
 
       <Modal
-        container={surfaceEl ?? undefined}
         open={openFunctionCache}
         className="memori-chat--function-cache-modal"
         stacking="stacked"