sort answers by accuracy

client/src/components/chat/chat-item.tsx

@@ -105,8 +105,8 @@ export function ChatItem(props: {
     children: React.ReactNode;
     node: { url: string };
   }) {
-    const linkAnswer =
-      props.href.length > 30 ? props.href.slice(0, 30) : props.href;
+    // const linkAnswer =
+    //   props.href.length > 30 ? props.href.slice(0, 30) : props.href;
     const chatLink = hrefToChatLink(props?.node?.url || "", message);
     return chatLink.type === LINK_TYPE_ASK ? (
       <a
@@ -121,7 +121,7 @@ export function ChatItem(props: {
       </a>
     ) : (
       <a href={props.href} target="_blank" rel="noreferrer">
-        {linkAnswer}
+        {props.children}
       </a>
     );
   }
@@ -210,7 +210,6 @@ export function ChatItem(props: {
       {message.name}
     </p>
   );
-
   return (
     <div>
       {!isUser && isVisible ? mentorBubbleName : null}

client/src/components/chat/chat.tsx

@@ -81,6 +81,7 @@ export function Chat(args: {
     setVisibilityShowAllPref,
     mentorNameForChatMsg,
     rePlayQuestionVideo,
+    mentorNameById,
   } = useWithChatData();
 
   const colorByMentorId = useSelector<State, Record<string, string>>((s) => {
@@ -93,6 +94,7 @@ export function Chat(args: {
   });
 
   const chatData = useSelector<State, ChatData>((s) => s.chat);
+  const questionSent = useSelector<State, boolean>((s) => s.chat.questionSent);
   useEffect(() => {
     animateScroll.scrollToBottom({
       containerId: "chat-thread",
@@ -149,6 +151,37 @@ export function Chat(args: {
     setVisibilityShowAllPref(visibilityShowAllPref);
   }, [visibilityShowAllPref]);
 
+  const totalMentors = Object.keys(mentorNameById).length;
+  if (
+    totalMentors > 1 &&
+    chatData.messages.length >= 2 + totalMentors &&
+    !questionSent &&
+    mentorType !== "CHAT"
+  ) {
+    // get last mentors answers to sort them
+    const lastAnswers = chatData.messages.slice(
+      -Object.keys(mentorNameById).length
+    );
+    lastAnswers.map((a) => console.log(a));
+
+    const elemToDelete = Object.keys(mentorNameById).length;
+
+    // remove answers to then append the sorted ones
+    chatData.messages.length > Object.keys(mentorNameById).length
+      ? chatData.messages.splice(
+          chatData.messages.length - elemToDelete,
+          chatData.messages.length
+        )
+      : chatData.messages;
+
+    // sort last mentors answers
+    const answersSorted = lastAnswers.sort((a, b) =>
+      String(b.confidence).localeCompare(String(a.confidence))
+    );
+    // concat sorted answers to the previous ones
+    chatData.messages = chatData.messages.concat(answersSorted);
+  }
+
   return (
     <div
       data-cy="history-chat"
@@ -165,7 +198,6 @@ export function Chat(args: {
         className={[styles.list, "chat-thread"].join(" ")}
         style={{
           width: shouldDisplayPortrait() ? "100%" : width ? width : "40vw",
-          // height: shouldDisplayPortrait() || windowHeight ? height : "300px",
         }}
         disablePadding={true}
         id="chat-thread"

client/src/components/chat/use-chat-data.ts

@@ -15,6 +15,7 @@ export interface UseWithChatData {
   mentorType: string;
   lastQuestionId: string;
   visibilityShowAllPref: boolean;
+  mentorNameById: Record<string, string>;
   getQuestionVisibilityPref: (questionId: string) => ItemVisibilityPrefs;
   setQuestionVisibilityPref: (questionId: string, show: boolean) => void;
   setVisibilityShowAllPref: (show: boolean) => void;
@@ -130,5 +131,6 @@ export function useWithChatData(): UseWithChatData {
     setVisibilityShowAllPref,
     mentorNameForChatMsg,
     rePlayQuestionVideo,
+    mentorNameById,
   };
 }

client/src/components/video.tsx

@@ -157,7 +157,6 @@ function Video(args: { playing?: boolean }): JSX.Element {
   function onPlay() {
     setHideLinkLabel(false);
     dispatch(onMentorDisplayAnswer(false, curMentor));
-
     if (isIdle) {
       setHideLinkLabel(true);
       dispatch(answerFinished());

client/src/store/actions.ts

@@ -693,7 +693,7 @@ export const sendQuestion =
     );
   };
 
-const NEXT_MENTOR_DELAY = 3000;
+const NEXT_MENTOR_DELAY = 1000;
 let timer: NodeJS.Timer | null;
 export const answerFinished =
   () =>

client/src/store/reducer.ts

@@ -68,6 +68,7 @@ export const initialState: State = {
   chat: {
     messages: [],
     replay: false,
+    questionSent: false,
   },
   config: {
     cmi5Enabled: false,
@@ -329,6 +330,7 @@ function onQuestionSent(state: State, action: QuestionSentAction): State {
               isFeedbackSendInProgress: false,
             },
           ],
+          questionSent: true,
         },
         curQuestion: action.payload.question,
         curQuestionSource: action.payload.source,
@@ -499,7 +501,7 @@ function onQuestionAnswered(
           isIntro: false,
           isUser: false,
           questionId: action.payload.questionId,
-          text: action.payload.answerText,
+          text: action.payload.answerText.trim(),
           feedback: Feedback.NONE,
           feedbackId: action.payload.answerFeedbackId,
           isFeedbackSendInProgress: false,
@@ -512,8 +514,10 @@ function onQuestionAnswered(
           answerMedia: mentor.answer_media,
           answerId: mentor.answer_id,
           replay: false,
+          confidence: mentor.confidence,
         },
       ],
+      questionSent: false,
     },
 
     isIdle: false,

client/src/types.ts

@@ -10,6 +10,7 @@ export interface ChatData {
   lastAnswerAt?: Date;
   messages: ChatMsg[];
   replay: boolean;
+  questionSent: boolean;
 }
 
 export const LINK_TYPE_ASK = "ask";
@@ -45,6 +46,7 @@ export interface ChatMsg {
   answerId?: string;
   replay?: boolean;
   isVideoInProgress?: boolean;
+  confidence?: number;
 }
 
 export interface MentorClientData {

cypress/cypress/fixtures/response_with_feedback.json

@@ -14,7 +14,7 @@
       "url": "http://videos.org/answer_id10.mp4"
     }
   ],
-  "confidence": -0.5140574318328217,
+  "confidence": 1,
   "feedback_id": "feedback_id",
   "classifier": ""
 }

cypress/cypress/fixtures/response_with_feedback2.json

@@ -14,7 +14,7 @@
       "url": "http://videos.org/answer_id2.mp4"
     }
   ],
-  "confidence": -0.5140574318328217,
+  "confidence": 0.1140574318328217,
   "feedback_id": "feedback_id2",
   "classifier": ""
 }

cypress/cypress/fixtures/response_with_feedback3.json

@@ -2,6 +2,7 @@
   "query": "how old are you",
   "answer_id": "answer_id_feedback11",
   "answer_text": "Give me feedback.",
+
   "answer_media": [
     {
       "type": "video",
@@ -14,7 +15,7 @@
       "url": "http://videos.org/answer_id11.mp4"
     }
   ],
-  "confidence": -0.5140574318328217,
+  "confidence": -0.9,
   "feedback_id": "feedback_id",
   "classifier": ""
 }

cypress/cypress/integration/chat.spec.ts

@@ -75,7 +75,7 @@ describe("Chat", () => {
     cy.get("[data-cy=chat-thread]").should("exist");
     cy.get("[data-cy=input-field]").type("test");
     cy.get("[data-cy=input-send]").trigger("mouseover").click();
-    cy.get("[data-cy=chat-msg-2]").contains("Click https://www.google.com");
+    cy.get("[data-cy=chat-msg-2]").contains("Click here");
     cy.get("[data-cy=chat-msg-2] a").should(
       "have.attr",
       "href",

cypress/cypress/integration/history-links.spec.ts

@@ -28,7 +28,7 @@ describe("Chat History (Video Mentors Links)", () => {
     cy.get("[data-cy=input-field]").type("Question 1");
     cy.get("[data-cy=input-send]").trigger("mouseover").click();
     cy.get("[data-cy=history-chat]").should("exist");
-    cy.get("[data-cy=chat-msg-2]").contains("Click https://www.google.com");
+    cy.get("[data-cy=chat-msg-2]").contains("Click here");
     cy.get("[data-cy=chat-msg-2] a").should(
       "have.attr",
       "href",
@@ -100,7 +100,6 @@ describe("Chat History (Video Mentors Links)", () => {
     cy.intercept("**/questions/?mentor=carlos&query=*", {
       fixture: "response_with_feedback.json",
     });
-
     cy.get("[data-cy=video-container]").within(() => {
       cy.get("[data-cy=answer-link-card]").should("not.exist");
     });
@@ -111,9 +110,16 @@ describe("Chat History (Video Mentors Links)", () => {
     cy.get("[data-cy=input-field]").type("Question 1");
     cy.get("[data-cy=input-send]").trigger("mouseover").click();
 
+    // wait for it to finish
+    cy.get("[data-cy=video-container]", { timeout: 30000 }).should(
+      "have.attr",
+      "data-test-replay",
+      "http://videos.org/answer_id.mp4"
+    );
+
     cy.get("[data-cy=history-chat").within(($hc) => {
       cy.get("[data-cy=chat-thread]").within(($hc) => {
-        cy.get("[data-cy=chat-msg-2]").contains("Click https://www.google.com");
+        cy.get("[data-cy=chat-msg-3]").contains("Click here");
       });
     });
     // Compare last answer link with video label
@@ -182,40 +188,33 @@ describe("Chat History (Video Mentors Links)", () => {
     );
     cy.get("[data-cy=input-send]").trigger("mouseover").click();
 
-    // play video
-    cy.get("video")
-      .should("have.prop", "paused", true)
-      .and("have.prop", "ended", false)
-      .then(($video) => {
-        $video[$video.length - 1].play();
-      });
-    // wait for it to finish
-    cy.get("[data-cy=video-container]", { timeout: 30000 }).should(
-      "have.attr",
-      "data-test-replay",
-      "http://videos.org/answer_id.mp4"
-    );
-
     cy.get("[data-cy=history-chat]").within(($hc) => {
       cy.get("[data-cy=chat-thread]").within(($hc) => {
-        cy.get("[data-cy=chat-msg-2]")
-          .scrollIntoView()
-          .within(() => {
-            cy.get("[data-cy=ask-link-0]")
-              .should("exist")
-              .trigger("mouseover")
-              .click();
-          });
+        cy.get("[data-cy=chat-msg-3]").within(() => {
+          cy.get("[data-cy=ask-link-0]")
+            .should((el) => {
+              expect(Cypress.dom.isAttached(el), "is attached").to.eq(true);
+            })
+            .should("exist")
+            .click({ force: true });
+        });
         cy.get("[data-cy=chat-msg-4]").contains(
           "what does a computer programmer do?"
         );
       });
     });
+    cy.get("[data-cy=visibility-switch]").find("input").check();
+    // wait for it to finish
+    cy.get("[data-cy=video-container]", { timeout: 30000 }).should(
+      "have.attr",
+      "data-test-replay",
+      "http://videos.org/answer_id.mp4"
+    );
 
-    cy.get("[data-cy=chat-msg-2]")
+    cy.get("[data-cy=chat-msg-3]")
       .scrollIntoView()
       .within(() => {
-        cy.get("[data-cy=ask-icon-2]");
+        cy.get("[data-cy=ask-icon-3]");
       });
   });