Merge pull request #1117 from ManishMadan2882/main

Adding option to collect feedback in React widget
2025-11-29 16:43:16 +00:00 · 2024-09-10 12:18:08 +01:00
parent 72842ecd7a e318228a08
commit 4aeaec9dc7
7 changed files with 132 additions and 22 deletions
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -84,14 +84,10 @@ def api_feedback():
    question = data["question"]
    answer = data["answer"]
    feedback = data["feedback"]
-
-    feedback_collection.insert_one(
-        {
-            "question": question,
-            "answer": answer,
-            "feedback": feedback,
-        }
-    )
+    new_doc = {"question": question, "answer": answer, "feedback": feedback}
+    if "api_key" in data:
+        new_doc["api_key"] = data["api_key"]
+    feedback_collection.insert_one(new_doc)
    return {"status": "ok"}


--- a/extensions/react-widget/package.json
+++ b/extensions/react-widget/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "docsgpt-react",
+  "name": "docsgpt",
  "version": "0.4.2",
  "private": false,
  "description": "DocsGPT 🦖 is an innovative open-source tool designed to simplify the retrieval of information from project documentation using advanced GPT models 🤖.",
@@ -11,6 +11,18 @@
    "dist",
    "package.json"
  ],
+  "targets": {
+    "modern": {
+      "engines": {
+        "browsers": "Chrome 80"
+      }
+    },
+    "legacy": {
+      "engines": {
+        "browsers": "> 0.5%, last 2 versions, not dead"
+      }
+    }
+  },
  "@parcel/resolver-default": {
    "packageExports": true
  },
--- a/extensions/react-widget/src/assets/dislike.svg
+++ b/extensions/react-widget/src/assets/dislike.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.37776 10.1001V12.9C6.37776 13.457 6.599 13.9911 6.99282 14.3849C7.38664 14.7788 7.92077 15 8.47772 15L11.2777 8.70011V1.00025H3.38181C3.04419 0.996436 2.71656 1.11477 2.45929 1.33344C2.20203 1.55212 2.03246 1.8564 1.98184 2.19023L1.01585 8.49012C0.985398 8.69076 0.998931 8.89563 1.05551 9.09053C1.1121 9.28543 1.21038 9.46569 1.34355 9.61884C1.47671 9.77198 1.64159 9.89434 1.82674 9.97744C2.01189 10.0605 2.2129 10.1024 2.41583 10.1001H6.37776ZM11.2777 1.00025H13.1466C13.5428 0.993247 13.9277 1.13195 14.2284 1.39002C14.5291 1.64809 14.7245 2.00758 14.7776 2.40023V7.30014C14.7245 7.69279 14.5291 8.05227 14.2284 8.31035C13.9277 8.56842 13.5428 8.70712 13.1466 8.70011H11.2777" fill="none"/>
+<path d="M11.2777 8.70011L8.47772 15C7.92077 15 7.38664 14.7788 6.99282 14.3849C6.599 13.9911 6.37776 13.457 6.37776 12.9V10.1001H2.41583C2.2129 10.1024 2.01189 10.0605 1.82674 9.97744C1.64159 9.89434 1.47671 9.77198 1.34355 9.61884C1.21038 9.46569 1.1121 9.28543 1.05551 9.09053C0.998931 8.89563 0.985398 8.69076 1.01585 8.49012L1.98184 2.19023C2.03246 1.8564 2.20203 1.55212 2.45929 1.33344C2.71656 1.11477 3.04419 0.996436 3.38181 1.00025H11.2777M11.2777 8.70011V1.00025M11.2777 8.70011H13.1466C13.5428 8.70712 13.9277 8.56842 14.2284 8.31035C14.5291 8.05227 14.7245 7.69279 14.7776 7.30014V2.40023C14.7245 2.00758 14.5291 1.64809 14.2284 1.39002C13.9277 1.13195 13.5428 0.993247 13.1466 1.00025H11.2777" stroke="current" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/extensions/react-widget/src/assets/like.svg
+++ b/extensions/react-widget/src/assets/like.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.39995 5.89997V3.09999C9.39995 2.54304 9.1787 2.0089 8.78487 1.61507C8.39105 1.22125 7.85691 1 7.29996 1L4.49998 7.29996V14.9999H12.3959C12.7336 15.0037 13.0612 14.8854 13.3185 14.6667C13.5757 14.448 13.7453 14.1437 13.7959 13.8099L14.7619 7.50996C14.7924 7.30931 14.7788 7.10444 14.7222 6.90954C14.6657 6.71464 14.5674 6.53437 14.4342 6.38123C14.301 6.22808 14.1362 6.10572 13.951 6.02262C13.7659 5.93952 13.5649 5.89767 13.3619 5.89997H9.39995ZM4.49998 14.9999H2.39999C2.02869 14.9999 1.6726 14.8524 1.41005 14.5899C1.1475 14.3273 1 13.9712 1 13.5999V8.69995C1 8.32865 1.1475 7.97256 1.41005 7.71001C1.6726 7.44746 2.02869 7.29996 2.39999 7.29996H4.49998" fill="none"/>
+<path d="M4.49998 7.29996L7.29996 1C7.85691 1 8.39105 1.22125 8.78487 1.61507C9.1787 2.0089 9.39995 2.54304 9.39995 3.09999V5.89997H13.3619C13.5649 5.89767 13.7659 5.93952 13.951 6.02262C14.1362 6.10572 14.301 6.22808 14.4342 6.38123C14.5674 6.53437 14.6657 6.71464 14.7223 6.90954C14.7788 7.10444 14.7924 7.30931 14.7619 7.50996L13.7959 13.8099C13.7453 14.1437 13.5757 14.448 13.3185 14.6667C13.0612 14.8854 12.7336 15.0037 12.3959 14.9999H4.49998M4.49998 7.29996V14.9999M4.49998 7.29996H2.39999C2.02869 7.29996 1.6726 7.44746 1.41005 7.71001C1.1475 7.97256 1 8.32865 1 8.69995V13.5999C1 13.9712 1.1475 14.3273 1.41005 14.5899C1.6726 14.8524 2.02869 14.9999 2.39999 14.9999H4.49998" stroke="current" stroke-width="1.39999" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -1,11 +1,13 @@
 "use client";
