odaptos_design_system 2.0.13 → 2.0.14

package/src/Molecules/Interviews/Chat.tsx

@@ -1,419 +1,419 @@
-import React, { useRef, useEffect, HTMLAttributes } from 'react';
-import styles from './Chat.modules.scss';
-import {
-  Text,
-  ChatInput,
-  Title,
-  Scenario,
-  WelcomeMessage,
-  Task,
-  EndRecording,
-  SusExplanation,
-  Button,
-  TvIcon,
-  SendIcon,
-} from '../../';
-import Grid from '@mui/material/Grid';
-
-export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
-  chatTitle?: string;
-  welcomeTitle?: string;
-  welcomeDescription?: string;
-  startInterviewTitle?: string;
-  startInterviewBtnTitle?: string;
-  startInterviewIcon?: JSX.Element;
-  startInterview?: (task: any) => void;
-  tasks: any[];
-  sendTask: (task: any) => void;
-  currentTask?: any;
-  chatInputPlaceholder?: string;
-  chatInputValue?: string;
-  chatInputonChange?: (message: string) => void;
-  sendMessage: () => void;
-  className?: string;
-  isTaskMode?: boolean;
-  isChatDisplay?: boolean;
-  isInterviewer?: boolean;
-  messages: any[];
-  idsTasksAlreadySent: string[];
-  customScrollingClassname?: string;
-  customContentClassname?: string;
-  disabledTask?: boolean;
-  disabledScenario?: boolean;
-  areAllTasksSend?: boolean;
-  isRecordingFinished?: boolean;
-  stopRecTitle: string;
-  stopRecDescription: string;
-  stopRecCTA: string;
-  SusExplanationTitle: string;
-  SusExplanationDescription: string;
-  isSus: boolean;
-  stopRecording: () => void;
-  isInterviewNonModerated?: boolean;
-  startNMScreenSharing: () => void; //Non-Moderated Screen Sharing
-}
-
-export const Chat = ({
-  chatTitle,
-  welcomeTitle,
-  welcomeDescription,
-  startInterviewTitle,
-  startInterviewBtnTitle,
-  startInterviewIcon,
-  startInterview,
-  tasks,
-  sendTask,
-  currentTask,
-  chatInputPlaceholder,
-  chatInputValue,
-  chatInputonChange,
-  sendMessage,
-  className,
-  isTaskMode,
-  isInterviewer,
-  messages,
-  idsTasksAlreadySent,
-  customScrollingClassname,
-  customContentClassname,
-  disabledTask,
-  disabledScenario,
-  areAllTasksSend,
-  isRecordingFinished,
-  stopRecTitle,
-  stopRecDescription,
-  stopRecCTA,
-  SusExplanationTitle,
-  SusExplanationDescription,
-  isSus,
-  stopRecording,
-  startNMScreenSharing,
-  isInterviewNonModerated = false,
-  ...props
-}: ChatProps) => {
-  const replaceURLs = (message: string) => {
-    if (!message) return;
-    var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
-    return message.replace(urlRegex, (url) => {
-      var hyperlink = url;
-      if (!hyperlink.match('^https?://')) {
-        hyperlink = 'https://' + hyperlink;
-      }
-      return (
-        '<a href="' +
-        hyperlink +
-        '" target="_blank" rel="noopener noreferrer">' +
-        url +
-        '</a>'
-      );
-    });
-  };
-
-  const refTask = useRef<HTMLDivElement>(null);
-  const refMsg = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (messages.length) {
-      if (refTask && refTask.current)
-        refTask.current.scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-        });
-    }
-  }, [tasks.length]);
-
-  useEffect(() => {
-    if (messages.length) {
-      if (refMsg && refMsg.current)
-        refMsg.current.scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-        });
-    }
-  }, [messages.length]);
-
-  if (isTaskMode) {
-    return (
-      <Grid
-        container
-        item
-        xs={3}
-        direction="column"
-        className={`${className ?? ''} ${styles.chatContainer}`}
-        {...props}
-      >
-        <div
-          className={`${styles.scrolling_content} ${styles.no_scrollbar} ${customContentClassname}`}
-        >
-          {chatTitle && <Text text={chatTitle} weight="bold" size="lg" />}
-
-          <div
-            className={`${styles.tasks_container}
-          ${customScrollingClassname}`}
-          >
-            {isInterviewNonModerated && (
-              <div className={styles.nm_message_container}>
-                <Text text={'Share your screen'} weight="bold" size="base" />
-                <Text
-                  text={
-                    'In order to participate to this test you need to share your screen before the first task is sent'
-                  }
-                  size="sm"
-                />
-                <Button
-                  id="start_screen_share"
-                  text={'Share my screen'}
-                  onClick={() => startNMScreenSharing()}
-                  iconRight={<TvIcon />}
-                  className={styles.nm_button}
-                />
-              </div>
-            )}
-            {tasks.map((task) => {
-              if (
-                task.type === 'question' ||
-                task.type === 'task' ||
-                (task.type === 'scenario' && isInterviewer)
-              ) {
-                const realTask = isInterviewer ? task : JSON.parse(task.body);
-                const realCurrentTask = isInterviewer
-                  ? currentTask
-                  : JSON.parse(currentTask.body);
-
-                return (
-                  <Task
-                    key={realTask._id}
-                    taskNumber={`${
-                      realTask.type === 'task'
-                        ? 'Task'
-                        : realTask.type === 'question'
-                        ? 'Question'
-                        : 'Scenario'
-                    } #${realTask.index}`}
-                    taskTitle={
-                      realTask.type === 'scenario'
-                        ? (idsTasksAlreadySent.includes(realTask._id) &&
-                            realCurrentTask._id !== realTask._id) ||
-                          disabledTask
-                          ? realTask.name ?? realTask.description
-                          : realCurrentTask &&
-                            realCurrentTask._id === realTask._id
-                          ? realTask.description
-                          : realTask.name ?? realTask.description
-                        : realTask.description
-                    }
-                    taskTitleTooltip={realTask.description || realTask.name}
-                    url={realTask.url}
-                    notes={realTask.notes}
-                    state={
-                      idsTasksAlreadySent.includes(realTask._id) &&
-                      realCurrentTask._id !== realTask._id
-                        ? 'done'
-                        : disabledTask
-                        ? 'disabled'
-                        : realCurrentTask &&
-                          realCurrentTask._id === realTask._id
-                        ? 'active'
-                        : 'idle'
-                    }
-                    task={realTask}
-                    sendTask={() => {
-                      if (
-                        realTask.type === 'task' ||
-                        realTask.type === 'question'
-                      )
-                        sendTask(realTask);
-                      else if (startInterview && realTask.type === 'scenario')
-                        startInterview(realTask);
-                      else return;
-                    }}
-                    isDone={
-                      idsTasksAlreadySent.includes(realTask._id) &&
-                      realCurrentTask._id !== realTask._id
-                    }
-                    isInterviewer={isInterviewer}
-                  />
-                );
-              } else if (
-                task.type === 'scenario' &&
-                !isInterviewer &&
-                !isInterviewNonModerated
-              ) {
-                const scenario = isInterviewer ? task : JSON.parse(task.body);
-
-                return (
-                  <Scenario
-                    title={`Scenario #${scenario.index}`}
-                    scenarioName={scenario.name}
-                    description={scenario.description}
-                    buttonText={
-                      scenario.url ? startInterviewBtnTitle : undefined
-                    }
-                    buttonIcon={scenario.url ? startInterviewIcon : undefined}
-                    url={scenario.url ?? ''}
-                    disabled={disabledScenario}
-                    isInterviewer={isInterviewer}
-                  />
-                );
-              }
-              if (task.type === 'scenario' && isInterviewNonModerated) {
-                const realTask = isInterviewer ? task : JSON.parse(task.body);
-                return (
-                  <div className={styles.nm_message_container}>
-                    <Text text={realTask.name} weight="bold" size="base" />
-                    <Text text={realTask.description} size="sm" />
-                    <Button
-                      id="start_scenario"
-                      text={'Start Now'}
-                      onClick={() => sendTask(realTask)}
-                      iconRight={<SendIcon />}
-                      className={styles.nm_button}
-                    />
-                  </div>
-                );
-              } else return <></>;
-            })}
-            {isInterviewer && areAllTasksSend && !isRecordingFinished && (
-              <EndRecording
-                stopRecTitle={stopRecTitle}
-                stopRecDescription={stopRecDescription}
-                stopRecCTA={stopRecCTA}
-                stopRecording={stopRecording}
-              />
-            )}
-            {isInterviewer &&
-              isRecordingFinished &&
-              isSus &&
-              areAllTasksSend && (
-                <SusExplanation
-                  title={SusExplanationTitle}
-                  description={SusExplanationDescription}
-                />
-              )}
-            <div ref={refTask} />
-          </div>
-        </div>
-      </Grid>
-    );
-  } else
-    return (
-      <Grid
-        container
-        item
-        xs={3}
-        direction="column"
-        className={`${className ?? ''} ${styles.chatContainer}`}
-        {...props}
-      >
-        <div
-          className={`${styles.scrolling_content} ${styles.no_scrollbar} ${customContentClassname}`}
-        >
-          {chatTitle && <Text text={chatTitle} weight="bold" size="lg" />}
-
-          <div
-            className={`${styles.tasks_container}
-          ${customScrollingClassname}`}
-          >
-            {welcomeTitle && welcomeDescription && !isInterviewer && (
-              <WelcomeMessage
-                title={welcomeTitle}
-                description={welcomeDescription}
-              />
-            )}
-            {messages &&
-              messages.map((message) => {
-                if (message && message.type === 'normal') {
-                  if (
-                    (message.from.identity === 'interviewee' &&
-                      isInterviewer) ||
-                    (message.from.identity === 'interviewer' && !isInterviewer)
-                  )
-                    return (
-                      <div className={styles.user_message_container}>
-                        <div className={styles.bot_indicator}>
-                          <Title
-                            text={`${message.from.name
-                              .split(' ')
-                              .map((n: string[]) => n[0])
-                              .join('')}`}
-                            weight="bold"
-                            color="white"
-                            size="sm"
-                          />
-                        </div>
-                        <div className={styles.message_chatbot}>
-                          <div className={styles.not_user_text_message}>
-                            <div
-                              dangerouslySetInnerHTML={{
-                                __html: replaceURLs(message.body) ?? '',
-                              }}
-                              className={styles.user_text}
-                            />
-                          </div>
-                          <Text
-                            text={new Date(
-                              message.createdAt
-                            ).toLocaleTimeString()}
-                            size="xs"
-                            color="grey"
-                            className={styles.user_text_message_username}
-                          />
-                        </div>
-                      </div>
-                    );
-                  else if (
-                    (message.from.identity === 'interviewee' &&
-                      !isInterviewer) ||
-                    (message.from.identity === 'interviewer' && isInterviewer)
-                  )
-                    return (
-                      <div className={styles.user_message_container}>
-                        <div className={styles.message_chatbot}>
-                          <div className={styles.user_text_message}>
-                            <div
-                              dangerouslySetInnerHTML={{
-                                __html: replaceURLs(message.body) ?? '',
-                              }}
-                              className={styles.user_text}
-                            />
-                          </div>
-                          <Text
-                            text={new Date(
-                              message.createdAt
-                            ).toLocaleTimeString()}
-                            size="xs"
-                            color="grey"
-                            className={styles.user_text_message_username_left}
-                          />
-                        </div>
-                        <div className={styles.user_indicator}>
-                          <Title
-                            text={`${message.from.name
-                              .split(' ')
-                              .map((n: string[]) => n[0])
-                              .join('')}`}
-                            weight="bold"
-                            color="white"
-                            size="sm"
-                          />
-                        </div>
-                      </div>
-                    );
-                  else return <></>;
-                } else return <></>;
-              })}
-            <div ref={refMsg} />
-          </div>
-          {chatInputPlaceholder &&
-            typeof chatInputValue === 'string' &&
-            chatInputonChange && (
-              <ChatInput
-                placeholder={chatInputPlaceholder}
-                value={chatInputValue}
-                onChange={chatInputonChange}
-                sendMessage={sendMessage}
-              />
-            )}
-        </div>
-      </Grid>
-    );
-};
+import React, { useRef, useEffect, HTMLAttributes } from 'react';
+import styles from './Chat.modules.scss';
+import {
+  Text,
+  ChatInput,
+  Title,
+  Scenario,
+  WelcomeMessage,
+  Task,
+  EndRecording,
+  SusExplanation,
+  Button,
+  TvIcon,
+  SendIcon,
+} from '../../';
+import Grid from '@mui/material/Grid';
+
+export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
+  chatTitle?: string;
+  welcomeTitle?: string;
+  welcomeDescription?: string;
+  startInterviewTitle?: string;
+  startInterviewBtnTitle?: string;
+  startInterviewIcon?: JSX.Element;
+  startInterview?: (task: any) => void;
+  tasks: any[];
+  sendTask: (task: any) => void;
+  currentTask?: any;
+  chatInputPlaceholder?: string;
+  chatInputValue?: string;
+  chatInputonChange?: (message: string) => void;
+  sendMessage: () => void;
+  className?: string;
+  isTaskMode?: boolean;
+  isChatDisplay?: boolean;
+  isInterviewer?: boolean;
+  messages: any[];
+  idsTasksAlreadySent: string[];
+  customScrollingClassname?: string;
+  customContentClassname?: string;
+  disabledTask?: boolean;
+  disabledScenario?: boolean;
+  areAllTasksSend?: boolean;
+  isRecordingFinished?: boolean;
+  stopRecTitle: string;
+  stopRecDescription: string;
+  stopRecCTA: string;
+  SusExplanationTitle: string;
+  SusExplanationDescription: string;
+  isSus: boolean;
+  stopRecording: () => void;
+  isInterviewNonModerated?: boolean;
+  startNMScreenSharing: () => void; //Non-Moderated Screen Sharing
+}
+
+export const Chat = ({
+  chatTitle,
+  welcomeTitle,
+  welcomeDescription,
+  startInterviewTitle,
+  startInterviewBtnTitle,
+  startInterviewIcon,
+  startInterview,
+  tasks,
+  sendTask,
+  currentTask,
+  chatInputPlaceholder,
+  chatInputValue,
+  chatInputonChange,
+  sendMessage,
+  className,
+  isTaskMode,
+  isInterviewer,
+  messages,
+  idsTasksAlreadySent,
+  customScrollingClassname,
+  customContentClassname,
+  disabledTask,
+  disabledScenario,
+  areAllTasksSend,
+  isRecordingFinished,
+  stopRecTitle,
+  stopRecDescription,
+  stopRecCTA,
+  SusExplanationTitle,
+  SusExplanationDescription,
+  isSus,
+  stopRecording,
+  startNMScreenSharing,
+  isInterviewNonModerated = false,
+  ...props
+}: ChatProps) => {
+  const replaceURLs = (message: string) => {
+    if (!message) return;
+    var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
+    return message.replace(urlRegex, (url) => {
+      var hyperlink = url;
+      if (!hyperlink.match('^https?://')) {
+        hyperlink = 'https://' + hyperlink;
+      }
+      return (
+        '<a href="' +
+        hyperlink +
+        '" target="_blank" rel="noopener noreferrer">' +
+        url +
+        '</a>'
+      );
+    });
+  };
+
+  const refTask = useRef<HTMLDivElement>(null);
+  const refMsg = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (messages.length) {
+      if (refTask && refTask.current)
+        refTask.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'end',
+        });
+    }
+  }, [tasks.length]);
+
+  useEffect(() => {
+    if (messages.length) {
+      if (refMsg && refMsg.current)
+        refMsg.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'end',
+        });
+    }
+  }, [messages.length]);
+
+  if (isTaskMode) {
+    return (
+      <Grid
+        container
+        item
+        xs={3}
+        direction="column"
+        className={`${className ?? ''} ${styles.chatContainer}`}
+        {...props}
+      >
+        <div
+          className={`${styles.scrolling_content} ${styles.no_scrollbar} ${customContentClassname}`}
+        >
+          {chatTitle && <Text text={chatTitle} weight="bold" size="lg" />}
+
+          <div
+            className={`${styles.tasks_container}
+          ${customScrollingClassname}`}
+          >
+            {isInterviewNonModerated && (
+              <div className={styles.nm_message_container}>
+                <Text text={'Share your screen'} weight="bold" size="base" />
+                <Text
+                  text={
+                    'In order to participate to this test you need to share your screen before the first task is sent'
+                  }
+                  size="sm"
+                />
+                <Button
+                  id="start_screen_share"
+                  text={'Share my screen'}
+                  onClick={() => startNMScreenSharing()}
+                  iconRight={<TvIcon />}
+                  className={styles.nm_button}
+                />
+              </div>
+            )}
+            {tasks.map((task) => {
+              if (
+                task.type === 'question' ||
+                task.type === 'task' ||
+                (task.type === 'scenario' && isInterviewer)
+              ) {
+                const realTask = isInterviewer ? task : JSON.parse(task.body);
+                const realCurrentTask = isInterviewer
+                  ? currentTask
+                  : JSON.parse(currentTask.body);
+
+                return (
+                  <Task
+                    key={realTask._id}
+                    taskNumber={`${
+                      realTask.type === 'task'
+                        ? 'Task'
+                        : realTask.type === 'question'
+                        ? 'Question'
+                        : 'Scenario'
+                    } #${realTask.index}`}
+                    taskTitle={
+                      realTask.type === 'scenario'
+                        ? (idsTasksAlreadySent.includes(realTask._id) &&
+                            realCurrentTask._id !== realTask._id) ||
+                          disabledTask
+                          ? realTask.name ?? realTask.description
+                          : realCurrentTask &&
+                            realCurrentTask._id === realTask._id
+                          ? realTask.description
+                          : realTask.name ?? realTask.description
+                        : realTask.description
+                    }
+                    taskTitleTooltip={realTask.description || realTask.name}
+                    url={realTask.url}
+                    notes={realTask.notes}
+                    state={
+                      idsTasksAlreadySent.includes(realTask._id) &&
+                      realCurrentTask._id !== realTask._id
+                        ? 'done'
+                        : disabledTask
+                        ? 'disabled'
+                        : realCurrentTask &&
+                          realCurrentTask._id === realTask._id
+                        ? 'active'
+                        : 'idle'
+                    }
+                    task={realTask}
+                    sendTask={() => {
+                      if (
+                        realTask.type === 'task' ||
+                        realTask.type === 'question'
+                      )
+                        sendTask(realTask);
+                      else if (startInterview && realTask.type === 'scenario')
+                        startInterview(realTask);
+                      else return;
+                    }}
+                    isDone={
+                      idsTasksAlreadySent.includes(realTask._id) &&
+                      realCurrentTask._id !== realTask._id
+                    }
+                    isInterviewer={isInterviewer}
+                  />
+                );
+              } else if (
+                task.type === 'scenario' &&
+                !isInterviewer &&
+                !isInterviewNonModerated
+              ) {
+                const scenario = isInterviewer ? task : JSON.parse(task.body);
+
+                return (
+                  <Scenario
+                    title={`Scenario #${scenario.index}`}
+                    scenarioName={scenario.name}
+                    description={scenario.description}
+                    buttonText={
+                      scenario.url ? startInterviewBtnTitle : undefined
+                    }
+                    buttonIcon={scenario.url ? startInterviewIcon : undefined}
+                    url={scenario.url ?? ''}
+                    disabled={disabledScenario}
+                    isInterviewer={isInterviewer}
+                  />
+                );
+              }
+              if (task.type === 'scenario' && isInterviewNonModerated) {
+                const realTask = isInterviewer ? task : JSON.parse(task.body);
+                return (
+                  <div className={styles.nm_message_container}>
+                    <Text text={realTask.name} weight="bold" size="base" />
+                    <Text text={realTask.description} size="sm" />
+                    <Button
+                      id="start_scenario"
+                      text={'Start Now'}
+                      onClick={() => sendTask(realTask)}
+                      iconRight={<SendIcon />}
+                      className={styles.nm_button}
+                    />
+                  </div>
+                );
+              } else return <></>;
+            })}
+            {isInterviewer && areAllTasksSend && !isRecordingFinished && (
+              <EndRecording
+                stopRecTitle={stopRecTitle}
+                stopRecDescription={stopRecDescription}
+                stopRecCTA={stopRecCTA}
+                stopRecording={stopRecording}
+              />
+            )}
+            {isInterviewer &&
+              isRecordingFinished &&
+              isSus &&
+              areAllTasksSend && (
+                <SusExplanation
+                  title={SusExplanationTitle}
+                  description={SusExplanationDescription}
+                />
+              )}
+            <div ref={refTask} />
+          </div>
+        </div>
+      </Grid>
+    );
+  } else
+    return (
+      <Grid
+        container
+        item
+        xs={3}
+        direction="column"
+        className={`${className ?? ''} ${styles.chatContainer}`}
+        {...props}
+      >
+        <div
+          className={`${styles.scrolling_content} ${styles.no_scrollbar} ${customContentClassname}`}
+        >
+          {chatTitle && <Text text={chatTitle} weight="bold" size="lg" />}
+
+          <div
+            className={`${styles.tasks_container}
+          ${customScrollingClassname}`}
+          >
+            {welcomeTitle && welcomeDescription && !isInterviewer && (
+              <WelcomeMessage
+                title={welcomeTitle}
+                description={welcomeDescription}
+              />
+            )}
+            {messages &&
+              messages.map((message) => {
+                if (message && message.type === 'normal') {
+                  if (
+                    (message.from.identity === 'interviewee' &&
+                      isInterviewer) ||
+                    (message.from.identity === 'interviewer' && !isInterviewer)
+                  )
+                    return (
+                      <div className={styles.user_message_container}>
+                        <div className={styles.bot_indicator}>
+                          <Title
+                            text={`${message.from.name
+                              .split(' ')
+                              .map((n: string[]) => n[0])
+                              .join('')}`}
+                            weight="bold"
+                            color="white"
+                            size="sm"
+                          />
+                        </div>
+                        <div className={styles.message_chatbot}>
+                          <div className={styles.not_user_text_message}>
+                            <div
+                              dangerouslySetInnerHTML={{
+                                __html: replaceURLs(message.body) ?? '',
+                              }}
+                              className={styles.user_text}
+                            />
+                          </div>
+                          <Text
+                            text={new Date(
+                              message.createdAt
+                            ).toLocaleTimeString()}
+                            size="xs"
+                            color="grey"
+                            className={styles.user_text_message_username}
+                          />
+                        </div>
+                      </div>
+                    );
+                  else if (
+                    (message.from.identity === 'interviewee' &&
+                      !isInterviewer) ||
+                    (message.from.identity === 'interviewer' && isInterviewer)
+                  )
+                    return (
+                      <div className={styles.user_message_container}>
+                        <div className={styles.message_chatbot}>
+                          <div className={styles.user_text_message}>
+                            <div
+                              dangerouslySetInnerHTML={{
+                                __html: replaceURLs(message.body) ?? '',
+                              }}
+                              className={styles.user_text}
+                            />
+                          </div>
+                          <Text
+                            text={new Date(
+                              message.createdAt
+                            ).toLocaleTimeString()}
+                            size="xs"
+                            color="grey"
+                            className={styles.user_text_message_username_left}
+                          />
+                        </div>
+                        <div className={styles.user_indicator}>
+                          <Title
+                            text={`${message.from.name
+                              .split(' ')
+                              .map((n: string[]) => n[0])
+                              .join('')}`}
+                            weight="bold"
+                            color="white"
+                            size="sm"
+                          />
+                        </div>
+                      </div>
+                    );
+                  else return <></>;
+                } else return <></>;
+              })}
+            <div ref={refMsg} />
+          </div>
+          {chatInputPlaceholder &&
+            typeof chatInputValue === 'string' &&
+            chatInputonChange && (
+              <ChatInput
+                placeholder={chatInputPlaceholder}
+                value={chatInputValue}
+                onChange={chatInputonChange}
+                sendMessage={sendMessage}
+              />
+            )}
+        </div>
+      </Grid>
+    );
+};