Metadata containing preview and current url (#84)

* Adding metadata to request * Making the preview links in the frontend * Update src/Components/Message/AssistantMessageEntry.tsx Co-authored-by: Josejulio Martínez <[email protected]> --------- Co-authored-by: Josejulio Martínez <[email protected]>
RedHatInsights · Dec 8, 2023 · b174df3 · b174df3
1 parent 7f94d46
commit b174df3
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 10 deletions.
diff --git a/src/Components/AstroChat/AstroChat.tsx b/src/Components/AstroChat/AstroChat.tsx
@@ -12,10 +12,11 @@ import { AskOptions } from './useAstro';
 interface AstroChatProps {
   messages: Array<Message>;
   ask: (what: string, options?: Partial<AskOptions>) => Promise<void>;
+  preview: boolean;
   onClose: () => void;
 }
 
-export const AstroChat: React.FunctionComponent<AstroChatProps> = ({ messages, ask, onClose }) => {
+export const AstroChat: React.FunctionComponent<AstroChatProps> = ({ messages, ask, preview, onClose }) => {
   const astroContainer = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState<string>('');
 
@@ -87,7 +88,7 @@ export const AstroChat: React.FunctionComponent<AstroChatProps> = ({ messages, a
 
             switch (message.from) {
               case From.ASSISTANT:
-                return <AssistantMessageEntry message={message} ask={askFromOption} key={index} />;
+                return <AssistantMessageEntry message={message} ask={askFromOption} preview={preview} key={index} />;
               case From.USER:
                 return <UserMessageEntry message={message} key={index} />;
               case From.FEEDBACK:

diff --git a/src/Components/AstroChat/useAstro.ts b/src/Components/AstroChat/useAstro.ts
@@ -1,11 +1,12 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react';
 import { produce } from 'immer';
 import { AssistantMessage, FeedbackMessage, From, Message } from '../../types/Message';
 import { PostTalkResponse, postTalk } from '../../api/PostTalk';
-import { Dispatch, SetStateAction, useCallback, useState } from 'react';
 import { asyncSleep } from '../../utils/Async';
 import Config from '../../Config';
 import { MessageProcessor } from '../Message/MessageProcessor';
 import { Command } from '../../types/Command';
+import { buildMetadata } from '../../utils/Metadata';
 
 type SetMessages = Dispatch<SetStateAction<Array<Message>>>;
 
@@ -125,7 +126,7 @@ export const useAstro = (messageProcessors: Array<MessageProcessor>) => {
           );
         }
 
-        const postTalkResponse = postTalk(message);
+        const postTalkResponse = postTalk(message, buildMetadata());
 
         const waitResponses = async () => {
           if (options?.hideResponse) {

diff --git a/src/Components/Message/AssistantMessageEntry.tsx b/src/Components/Message/AssistantMessageEntry.tsx
@@ -8,11 +8,12 @@ import ReactMarkdown from 'react-markdown';
 
 interface AssistantMessageProps extends MessageProps<AssistantMessage> {
   ask: (option: MessageOption) => unknown;
+  preview: boolean;
 }
 
 const OPTION_COLORS = ['red'] as const;
 
-export const AssistantMessageEntry: FunctionComponent<AssistantMessageProps> = ({ message, ask }) => {
+export const AssistantMessageEntry: FunctionComponent<AssistantMessageProps> = ({ message, ask, preview }) => {
   return (
     <div className="pf-v5-u-mb-md">
       {message.content && (
@@ -26,9 +27,16 @@ export const AssistantMessageEntry: FunctionComponent<AssistantMessageProps> = (
             <TextContent className="pf-v5-u-font-size-sm">
               <ReactMarkdown
                 components={{
-                  a(props) {
+                  a: ({ ...props }) => {
+                    let href = props.href;
+                    if (href && href.startsWith('/')) {
+                      if (preview) {
+                        href = `/preview${href}`;
+                      }
+                      href = `${window.location.origin}${href}`;
+                    }
                     return (
-                      <a {...props} target="_blank" rel="noopener noreferrer">
+                      <a {...props} href={href} target="_blank" rel="noopener noreferrer">
                         {props.children}
                       </a>
                     );

diff --git a/src/SharedComponents/AstroVirtualAssistant/AstroVirtualAssistant.tsx b/src/SharedComponents/AstroVirtualAssistant/AstroVirtualAssistant.tsx
@@ -1,17 +1,21 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
+
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+import { Stack, StackItem } from '@patternfly/react-core';
+
 import { Status, useAstro } from '../../Components/AstroChat/useAstro';
 import './astro-virtual-assistant.scss';
 import { AstroChat } from '../../Components/AstroChat/AstroChat';
 import { AstroBadge } from '../../Components/AstroAvatar/AstroBadge';
 import { AstroChatSkeleton } from '../../Components/AstroChat/AstroChatSkeleton';
-import { Stack, StackItem } from '@patternfly/react-core';
 import { commandMessageProcessor } from './CommandMessageProcessor';
 
 const messageProcessors = [commandMessageProcessor];
 
 export const AstroVirtualAssistant: FunctionComponent = () => {
   const { messages, ask, start, stop, status } = useAstro(messageProcessors);
   const [isOpen, setOpen] = useState<boolean>(false);
+  const chrome = useChrome();
 
   useEffect(() => {
     if (isOpen) {
@@ -24,7 +28,9 @@ export const AstroVirtualAssistant: FunctionComponent = () => {
   return (
     <Stack className="astro-wrapper-stack">
       <StackItem className="pf-v5-u-box-shadow-lg">
-        {status === Status.STARTED && <AstroChat key="astro-chat" messages={messages} ask={ask} onClose={() => setOpen(false)} />}
+        {status === Status.STARTED && (
+          <AstroChat key="astro-chat" messages={messages} ask={ask} preview={chrome.isBeta()} onClose={() => setOpen(false)} />
+        )}
         {status === Status.LOADING && <AstroChatSkeleton />}
       </StackItem>
       <StackItem className="astro-wrapper-stack__badge">

diff --git a/src/api/PostTalk.ts b/src/api/PostTalk.ts
@@ -1,5 +1,7 @@
 import axiosInstance from '@redhat-cloud-services/frontend-components-utilities/interceptors/interceptors';
 
+import { Metadata } from '../types/Metadata';
+
 export interface PostTalkResponse {
   recipient_id: number;
   text: string;
@@ -16,8 +18,9 @@ export interface CustomResponse {
   params?: object;
 }
 
-export const postTalk = async (message: string) => {
+export const postTalk = async (message: string, metadata: Metadata) => {
   return axiosInstance.post<unknown, Array<PostTalkResponse>>('/api/virtual-assistant/v1/talk', {
     message,
+    metadata,
   });
 };
diff --git a/src/types/Metadata.ts b/src/types/Metadata.ts
@@ -0,0 +1,3 @@
+export type Metadata = {
+  current_url: string;
+};
diff --git a/src/utils/Metadata.ts b/src/utils/Metadata.ts
@@ -0,0 +1,7 @@
+import { Metadata } from '../types/Metadata';
+
+export const buildMetadata = (): Metadata => {
+  return {
+    current_url: window.location.href,
+  };
+};