-import React from 'react'
+import React, { useRef } from 'react'
 import DOMPurify from 'dompurify';
 import styled, { keyframes, createGlobalStyle } from 'styled-components';
 import { PaperPlaneIcon, RocketIcon, ExclamationTriangleIcon, Cross2Icon } from '@radix-ui/react-icons';
-import { MESSAGE_TYPE, Query, Status, WidgetProps } from '../types/index';
-import { fetchAnswerStreaming } from '../requests/streamingApi';
+import { FEEDBACK, MESSAGE_TYPE, Query, Status, WidgetProps } from '../types/index';
+import { fetchAnswerStreaming, sendFeedback } from '../requests/streamingApi';
 import { ThemeProvider } from 'styled-components';
+import Like from "../assets/like.svg"
+import Dislike from "../assets/dislike.svg"
 import MarkdownIt from 'markdown-it';
 const themes = {
  dark: {
@@ -63,6 +65,10 @@ const GlobalStyles = createGlobalStyle`
  background-color: #646464;
  color: #fff !important;
 }
+.response code {
+  white-space: pre-wrap !important;
+  line-break: loose !important;
+}
 `;
 const Overlay = styled.div`
  position: fixed;
@@ -195,12 +201,24 @@ const Conversation = styled.div<{ size: string }>`
    width:${props => props.size === 'large' ? '90vw' : props.size === 'medium' ? '60vw' : '400px'} !important;
    }
 `;
-
+const Feedback = styled.div`
+  background-color: transparent;
+  font-weight: normal;
+  gap: 12px;
+  display: flex;
+  padding: 6px;
+  clear: both;
+`;
 const MessageBubble = styled.div<{ type: MESSAGE_TYPE }>`
-    display: flex;
+    display: block;
    font-size: 16px;
-    justify-content: ${props => props.type === 'QUESTION' ? 'flex-end' : 'flex-start'};
-    margin: 0.5rem;
+    position: relative;
+    width: 100%;;
+    float: right;
+    margin: 0rem;
+    &:hover ${Feedback} * {
+    visibility: visible !important;
+  }
 `;
 const Message = styled.div<{ type: MESSAGE_TYPE }>`
    background: ${props => props.type === 'QUESTION' ?
@@ -208,6 +226,7 @@ const Message = styled.div<{ type: MESSAGE_TYPE }>`
    props.theme.secondary.bg};
    color: ${props => props.type === 'ANSWER' ? props.theme.primary.text : '#fff'};
    border: none;
+    float: ${props => props.type === 'QUESTION' ? 'right' : 'left'};
    max-width: ${props => props.type === 'ANSWER' ? '100%' : '80'};
    overflow: auto;
    margin: 4px;
@@ -315,6 +334,7 @@ const HeroDescription = styled.p`
  font-size: 14px;
  line-height: 1.5;
 `;
+
 const Hero = ({ title, description, theme }: { title: string, description: string, theme: string }) => {
  return (
    <>
@@ -345,7 +365,8 @@ export const DocsGPTWidget = ({
  size = 'small',
  theme = 'dark',
  buttonIcon = 'https://d3dg1063dc54p9.cloudfront.net/widget/message.svg',
-  buttonBg = 'linear-gradient(to bottom right, #5AF0EC, #E80D9D)'
+  buttonBg = 'linear-gradient(to bottom right, #5AF0EC, #E80D9D)',
+  collectFeedback = true
 }: WidgetProps) => {
  const [prompt, setPrompt] = React.useState('');
  const [status, setStatus] = React.useState<Status>('idle');
@@ -353,6 +374,7 @@ export const DocsGPTWidget = ({
  const [conversationId, setConversationId] = React.useState<string | null>(null)
  const [open, setOpen] = React.useState<boolean>(false)
  const [eventInterrupt, setEventInterrupt] = React.useState<boolean>(false); //click or scroll by user while autoScrolling
+  const isBubbleHovered = useRef<boolean>(false)
  const endMessageRef = React.useRef<HTMLDivElement | null>(null);
  const md = new MarkdownIt();

@@ -376,6 +398,36 @@ export const DocsGPTWidget = ({
    !eventInterrupt && scrollToBottom(endMessageRef.current);
  }, [queries.length, queries[queries.length - 1]?.response]);

+  async function handleFeedback(feedback: FEEDBACK, index: number) {
+    let query = queries[index]
+    if (!query.response)
+      return;
+    if (query.feedback != feedback) {
+      sendFeedback({
+        question: query.prompt,
+        answer: query.response,
+        feedback: feedback,
+        apikey: apiKey
+      }, apiHost)
+        .then(res => {
+          if (res.status == 200) {
+            query.feedback = feedback;
+            setQueries((prev: Query[]) => {
+              return prev.map((q, i) => (i === index ? query : q));
+            });
+          }
+        })
+        .catch(err => console.log("Connection failed",err))
+    }
+    else {
+      delete query.feedback;
+      setQueries((prev: Query[]) => {
+        return prev.map((q, i) => (i === index ? query : q));
+      });
+
+    }
+  }
+
  async function stream(question: string) {
    setStatus('loading')
    try {
@@ -473,7 +525,7 @@ export const DocsGPTWidget = ({
                      </MessageBubble>
                    }
                    {
-                      query.response ? <MessageBubble type='ANSWER'>
+                      query.response ? <MessageBubble onMouseOver={() => { isBubbleHovered.current = true }} type='ANSWER'>
                        <Message
                          type='ANSWER'
                          ref={(index === queries.length - 1) ? endMessageRef : null}
@@ -483,6 +535,24 @@ export const DocsGPTWidget = ({
                            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(md.render(query.response)) }}
                          />
                        </Message>
+
+                        {collectFeedback &&
+                          <Feedback>
+                            <Like
+                              style={{
+                                stroke: query.feedback == 'LIKE' ? '#8860DB' : '#c0c0c0',
+                                visibility: query.feedback == 'LIKE' ? 'visible' : 'hidden'
+                              }}
+                              fill='none'
+                              onClick={() => handleFeedback("LIKE", index)} />
+                            <Dislike
+                              style={{
+                                stroke: query.feedback == 'DISLIKE' ? '#ed8085' : '#c0c0c0',
+                                visibility: query.feedback == 'DISLIKE' ? 'visible' : 'hidden'
+                              }}
+                              fill='none'
+                              onClick={() => handleFeedback("DISLIKE", index)} />
+                          </Feedback>}
                      </MessageBubble>
                        : <div>
                          {
@@ -518,7 +588,7 @@ export const DocsGPTWidget = ({
              type='text' placeholder="What do you want to do?" />
            <StyledButton
              size={size}
-              disabled={prompt.length == 0 || status !== 'idle'}>
+              disabled={prompt.trim().length == 0 || status !== 'idle'}>
              <PaperPlaneIcon width={15} height={15} color='white' />
            </StyledButton>
          </PromptContainer>
--- a/extensions/react-widget/src/requests/streamingApi.ts
+++ b/extensions/react-widget/src/requests/streamingApi.ts
@@ -1,3 +1,4 @@
+import { FEEDBACK } from "@/types";
 interface HistoryItem {
  prompt: string;
  response?: string;
@@ -11,6 +12,12 @@ interface FetchAnswerStreamingProps {
  apiHost?: string;
  onEvent?: (event: MessageEvent) => void;
 }
+interface FeedbackPayload {
+  question: string;
+  answer: string;
+  apikey: string;
+  feedback: FEEDBACK;
+}
 export function fetchAnswerStreaming({
  question = '',
  apiKey = '',
@@ -20,12 +27,12 @@ export function fetchAnswerStreaming({
  onEvent = () => { console.log("Event triggered, but no handler provided."); }
 }: FetchAnswerStreamingProps): Promise<void> {
  return new Promise<void>((resolve, reject) => {
-    const body= {
+    const body = {
      question: question,
      history: JSON.stringify(history),
      conversation_id: conversationId,
      model: 'default',
-      api_key:apiKey
+      api_key: apiKey
    };
    fetch(apiHost + '/stream', {
      method: 'POST',
@@ -80,4 +87,20 @@ export function fetchAnswerStreaming({
        reject(error);
      });
  });
-}
+}
+
+
+export const sendFeedback = (payload: FeedbackPayload,apiHost:string): Promise<Response> => {
+  return fetch(`${apiHost}/api/feedback`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      question: payload.question,
+      answer: payload.answer,
+      feedback: payload.feedback,
+      api_key:payload.apikey
+    }),
+  });
+};
--- a/extensions/react-widget/src/types/index.ts
+++ b/extensions/react-widget/src/types/index.ts
@@ -23,4 +23,5 @@ export interface WidgetProps {
  theme?:THEME,
  buttonIcon?:string;
  buttonBg?:string;
+  collectFeedback?:boolean
 }