Add feedback form.

nulib · Jan 28, 2025 · e9a90cd · e9a90cd
1 parent c6fa6c0
commit e9a90cd
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git a/components/Chat/Feedback/Feedback.tsx b/components/Chat/Feedback/Feedback.tsx
@@ -216,14 +216,16 @@ const StyledChatFeedbackActivate = styled("div", {
   margin: "0 0 $gr2 ",
   display: "flex",
   alignItems: "center",
-  fontSize: "$gr3",
-  gap: "$gr2",
-});
+  borderTop: "1px solid $gray6",
+  padding: "$gr3 0",
 
-const StyledChatFeedbackConfirmation = styled("div", {
-  fontSize: "$gr3",
+  "> span": {
+    marginRight: "$gr2",
+  },
 });
 
+const StyledChatFeedbackConfirmation = styled("div", {});
+
 const StyledChatFeedbackForm = styled("form", {
   margin: "$gr3 0",
   transition: "200ms all ease-in-out",
@@ -244,6 +246,9 @@ const StyledChatFeedbackForm = styled("form", {
 });
 
 const StyledChatFeedback = styled("div", {
+  fontSize: "$gr2",
+  color: "$black50",
+
   variants: {
     isSubmitted: {
       true: {
@@ -257,7 +262,7 @@ const StyledChatFeedback = styled("div", {
 });
 
 const StyledSentimentButton = styled("button", {
-  backgroundColor: "$purple10",
+  backgroundColor: "transparent",
   border: "none",
   padding: 0,
   height: "40px",
@@ -270,8 +275,8 @@ const StyledSentimentButton = styled("button", {
   borderRadius: "50%",
 
   "> span": {
-    height: "36px",
-    width: "36px",
+    height: "32px",
+    width: "32px",
   },
 
   "&:not([disabled])": {
@@ -290,7 +295,7 @@ const StyledSentimentButton = styled("button", {
 
   "&[data-is-selected=false]": {
     "> span": {
-      fill: "$purple30",
+      fill: "$black20",
     },
   },
 });

diff --git a/components/Chat/Response/Markdown.tsx b/components/Chat/Response/Markdown.tsx
@@ -9,7 +9,7 @@ import useMarkdown from "@nulib/use-markdown";
 function addTableWrapper(html: string) {
   let parsedHtml = html;
 
-  const tableRegex = /<table>(.*?)<\/table>/gs;
+  const tableRegex = /<table>([\s\S]*?)<\/table>/g;
   const tableMatch = html.match(tableRegex);
 
   if (tableMatch) {

diff --git a/components/Chat/Response/Options.tsx b/components/Chat/Response/Options.tsx
@@ -0,0 +1,11 @@
+import ChatFeedback from "../Feedback/Feedback";
+
+const ResponseOptions = () => {
+  return (
+    <>
+      <ChatFeedback />
+    </>
+  );
+};
+
+export default ResponseOptions;
diff --git a/components/Chat/Response/Response.tsx b/components/Chat/Response/Response.tsx
@@ -9,6 +9,7 @@ import Container from "@/components/Shared/Container";
 import ResponseImages from "@/components/Chat/Response/Images";
 import ResponseInterstitial from "@/components/Chat/Response/Interstitial";
 import ResponseMarkdown from "@/components/Chat/Response/Markdown";
+import ResponseOptions from "./Options";
 import { prepareQuestion } from "@/lib/chat-helpers";
 import useChatSocket from "@/hooks/useChatSocket";
 
@@ -130,7 +131,7 @@ const ChatResponse: React.FC<ChatResponseProps> = ({
       <div>
         {renderedMessage}
         {streamedMessage && <ResponseMarkdown content={streamedMessage} />}
-        {!isStreamingComplete && <BouncingLoader />}
+        {isStreamingComplete ? <ResponseOptions /> : <BouncingLoader />}
       </div>
     </StyledResponse>
   );