@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/Chat/Chat.tsx

@@ -27,12 +27,15 @@ import memoriApiClient from '@memori.ai/memori-api-client';
 import ChatInputs from '../ChatInputs/ChatInputs';
 import Typing from '../Typing/Typing';
 import { boardOfExpertsLoadingSentences } from '../../helpers/constants';
-import ArtifactHandler from '../MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler';
-import { DocumentIcon } from '../icons/Document';
+import { FileText as DocumentIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { maxDocumentsPerMessage, maxDocumentContentLength, pasteAsCardLineThreshold, pasteAsCardCharThreshold } from '../../helpers/constants';
-import Modal from '../ui/Modal';
-import Tooltip from '../ui/Tooltip';
+import { Tooltip, Modal } from '@memori.ai/ui';
+import {
+  maxDocumentsPerMessage,
+  maxDocumentContentLength,
+  pasteAsCardLineThreshold,
+  pasteAsCardCharThreshold,
+} from '../../helpers/constants';
 import {
   BADGE_EMOJI,
   buildLlmUsageHtml,
@@ -45,6 +48,20 @@ import {
   LlmUsageOnLine,
   UsageBadgeType,
 } from '../../helpers/llmUsage';
+
+const CODE_MIME_TYPES = [
+  'text/javascript',
+  'text/ecmascript',
+  'application/json',
+  'text/css',
+  'application/xml',
+  'application/x-sh',
+  'text/x-python',
+  'text/x-c++src',
+  'application/x-php',
+  'text/x-ruby',
+  'text/x-sql',
+];
 export interface Props {
   memori: Memori;
   tenant?: Tenant;
@@ -102,7 +119,6 @@ export interface Props {
   /** Max characters in chat textarea; shows counter and enforces paste + existing text does not exceed this limit. */
   maxTextareaCharacters?: number;
   /** Max attachments (docs + images) per message. */
-
 }
 
 type MessageWithLlmUsage = Message & { llmUsage?: LlmUsageOnLine };
@@ -164,7 +180,6 @@ const Chat: React.FC<Props> = ({
   maxTotalMessagePayload,
   maxTextareaCharacters,
 }) => {
-
   const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const [activeUsageBadge, setActiveUsageBadge] =
@@ -191,7 +206,7 @@ const Chat: React.FC<Props> = ({
         defaultValue: 'Click one of these buttons to show more information',
       }),
     }),
-    [t],
+    [t]
   );
 
   const usageHtmlByIndex = useMemo(
@@ -205,11 +220,11 @@ const Chat: React.FC<Props> = ({
               messageWithUsage.llmUsage,
               llmUsageLabels,
               index,
-              locale,
+              locale
             )
           : '';
       }),
-    [history, llmUsageLabels, locale, showMessageConsumption],
+    [history, llmUsageLabels, locale, showMessageConsumption]
   );
   const scrollToBottom = useCallback(() => {
     if (isHistoryView) return;
@@ -348,12 +363,14 @@ const Chat: React.FC<Props> = ({
     const handleUsageBadgeClick = (event: MouseEvent) => {
       const target = event.target as HTMLElement | null;
       const button = target?.closest<HTMLElement>(
-        '[data-llm-badge-type][data-line-index]',
+        '[data-llm-badge-type][data-line-index]'
       );
       if (!button) return;
 
       const lineIndex = Number(button.dataset.lineIndex);
-      const badgeType = button.dataset.llmBadgeType as UsageBadgeType | undefined;
+      const badgeType = button.dataset.llmBadgeType as
+        | UsageBadgeType
+        | undefined;
       if (!Number.isInteger(lineIndex) || !badgeType) return;
 
       const line = (history?.[lineIndex] as MessageWithLlmUsage) ?? null;
@@ -430,162 +447,98 @@ const Chat: React.FC<Props> = ({
                   : 'no-attachments'
               }-${message.timestamp}`}
             >
-              <MediaWidget
-                simulateUserPrompt={simulateUserPrompt}
-                links={
-                  (message?.media
-                    ?.filter(m => !m.properties?.functionSignature)
-                    ?.filter(m => m.mimeType === 'text/html' && !!m.url) ||
-                    []) as Medium[]
-                }
-                media={[
-                  // Non-function-cache media items (exclude HTML links; those go into `links`)
-                  ...(message?.media
-                    ?.filter(m => !m.properties?.functionSignature)
-                    ?.filter(m => !(m.mimeType === 'text/html' && !!m.url)) ||
-                    []),
-
-                  // Extract document attachments that are embedded in the message text
-                  ...(() => {
-                    // Get the translated or original message text
-                    const text = message.translatedText || message.text;
-
-                    // Regex to match document attachments in format:
-                    // <document_attachment filename="name.ext" type="mime/type">content</document_attachment>
-                    const documentAttachmentRegex =
-                      /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
-
-                    const attachments: (Medium & { type?: string })[] = [];
-                    let match;
-                    let attachmentIndex = 0;
-
-                    // Find all document attachments in the text
-                    while (
-                      (match = documentAttachmentRegex.exec(text)) !== null
-                    ) {
-                      const [, filename, type, content] = match;
-
-                      // Create a Medium object for each attachment with:
-                      // - Unique ID using timestamp and random string
-                      // - Empty URL since content is embedded
-                      // - Original mime type and filename
-                      // - Trimmed content from the attachment
-                      // - Properties to mark it as a document attachment
-                      attachments.push({
-                        mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
-                          .toString(36)
-                          .substr(2, 9)}`,
-                        url: '',
-                        mimeType: type,
-                        title: filename,
-                        content: content.trim(),
-                        properties: { isDocumentAttachment: true },
-                        type: 'document',
-                      });
-
-                      attachmentIndex++;
-                    }
-
-                    return attachments;
-                  })(),
-                ]}
-                sessionID={sessionID}
-                baseUrl={baseUrl}
-                apiUrl={apiUrl}
-                translateTo={translateTo}
-                customMediaRenderer={customMediaRenderer}
-                fromUser={message.fromUser}
-              />
-
-              <ChatBubble
-                key={`chatbubble-${index}-${
-                  message.text?.includes('<document_attachment')
-                    ? 'has-attachments'
-                    : 'no-attachments'
-                }-${message.timestamp}`}
-                isFirst={index === 0}
-                message={message}
-                memori={memori}
-                tenant={tenant}
-                client={client}
-                baseUrl={baseUrl}
-                apiUrl={apiUrl}
-                sessionID={sessionID}
-                simulateUserPrompt={simulateUserPrompt}
-                showAIicon={showAIicon}
-                showWhyThisAnswer={showWhyThisAnswer}
-                showTranslationOriginal={showTranslationOriginal}
-                showFeedback={
-                  index === history.length - 1 &&
-                  !message.fromUser &&
-                  dialogState?.acceptsFeedback
-                }
-                user={user}
-                userAvatar={userAvatar}
-                experts={experts}
-                showCopyButton={showCopyButton}
-                useMathFormatting={useMathFormatting}
-                showFunctionCache={showFunctionCache}
-                showReasoning={showReasoning}
-                usageHtml={usageHtmlByIndex[index]}
-              />
-
-              {showDates && !!message.timestamp && (
-                <small
-                  className={`memori-chat--timestamp ${
-                    message.fromUser ? 'text-right' : 'text-left'
-                  }`}
-                >
-                  {new Intl.DateTimeFormat('it', {
-                    hour: '2-digit',
-                    minute: '2-digit',
-                    second: '2-digit',
-                  }).format(
-                    new Date(
-                      message.timestamp.endsWith('Z')
-                        ? message.timestamp
-                        : `${message.timestamp}Z`
-                    )
-                  )}
-                </small>
-              )}
+              <div
+                style={{
+                  marginBottom: index === history.length - 1 ? '24px' : 0,
+                }}
+              >
+                <ChatBubble
+                  key={`chatbubble-${index}-${
+                    message.text?.includes('<document_attachment')
+                      ? 'has-attachments'
+                      : 'no-attachments'
+                  }-${message.timestamp}`}
+                  isFirst={index === 0}
+                  message={message}
+                  memori={memori}
+                  tenant={tenant}
+                  client={client}
+                  customMediaRenderer={customMediaRenderer}
+                  translateTo={translateTo}
+                  baseUrl={baseUrl}
+                  apiUrl={apiUrl}
+                  sessionID={sessionID}
+                  simulateUserPrompt={simulateUserPrompt}
+                  showAIicon={showAIicon}
+                  showWhyThisAnswer={showWhyThisAnswer}
+                  codeMimeTypes={CODE_MIME_TYPES}
+                  showTranslationOriginal={showTranslationOriginal}
+                  showFeedback={
+                    index === history.length - 1 &&
+                    !message.fromUser &&
+                    dialogState?.acceptsFeedback
+                  }
+                  user={user}
+                  userAvatar={userAvatar}
+                  experts={experts}
+                  showCopyButton={showCopyButton}
+                  useMathFormatting={useMathFormatting}
+                  showFunctionCache={showFunctionCache}
+                  showReasoning={showReasoning}
+                  usageHtml={usageHtmlByIndex[index]}
+                  isChatlogPanel={isChatlogPanel}
+                />
 
