Feature/report

report-front-end/src/common/API.ts

@@ -1,4 +1,4 @@
-import { ChatBotHistoryItem } from "@/components/chatbot/types";
+import { ChatBotHistoryItem, ChatBotMessageType } from "../components/chatbot/types";
 import { Dispatch, SetStateAction } from "react";
 import { BACKEND_URL } from "../tools/const";
 import { DEFAULT_QUERY_CONFIG } from "../enum/DefaultQueryEnum";
@@ -11,6 +11,12 @@ export interface QueryProps {
 }
 
 export async function query(props: QueryProps) {
+ props.setMessageHistory((history: ChatBotHistoryItem[]) => {
+ return [...history, {
+ type: ChatBotMessageType.Human,
+ content: props.query
+ }];
+ });
  props.setLoading(true);
  try {
  const param = {
@@ -23,6 +29,7 @@ export async function query(props: QueryProps) {
  profile_name: props.configuration.selectedDataPro || DEFAULT_QUERY_CONFIG.selectedDataPro,
  explain_gen_process_flag: true,
  gen_suggested_question_flag: props.configuration.modelSuggestChecked,
+ answer_with_insights: props.configuration.answerInsightChecked || DEFAULT_QUERY_CONFIG.answerInsightChecked,
  top_k: props.configuration.topK,
  top_p: props.configuration.topP,
  max_tokens: props.configuration.maxLength,
@@ -45,7 +52,10 @@ export async function query(props: QueryProps) {
  console.log(result);
  props.setLoading(false);
  props.setMessageHistory((history: ChatBotHistoryItem[]) => {
- return [...history, result];
+ return [...history, {
+ type: ChatBotMessageType.AI,
+ content: result
+ }];
  });
  } catch (err) {
  props.setLoading(false);
@@ -59,8 +69,33 @@ export async function query(props: QueryProps) {
  };
  props.setLoading(false);
  props.setMessageHistory((history: any) => {
- return [...history, result];
+ return [...history, {
+ type: ChatBotMessageType.AI,
+ content: result
+ }];
  });
  console.error('Query error, ', err);
  }
 }
+
+export async function addUserFeedback(feedbackData: {}) {
+ // call api
+ try {
+ const url = `${BACKEND_URL}qa/user_feedback`;
+ const response = await fetch(url, {
+ headers: {
+ "Content-Type": "application/json"
+ },
+ method: "POST",
+ body: JSON.stringify(feedbackData)
+ }
+ );
+ if (!response.ok) {
+ console.error('AddUserFeedback error, ', response);
+ return;
+ }
+ const result = await response.json();
+ } catch (err) {
+ console.error('Query error, ', err);
+ }
+}

report-front-end/src/components/chatbot/chat-input-panel.tsx

@@ -40,58 +40,58 @@ export default function ChatInputPanel(props: ChatInputPanelProps) {
  };
 
  return (
- <SpaceBetween direction="vertical" size="l">
- <div className={styles.input_area_container}>
- <Container>
- <SpaceBetween size={'s'}>
- <CustomQuestions setTextValue={setTextValue}></CustomQuestions>
- <div className={styles.input_textarea_container}>
- <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
- <Icon name="microphone" variant="disabled"/>
- </SpaceBetween>
- <TextareaAutosize
- className={styles.input_textarea}
- maxRows={6}
- minRows={1}
- spellCheck={true}
- autoFocus
- onChange={(e) =>
- setTextValue((state) => ({...state, value: e.target.value}))
- }
- onKeyDown={(e) => {
- if (e.key === "Enter" && !e.shiftKey) {
- e.preventDefault();
- handleSendMessage();
- }
- }}
- value={state.value}
- placeholder={"Send a message"}
- />
- <SpaceBetween size={'xs'} direction={'horizontal'}>
- <Button
- disabled={state.value.length === 0}
- onClick={handleSendMessage}
- iconAlign="right"
- iconName={"angle-right-double"}
- variant="primary">
- Send
- </Button>
- <Button
- iconName="remove"
- variant="icon"
- onClick={handleClear}
- >
- </Button>
- <Button
- iconName="settings"
- variant="icon"
- onClick={handleSetting}>
- </Button>
- </SpaceBetween>
- </div>
+ <Container>
+ <SpaceBetween size={'s'}>
+ <CustomQuestions
+ setTextValue={setTextValue}
+ setLoading={props.setLoading}
+ setMessageHistory={props.setMessageHistory}
+ ></CustomQuestions>
+ <div className={styles.input_textarea_container}>
+ <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
+ <Icon name="microphone" variant="disabled"/>
  </SpaceBetween>
- </Container>
- </div>
- </SpaceBetween>
+ <TextareaAutosize
+ className={styles.input_textarea}
+ maxRows={6}
+ minRows={1}
+ spellCheck={true}
+ autoFocus
+ onChange={(e) =>
+ setTextValue((state) => ({...state, value: e.target.value}))
+ }
+ /*onKeyDown={(e) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSendMessage();
+ }
+ }}*/
+ value={state.value}
+ placeholder={"Send a message"}
+ />
+ <SpaceBetween size={'xs'} direction={'horizontal'}>
+ <Button
+ disabled={state.value.length === 0}
+ onClick={handleSendMessage}
+ iconAlign="right"
+ iconName="angle-right-double"
+ variant="primary">
+ Send
+ </Button>
+ <Button
+ iconName="remove"
+ variant="icon"
+ onClick={handleClear}
+ >
+ </Button>
+ <Button
+ iconName="settings"
+ variant="icon"
+ onClick={handleSetting}>
+ </Button>
+ </SpaceBetween>
+ </div>
+ </SpaceBetween>
+ </Container>
  );
 }