From b174df3a930d9b35fa41b172f89b0c9a98efad23 Mon Sep 17 00:00:00 2001 From: Justin Orringer Date: Fri, 8 Dec 2023 14:57:51 -0500 Subject: [PATCH] Metadata containing preview and current url (#84) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Adding metadata to request * Making the preview links in the frontend * Update src/Components/Message/AssistantMessageEntry.tsx Co-authored-by: Josejulio Martínez --------- Co-authored-by: Josejulio Martínez --- src/Components/AstroChat/AstroChat.tsx | 5 +++-- src/Components/AstroChat/useAstro.ts | 5 +++-- src/Components/Message/AssistantMessageEntry.tsx | 14 +++++++++++--- .../AstroVirtualAssistant.tsx | 10 ++++++++-- src/api/PostTalk.ts | 5 ++++- src/types/Metadata.ts | 3 +++ src/utils/Metadata.ts | 7 +++++++ 7 files changed, 39 insertions(+), 10 deletions(-) create mode 100644 src/types/Metadata.ts create mode 100644 src/utils/Metadata.ts diff --git a/src/Components/AstroChat/AstroChat.tsx b/src/Components/AstroChat/AstroChat.tsx index 16ace56..7bd8d74 100644 --- a/src/Components/AstroChat/AstroChat.tsx +++ b/src/Components/AstroChat/AstroChat.tsx @@ -12,10 +12,11 @@ import { AskOptions } from './useAstro'; interface AstroChatProps { messages: Array; ask: (what: string, options?: Partial) => Promise; + preview: boolean; onClose: () => void; } -export const AstroChat: React.FunctionComponent = ({ messages, ask, onClose }) => { +export const AstroChat: React.FunctionComponent = ({ messages, ask, preview, onClose }) => { const astroContainer = useRef(null); const [input, setInput] = useState(''); @@ -87,7 +88,7 @@ export const AstroChat: React.FunctionComponent = ({ messages, a switch (message.from) { case From.ASSISTANT: - return ; + return ; case From.USER: return ; case From.FEEDBACK: diff --git a/src/Components/AstroChat/useAstro.ts b/src/Components/AstroChat/useAstro.ts index efa369c..f351933 100644 --- 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>>; @@ -125,7 +126,7 @@ export const useAstro = (messageProcessors: Array) => { ); } - 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 index eaff9d8..78ba386 100644 --- 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 { ask: (option: MessageOption) => unknown; + preview: boolean; } const OPTION_COLORS = ['red'] as const; -export const AssistantMessageEntry: FunctionComponent = ({ message, ask }) => { +export const AssistantMessageEntry: FunctionComponent = ({ message, ask, preview }) => { return (
{message.content && ( @@ -26,9 +27,16 @@ export const AssistantMessageEntry: FunctionComponent = ( { + let href = props.href; + if (href && href.startsWith('/')) { + if (preview) { + href = `/preview${href}`; + } + href = `${window.location.origin}${href}`; + } return ( - + {props.children} ); diff --git a/src/SharedComponents/AstroVirtualAssistant/AstroVirtualAssistant.tsx b/src/SharedComponents/AstroVirtualAssistant/AstroVirtualAssistant.tsx index f1da1bb..f66dc30 100644 --- a/src/SharedComponents/AstroVirtualAssistant/AstroVirtualAssistant.tsx +++ b/src/SharedComponents/AstroVirtualAssistant/AstroVirtualAssistant.tsx @@ -1,10 +1,13 @@ 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]; @@ -12,6 +15,7 @@ const messageProcessors = [commandMessageProcessor]; export const AstroVirtualAssistant: FunctionComponent = () => { const { messages, ask, start, stop, status } = useAstro(messageProcessors); const [isOpen, setOpen] = useState(false); + const chrome = useChrome(); useEffect(() => { if (isOpen) { @@ -24,7 +28,9 @@ export const AstroVirtualAssistant: FunctionComponent = () => { return ( - {status === Status.STARTED && setOpen(false)} />} + {status === Status.STARTED && ( + setOpen(false)} /> + )} {status === Status.LOADING && } diff --git a/src/api/PostTalk.ts b/src/api/PostTalk.ts index 978f679..cf46111 100644 --- 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>('/api/virtual-assistant/v1/talk', { message, + metadata, }); }; diff --git a/src/types/Metadata.ts b/src/types/Metadata.ts new file mode 100644 index 0000000..1f9cdda --- /dev/null +++ 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 new file mode 100644 index 0000000..2f3684f --- /dev/null +++ b/src/utils/Metadata.ts @@ -0,0 +1,7 @@ +import { Metadata } from '../types/Metadata'; + +export const buildMetadata = (): Metadata => { + return { + current_url: window.location.href, + }; +};