-              {showContextPerLine &&
-                !!Object.keys(message.contextVars ?? {}).length && (
-                  <div className="memori-chat--context-vars">
-                    {Object.keys(message.contextVars ?? {}).map(key =>
-                      message.contextVars?.[key] === '-' ? (
-                        <div
-                          className={`memori-chat--context-tag memori-chat--context-tag-canceled`}
-                          key={key}
-                        >
-                          <span className="memori-chat--context-tag-text">
-                            {key}
-                          </span>
-                        </div>
-                      ) : message.contextVars?.[key] === '✔️' ? (
-                        <div className="memori-chat--context-tag" key={key}>
-                          <span className="memori-chat--context-tag-text">
-                            {key}
-                          </span>
-                        </div>
-                      ) : (
-                        <div className="memori-chat--context-tag" key={key}>
-                          <span className="memori-chat--context-tag-text">
-                            {key}: {message.contextVars?.[key]}
-                          </span>
-                        </div>
+                {showDates && !!message.timestamp && !message.fromUser && (
+                  <small
+                    className={`memori-chat--timestamp ${
+                      message.fromUser ? 'text-right' : 'text-left'
+                    }`}
+                  >
+                    {new Intl.DateTimeFormat('it', {
+                      hour: '2-digit',
+                      minute: '2-digit',
+                      second: '2-digit',
+                    }).format(
+                      new Date(
+                        message.timestamp.endsWith('Z')
+                          ? message.timestamp
+                          : `${message.timestamp}Z`
                       )
                     )}
-                  </div>
+                  </small>
                 )}
 
-              {!isHistoryView && !message.fromUser && (
-                <ArtifactHandler
-                  isChatlogPanel={isChatlogPanel}
-                  message={message}
-                />
-              )}
+                {showContextPerLine &&
+                  !!Object.keys(message.contextVars ?? {}).length && (
+                    <div className="memori-chat--context-vars">
+                      {Object.keys(message.contextVars ?? {}).map(key =>
+                        message.contextVars?.[key] === '-' ? (
+                          <div
+                            className={`memori-chat--context-tag memori-chat--context-tag-canceled`}
+                            key={key}
+                          >
+                            <span className="memori-chat--context-tag-text">
+                              {key}
+                            </span>
+                          </div>
+                        ) : message.contextVars?.[key] === '✔️' ? (
+                          <div className="memori-chat--context-tag" key={key}>
+                            <span className="memori-chat--context-tag-text">
+                              {key}
+                            </span>
+                          </div>
+                        ) : (
+                          <div className="memori-chat--context-tag" key={key}>
+                            <span className="memori-chat--context-tag-text">
+                              {key}: {message.contextVars?.[key]}
+                            </span>
+                          </div>
+                        )
+                      )}
+                    </div>
+                  )}
+              </div>
             </React.Fragment>
           ))}
 
@@ -618,6 +571,11 @@ const Chat: React.FC<Props> = ({
                   : 'en'
               }
               sentence={typingText}
+              memori={memori}
+              tenant={tenant}
+              baseUrl={baseUrl}
+              apiUrl={apiUrl}
+              experts={experts}
               sentences={
                 memori.enableBoardOfExperts
                   ? boardOfExpertsLoadingSentences
@@ -695,7 +653,7 @@ const Chat: React.FC<Props> = ({
               <dd>
                 {formatIntegerValue(
                   activeUsageBadge.usage.totalInputTokens ?? 0,
-                  locale,
+                  locale
                 )}
               </dd>
             </div>
@@ -704,7 +662,10 @@ const Chat: React.FC<Props> = ({
                 {llmUsageLabels.tokens} {llmUsageLabels.output}
               </dt>
               <dd>
-                {formatIntegerValue(activeUsageBadge.usage.outputTokens ?? 0, locale)}
+                {formatIntegerValue(
+                  activeUsageBadge.usage.outputTokens ?? 0,
+                  locale
+                )}
               </dd>
             </div>
           </dl>
@@ -714,11 +675,12 @@ const Chat: React.FC<Props> = ({
           <div className="memori-chat--usage-educational-content">
             <strong className="memori-chat--usage-metric-value">
               {formatImpactWithApiUnit(
-                getMetricValue(activeUsageBadge.usage.energyImpact?.energy) ?? 0,
+                getMetricValue(activeUsageBadge.usage.energyImpact?.energy) ??
+                  0,
                 activeUsageBadge.usage.energyImpact?.energyUnit,
                 'kWh',
                 'energy',
-                locale,
+                locale
               )}
             </strong>
             <Tooltip
@@ -728,10 +690,11 @@ const Chat: React.FC<Props> = ({
             >
               <p className="memori-chat--usage-comparable">
                 {getImpactComparison(
-                  getMetricValue(activeUsageBadge.usage.energyImpact?.energy) ?? 0,
+                  getMetricValue(activeUsageBadge.usage.energyImpact?.energy) ??
+                    0,
                   'energy',
                   locale,
-                  t,
+                  t
                 )}
               </p>
             </Tooltip>
@@ -746,7 +709,7 @@ const Chat: React.FC<Props> = ({
                 activeUsageBadge.usage.energyImpact?.gwpUnit,
                 'kgCO2eq',
                 'co2',
-                locale,
+                locale
               )}
             </strong>
             <Tooltip
@@ -759,7 +722,7 @@ const Chat: React.FC<Props> = ({
                   getMetricValue(activeUsageBadge.usage.energyImpact?.gwp) ?? 0,
                   'co2',
                   locale,
-                  t,
+                  t
                 )}
               </p>
             </Tooltip>
@@ -774,7 +737,7 @@ const Chat: React.FC<Props> = ({
                 activeUsageBadge.usage.energyImpact?.wcfUnit,
                 'L',
                 'water',
-                locale,
+                locale
               )}
             </strong>
             <Tooltip
@@ -787,7 +750,7 @@ const Chat: React.FC<Props> = ({
                   getMetricValue(activeUsageBadge.usage.energyImpact?.wcf) ?? 0,
                   'water',
                   locale,
-                  t,
+                  t
                 )}
               </p>
             </Tooltip>