feat (chat task): Minor enhancements to chat task view.

Signed-off-by: Kshitij Fadnis <[email protected]>

package.json

@@ -43,7 +43,7 @@
     "@carbon/react": "1.75.0",
     "d3": "^7.8.4",
     "date-fns": "^2.30.0",
-    "dompurify": "3.1.7",
+    "dompurify": "3.2.4",
     "html-react-parser": "^5.1.1",
     "lodash": "^4.17.21",
     "next": "^14.1.1",

src/components/chatline/ChatLine.module.scss

@@ -34,7 +34,7 @@
 }
 
 .latestResponse {
-  margin-bottom: 3rem;
+  margin-bottom: $spacing-12;
 }
 
 .baloon {

src/components/chatline/ChatLine.tsx

@@ -74,7 +74,7 @@ function ToolResponse({
   return (
     <div className={cx(classes.message, classes.toolResponse)}>
       <span>
-        Tool ID: {message.tool_id}&nbsp;
+        Tool Call ID: {message.tool_call_id}&nbsp;
         {message.name ? <span>({message.name})</span> : null}
       </span>
       {message.type === 'documents' && Array.isArray(message.content) ? (

src/components/comments/AddCommentModal.tsx

@@ -45,7 +45,10 @@ export default function AddCommentModal({
   const [author, setAuthor] = useState<string>('');
   const [tag, tagType] = useMemo(() => {
     if (provenance) {
-      if (provenance.component.includes('input')) {
+      if (
+        provenance.component.includes('input') ||
+        provenance.component.includes('messages')
+      ) {
         return ['Input', 'purple'];
       } else if (provenance.component.includes('document_')) {
         return ['Contexts', 'cyan'];

src/components/comments/CommentsViewer.tsx

@@ -56,7 +56,10 @@ function Comment({
 
   const [tag, tagType]: [string, string] = useMemo(() => {
     if (comment.provenance) {
-      if (comment.provenance.component.includes('input')) {
+      if (
+        comment.provenance.component.includes('input') ||
+        comment.provenance.component.includes('messages')
+      ) {
         return ['Input', 'purple'];
       } else if (comment.provenance.component.includes('document_')) {
         return ['Contexts', 'cyan'];

src/components/task-copier/ChatTaskCopier.tsx

@@ -0,0 +1,259 @@
+/**
+ *
+ * Copyright 2023-2025 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Modal, RadioTile, CodeSnippet } from '@carbon/react';
+
+import { Metric, Model, Task, TaskEvaluation, Message } from '@/src/types';
+import { WarningAlt } from '@carbon/icons-react';
+
+import classes from './TaskCopier.module.scss';
+
+interface Props {
+  models: Model[];
+  metrics: Metric[];
+  task: Task;
+  evaluations: TaskEvaluation[];
+  onClose: Function;
+  open: boolean;
+}
+
+function prepareTextForMessage(message: Message) {
+  // Step 1: Initialize necessary variable
+  let text = '';
+
+  // Step 2: Extract text from message object
+  // Step 2.a: If message with "tool" role
+  if (message.role === 'tool') {
+    text += JSON.stringify({
+      tool_call_id: message['tool_call_id'],
+      content: message.content,
+    });
+  }
+  // Step 2.b: If message with "assistant" role and with "tool_calls"
+  else if (
+    message.role === 'assistant' &&
+    message.hasOwnProperty('tool_calls')
+  ) {
+    text += JSON.stringify(message['tool_calls']);
+  }
+  // Step 2.c: Default extraction policy
+  else {
+    text +=
+      typeof message.content === 'string'
+        ? message.content
+        : JSON.stringify(message.content);
+  }
+
+  // Step 3: Return
+  return text;
+}
+
+function prepareText(
+  models: Model[],
+  metrics: Metric[],
+  task: Task,
+  evaluations: TaskEvaluation[],
+): string {
+  const separator = '=======================================================\n';
+  let input, responses;
+
+  // Step 1: Prepare input
+  input = `${separator}Input\n${separator}`;
+  if (Array.isArray(task.input)) {
+    task.input.map(
+      (message) =>
+        (input += `${message.role}: ${prepareTextForMessage(message)}\n`),
+    );
+  }
+
+  // Step 2: Prepare responses
+  if (evaluations && evaluations.length) {
+    responses = `${separator}Responses\n${separator}`;
+    const responseSeparator =
+      '\n-------------------------------------------------------\n';
+    evaluations.forEach((evaluation) => {
+      const model = models.find(
+        (entry) => entry.modelId === evaluation.modelId,
+      );
+      responses += `${model ? model.name.trim() : evaluation.modelId.trim()}${responseSeparator}${evaluation.modelResponse.trim()}\n${separator}`;
+    });
+  }
+
+  return `${input.trim()}\n${responses ? responses : ''}`;
+}
+
+function prepareLaTEXT(
+  models: Model[],
+  metrics: Metric[],
+  task: Task,
+  evaluations: TaskEvaluation[],
+): string {
+  let input, responses;
+
+  // Step 1: Prepare input
+  input =
+    '\\multicolumn{1}{|c|}{\\textbf{Conversation}} \\\\ \n\t\\toprule \n\t';
+  if (Array.isArray(task.input)) {
+    task.input.map(
+      (message) =>
+        (input += `\\textbf{${
+          message.role
+        }}: ${prepareTextForMessage(message)} \\\\ \n\t`),
+    );
+  }
+
+  // Step 2: Prepare responses
+  if (evaluations && evaluations.length) {
+    responses =
+      '\\toprule \n\t\\multicolumn{1}{|c|}{\\textbf{Responses}} \\\\ \n\t';
+    evaluations.forEach((evaluation) => {
+      const model = models.find(
+        (entry) => entry.modelId === evaluation.modelId,
+      );
+      responses += `\\toprule \n\t\\textbf{${model ? model.name.trim() : evaluation.modelId.trim()}} \\\\ \n\t\\midrule \n\t${evaluation.modelResponse.trim()} \\\\ \n\t`;
+    });
+    responses += '\\bottomrule \n\t';
+  }
+
+  return `\\begin{table*}\n\\small\n\t\\begin{tabular}{p{15.5cm}}\n\t\\toprule\n\t${input}${responses ? responses : ''}\\end{tabular}\n\\end{table*}`;
+}
+
+function prepareJSON(
+  models: Model[],
+  metrics: Metric[],
+  task: Task,
+  evaluations: TaskEvaluation[],
+): string {
+  return JSON.stringify(
+    {
+      input: task.input,
+      responses: evaluations.map((evaluation) => {
+        const model = models.find(
+          (entry) => entry.modelId === evaluation.modelId,
+        );
+        return {
+          model: model ? model.name : evaluation.modelId,
+          response: evaluation.modelResponse,
+        };
+      }),
+    },
+    null,
+    2,
+  );
+}
+
+export default function ChatTaskCopierModal({
+  models,
+  metrics,
+  task,
+  evaluations,
+  onClose,
+  open = false,
+}: Props) {
+  const [format, setFormat] = useState<'Text' | 'JSON' | 'LaTEX'>('Text');
+
+  const textToCopy = useMemo(() => {
+    let text;
+    if (format === 'Text') {
+      text = prepareText(models, metrics, task, evaluations);
+    } else if (format === 'LaTEX') {
+      text = prepareLaTEXT(models, metrics, task, evaluations);
+    } else {
+      text = prepareJSON(models, metrics, task, evaluations);
+    }
+
+    return text;
+  }, [models, metrics, task, evaluations, format]);
+
+  return (
+    <Modal
+      open={open}
+      modalLabel="Copy task details to clipboard"
+      primaryButtonText="Copy"
+      secondaryButtonText="Cancel"
+      onRequestSubmit={() => {
+        //Step 1: Copy to clipboard
+        navigator.clipboard.writeText(textToCopy);
+
+        // Step 2: Close model
+        onClose();
+      }}
+      onRequestClose={() => {
+        onClose();
+      }}
+    >
+      <div className={classes.container}>
+        <span className={classes.heading}>Select a format</span>
+        <div className={classes.copyFormatSelectors}>
+          <RadioTile
+            id={'formatSelector--text'}
+            value={'Text'}
+            checked={format === 'Text'}
+            onClick={() => {
+              setFormat('Text');
+            }}
+          >
+            Text
+          </RadioTile>
+          <RadioTile
+            id={'formatSelector--json'}
+            value={'JSON'}
+            checked={format === 'JSON'}
+            onClick={() => {
+              setFormat('JSON');
+            }}
+          >
+            JSON
+          </RadioTile>
+          <RadioTile
+            id={'formatSelector--latex'}
+            value={'LaTex'}
+            checked={format === 'LaTEX'}
+            onClick={() => {
+              setFormat('LaTEX');
+            }}
+          >
+            LaTex
+          </RadioTile>
+        </div>
+        <span className={classes.heading}>Preview</span>
+        <CodeSnippet
+          type="multi"
+          hideCopyButton={true}
+          wrapText={true}
+          className={classes.previewBox}
+        >
+          {textToCopy}
+        </CodeSnippet>
+        {format === 'LaTEX' && (
+          <div className={classes.warningContainer}>
+            <WarningAlt />
+            <span>&nbsp;Please make sure you add booktab package via</span>
+            <CodeSnippet type={'inline'}>
+              {'\\usepackage{booktabs}'}
+            </CodeSnippet>
+            <span> to your LaTEX project.</span>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

src/{views/task/TaskCopier.tsx → components/task-copier/RAGTaskCopier.tsx}

@@ -72,6 +72,23 @@ function prepareText(
         );
       }
     }
+  } else if (task.taskType === 'chat') {
+    if (typeof task.input === 'string') {
+      input = `${separator}Question: ${task.input.trim()}`;
+    } else if (Array.isArray(task.input)) {
+      if (task.input.length == 1) {
+        input = `${separator}Question: ${task.input[0]['text'].trim()}`;
+      } else {
+        input = `${separator}Conversation\n${separator}`;
+        task.input.map(
+          (utterance) =>
+            (input += `${
+              utterance.speaker.charAt(0).toUpperCase() +
+              utterance.speaker.slice(1).toLowerCase()
+            }: ${utterance.text.trim()}\n`),
+        );
+      }
+    }
   }
 
   // Step 2: Prepare context
@@ -191,7 +208,7 @@ function prepareJSON(
   );
 }
 
-export default function TaskCopierModal({
+export default function RAGTaskCopierModal({
   models,
   metrics,
   task,

src/components/task-copier/TaskCopier.tsx

@@ -0,0 +1,85 @@
+/**
+ *
+ * Copyright 2023-2025 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import {
+  Metric,
+  Model,
+  Task,
+  RetrievedDocument,
+  TaskEvaluation,
+} from '@/src/types';
+
+import RAGTaskCopierModal from './RAGTaskCopier';
+import ChatTaskCopierModal from './ChatTaskCopier';
+import TextGenerationTaskCopierModal from './TextGenerationTaskCopier';
+
+interface Props {
+  models: Model[];
+  metrics: Metric[];
+  task: Task;
+  evaluations: TaskEvaluation[];
+  onClose: Function;
+  open: boolean;
+  documents?: RetrievedDocument[];
+}
+
+export default function TaskCopierModal({
+  models,
+  metrics,
+  task,
+  evaluations,
+  onClose,
+  open = false,
+  documents,
+}: Props) {
+  return (
+    <>
+      {task.taskType === 'rag' ? (
+        <RAGTaskCopierModal
+          models={models}
+          metrics={metrics}
+          task={task}
+          evaluations={evaluations}
+          onClose={onClose}
+          open={open}
+          documents={documents}
+        />
+      ) : task.taskType === 'chat' ? (
+        <ChatTaskCopierModal
+          models={models}
+          metrics={metrics}
+          task={task}
+          evaluations={evaluations}
+          onClose={onClose}
+          open={open}
+        />
+      ) : task.taskType === 'text_generation' ? (
+        <TextGenerationTaskCopierModal
+          models={models}
+          metrics={metrics}
+          task={task}
+          evaluations={evaluations}
+          onClose={onClose}
+          open={open}
+        />
+      ) : null}
+    </>
+  );
+}

src/components/task-copier/TextGenerationTaskCopier.tsx

@@ -0,0 +1,223 @@
+/**
+ *
+ * Copyright 2023-2025 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Modal, RadioTile, CodeSnippet } from '@carbon/react';
+
+import {
+  Metric,
+  Model,
+  Task,
+  RetrievedDocument,
+  TaskEvaluation,
+} from '@/src/types';
+import { WarningAlt } from '@carbon/icons-react';
+
+import classes from './TaskCopier.module.scss';
+
+interface Props {
+  models: Model[];
+  metrics: Metric[];
+  task: Task;
+  evaluations: TaskEvaluation[];
+  onClose: Function;
+  open: boolean;
+}
+
+function prepareText(
+  models: Model[],
+  metrics: Metric[],
+  task: Task,
+  evaluations: TaskEvaluation[],
+): string {
+  const separator = '=======================================================\n';
+  let input, context, responses;
+
+  // Step 1: Prepare input
+  if (typeof task.input === 'string') {
+    input = `${separator}Input\n${separator}${task.input.trim()}`;
+  }
+
+  // Step 2: Prepare responses
+  if (evaluations && evaluations.length) {
+    responses = `${separator}Responses\n${separator}`;
+    const responseSeparator =
+      '\n-------------------------------------------------------\n';
+    evaluations.forEach((evaluation) => {
+      const model = models.find(
+        (entry) => entry.modelId === evaluation.modelId,
+      );
+      responses += `${model ? model.name.trim() : evaluation.modelId.trim()}${responseSeparator}${evaluation.modelResponse.trim()}\n${separator}`;
+    });
+  }
+
+  return `${input.trim()}\n${responses ? responses : ''}`;
+}
+
+function prepareLaTEXT(
+  models: Model[],
+  metrics: Metric[],
+  task: Task,
+  evaluations: TaskEvaluation[],
+): string {
+  let input, context, responses;
+
+  // Step 1: Prepare input
+  if (typeof task.input === 'string') {
+    input = `\\multicolumn{1}{|c|}{\\textbf{Input}} \\\\ \n\t\\toprule \n\t${task.input.trim()}  \\\\ \n\t`;
+  }
+
+  // Step 2: Prepare responses
+  if (evaluations && evaluations.length) {
+    responses =
+      '\\toprule \n\t\\multicolumn{1}{|c|}{\\textbf{Responses}} \\\\ \n\t';
+    evaluations.forEach((evaluation) => {
+      const model = models.find(
+        (entry) => entry.modelId === evaluation.modelId,
+      );
+      responses += `\\toprule \n\t\\textbf{${model ? model.name.trim() : evaluation.modelId.trim()}} \\\\ \n\t\\midrule \n\t${evaluation.modelResponse.trim()} \\\\ \n\t`;
+    });
+    responses += '\\bottomrule \n\t';
+  }
+
+  return `\\begin{table*}\n\\small\n\t\\begin{tabular}{p{15.5cm}}\n\t\\toprule\n\t${input}${responses ? responses : ''}\\end{tabular}\n\\end{table*}`;
+}
+
+function prepareJSON(
+  models: Model[],
+  metrics: Metric[],
+  task: Task,
+  evaluations: TaskEvaluation[],
+): string {
+  return JSON.stringify(
+    {
+      input: task.input,
+      responses: evaluations.map((evaluation) => {
+        const model = models.find(
+          (entry) => entry.modelId === evaluation.modelId,
+        );
+        return {
+          model: model ? model.name : evaluation.modelId,
+          response: evaluation.modelResponse,
+        };
+      }),
+    },
+    null,
+    2,
+  );
+}
+
+export default function TextGenerationTaskCopierModal({
+  models,
+  metrics,
+  task,
+  evaluations,
+  onClose,
+  open = false,
+}: Props) {
+  const [format, setFormat] = useState<'Text' | 'JSON' | 'LaTEX'>('Text');
+
+  const textToCopy = useMemo(() => {
+    let text;
+    if (format === 'Text') {
+      text = prepareText(models, metrics, task, evaluations);
+    } else if (format === 'LaTEX') {
+      text = prepareLaTEXT(models, metrics, task, evaluations);
+    } else {
+      text = prepareJSON(models, metrics, task, evaluations);
+    }
+
+    return text;
+  }, [models, metrics, task, evaluations, format]);
+
+  return (
+    <Modal
+      open={open}
+      modalLabel="Copy task details to clipboard"
+      primaryButtonText="Copy"
+      secondaryButtonText="Cancel"
+      onRequestSubmit={() => {
+        //Step 1: Copy to clipboard
+        navigator.clipboard.writeText(textToCopy);
+
+        // Step 2: Close model
+        onClose();
+      }}
+      onRequestClose={() => {
+        onClose();
+      }}
+    >
+      <div className={classes.container}>
+        <span className={classes.heading}>Select a format</span>
+        <div className={classes.copyFormatSelectors}>
+          <RadioTile
+            id={'formatSelector--text'}
+            value={'Text'}
+            checked={format === 'Text'}
+            onClick={() => {
+              setFormat('Text');
+            }}
+          >
+            Text
+          </RadioTile>
+          <RadioTile
+            id={'formatSelector--json'}
+            value={'JSON'}
+            checked={format === 'JSON'}
+            onClick={() => {
+              setFormat('JSON');
+            }}
+          >
+            JSON
+          </RadioTile>
+          <RadioTile
+            id={'formatSelector--latex'}
+            value={'LaTex'}
+            checked={format === 'LaTEX'}
+            onClick={() => {
+              setFormat('LaTEX');
+            }}
+          >
+            LaTex
+          </RadioTile>
+        </div>
+        <span className={classes.heading}>Preview</span>
+        <CodeSnippet
+          type="multi"
+          hideCopyButton={true}
+          wrapText={true}
+          className={classes.previewBox}
+        >
+          {textToCopy}
+        </CodeSnippet>
+        {format === 'LaTEX' && (
+          <div className={classes.warningContainer}>
+            <WarningAlt />
+            <span>&nbsp;Please make sure you add booktab package via</span>
+            <CodeSnippet type={'inline'}>
+              {'\\usepackage{booktabs}'}
+            </CodeSnippet>
+            <span> to your LaTEX project.</span>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

src/types.ts

@@ -167,7 +167,7 @@ export interface ToolCall {
   children?: string[];
 }
 
-interface Step {
+export interface MessageStep {
   id: string;
   input: any;
   output: any;
@@ -203,7 +203,7 @@ export interface ToolMessageDocument {
 }
 export interface ToolMessage extends Message {
   role: 'tool';
-  tool_id: string;
+  tool_call_id: string;
   type?: 'text' | 'documents' | 'json';
   content: string | object | ToolMessageDocument[];
 }
@@ -212,7 +212,7 @@ export interface AssistantMessage extends Message {
   role: 'assistant';
   refusal?: string;
   tool_calls?: ToolCall[];
-  steps?: Step[];
+  steps?: MessageStep[];
 }
 
 // ===================================================================================
@@ -273,6 +273,7 @@ export interface TaskEvaluation {
     [key: string]: { [key: string]: Annotation };
   };
   readonly contexts?: RetrievedDocument[];
+  readonly steps?: MessageStep[];
   [key: string]: any;
 }
 

src/views/data-characteristics/DataCharacteristics.tsx

@@ -88,7 +88,10 @@ function computeWordCount(tasks: Task[], filters: string[]) {
       task.input.forEach((turn) => {
         if (turn.hasOwnProperty('text') && turn.text) {
           text += turn.text.trim();
-        } else if (turn.hasOwnProperty('content') && turn.content) {
+        } else if (
+          turn.hasOwnProperty('content') &&
+          typeof turn.content === 'string'
+        ) {
           text += turn.content.trim();
         }
       });

src/views/task/ChatTask.module.scss

@@ -60,3 +60,17 @@
 .responseContainer {
   line-height: 1.4em;
 }
+
+.evaluationContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-03;
+  overflow: auto;
+}
+
+.stepContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-03;
+  overflow: auto;
+}

src/views/task/ChatTask.tsx

@@ -32,13 +32,13 @@ import {
   ContainedListItem,
 } from '@carbon/react';
 
-import { Model, TaskEvaluation, Task, Metric } from '@/src/types';
+import { Model, TaskEvaluation, Task, Metric, MessageStep } from '@/src/types';
 import { useDataStore } from '@/src/store';
 import { truncate } from '@/src/utilities/strings';
 
 import AnnotationsTable from '@/src/views/annotations-table/AnnotationsTable';
 import ChatLine from '@/src/components/chatline/ChatLine';
-import TaskCopierModal from '@/src/views/task/TaskCopier';
+import ChatTaskCopierModal from '@/src/components/task-copier/ChatTaskCopier';
 
 import classes from './ChatTask.module.scss';
 
@@ -54,6 +54,55 @@ interface Props {
   updateCommentProvenance: Function;
 }
 
+// ===================================================================================
+//                               RENDER FUNCTIONS
+// ===================================================================================
+
+function Evaluation({
+  evaluation,
+  hMetrics,
+  aMetrics,
+}: {
+  evaluation: TaskEvaluation;
+  hMetrics: Map<string, Metric>;
+  aMetrics: Map<string, Metric>;
+}) {
+  return (
+    <div className={classes.evaluationContainer}>
+      {evaluation.annotations && hMetrics.size ? (
+        <>
+          <h5>Human Evaluations:</h5>
+          <AnnotationsTable
+            annotations={evaluation.annotations}
+            metrics={[...hMetrics.values()]}
+          ></AnnotationsTable>
+        </>
+      ) : null}
+      {evaluation.annotations && aMetrics.size ? (
+        <>
+          <h5>Algorithmic Evaluations:</h5>
+          <AnnotationsTable
+            annotations={evaluation.annotations}
+            metrics={[...aMetrics.values()]}
+          ></AnnotationsTable>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function Steps({ steps }: { steps?: MessageStep[] }) {
+  return (
+    <div className={classes.stepsContainer}>
+      {steps && !isEmpty(steps) ? (
+        <></>
+      ) : (
+        <h4>No steps information is available.</h4>
+      )}
+    </div>
+  );
+}
+
 // ===================================================================================
 //                               MAIN FUNCTION
 // ===================================================================================
@@ -68,7 +117,6 @@ export default function ChatTask({
   // Step 1: Initialize state and necessary variables
   const [selectedEvaluationIndex, setSelectedEvaluationIndex] =
     useState<number>(0);
-  const [activeDocumentIndex, setActiveDocumentIndex] = useState<number>(0);
 
   // Step 2: Run effects
   // Step 2.a: Fetch data from data store
@@ -103,10 +151,21 @@ export default function ChatTask({
     return [humanMetrics, algorithmicMetrics];
   }, [metrics]);
 
-  console.log(task);
   // Step 3: Render
   return (
     <>
+      {models && metrics && task && evaluations && (
+        <ChatTaskCopierModal
+          open={taskCopierModalOpen}
+          models={Array.from(models.values())}
+          metrics={metrics}
+          task={task}
+          evaluations={evaluations}
+          onClose={() => {
+            setTaskCopierModalOpen(false);
+          }}
+        ></ChatTaskCopierModal>
+      )}
       {task && models && evaluations && (
         <>
           <div className={classes.inputContainer}>
@@ -117,7 +176,18 @@ export default function ChatTask({
                     messageId={`data_point__message--${messageIdx}`}
                     message={message}
                     onSelection={updateCommentProvenance}
-                    focused={false}
+                    focused={
+                      Array.isArray(task.input) &&
+                      messageIdx === task.input.length - 1
+                        ? true
+                        : false
+                    }
+                    latestResponse={
+                      Array.isArray(task.input) &&
+                      messageIdx === task.input.length - 1
+                        ? true
+                        : false
+                    }
                   ></ChatLine>
                 ))
               : null}
@@ -129,14 +199,9 @@ export default function ChatTask({
             <Tabs
               onChange={(e) => {
                 setSelectedEvaluationIndex(e.selectedIndex);
-                setActiveDocumentIndex(0);
               }}
             >
-              <TabList
-                className={classes.tabList}
-                aria-label="Models tab"
-                contained
-              >
+              <TabList aria-label="Models tab" contained>
                 {evaluations.map((evaluation) => (
                   <Tab key={'model-' + evaluation.modelId}>
                     {truncate(
@@ -207,24 +272,43 @@ export default function ChatTask({
                           )}
                         </ContainedList>
                       ) : null}
-                      {evaluation.annotations && hMetrics.size ? (
-                        <>
-                          <h5>Human Evaluations:</h5>
-                          <AnnotationsTable
-                            annotations={evaluation.annotations}
-                            metrics={[...hMetrics.values()]}
-                          ></AnnotationsTable>
-                        </>
-                      ) : null}
-                      {evaluation.annotations && aMetrics.size ? (
-                        <>
-                          <h5>Algorithmic Evaluations:</h5>
-                          <AnnotationsTable
-                            annotations={evaluation.annotations}
-                            metrics={[...aMetrics.values()]}
-                          ></AnnotationsTable>
-                        </>
-                      ) : null}
+
+                      <Tabs>
+                        <TabList
+                          aria-label="Model performance tab"
+                          contained
+                          fullWidth
+                        >
+                          <Tab
+                            key={'model-' + evaluation.modelId + '-evaluations'}
+                          >
+                            Evaluations
+                          </Tab>
+                          <Tab key={'model-' + evaluation.modelId + '-steps'}>
+                            Steps
+                          </Tab>
+                        </TabList>
+                        <TabPanels>
+                          <TabPanel
+                            key={
+                              'model-' +
+                              evaluation.modelId +
+                              '-evaluations-panel'
+                            }
+                          >
+                            <Evaluation
+                              evaluation={evaluation}
+                              hMetrics={hMetrics}
+                              aMetrics={aMetrics}
+                            />
+                          </TabPanel>
+                          <TabPanel
+                            key={'model-' + evaluation.modelId + '-steps-panel'}
+                          >
+                            <Steps steps={evaluation.steps} />
+                          </TabPanel>
+                        </TabPanels>
+                      </Tabs>
                     </div>
                   </TabPanel>
                 ))}

src/views/task/RAGTask.tsx

@@ -49,7 +49,7 @@ import { mark } from '@/src/utilities/highlighter';
 
 import DocumentPanel from '@/src/views/document/DocumentPanel';
 import AnnotationsTable from '@/src/views/annotations-table/AnnotationsTable';
-import TaskCopierModal from '@/src/views/task/TaskCopier';
+import RAGTaskCopierModal from '@/src/components/task-copier/RAGTaskCopier';
 
 import classes from './RAGTask.module.scss';
 
@@ -192,7 +192,7 @@ export default function RAGTask({
   return (
     <>
       {models && metrics && task && evaluations && (
-        <TaskCopierModal
+        <RAGTaskCopierModal
           open={taskCopierModalOpen}
           models={Array.from(models.values())}
           metrics={metrics}
@@ -202,7 +202,7 @@ export default function RAGTask({
           onClose={() => {
             setTaskCopierModalOpen(false);
           }}
-        ></TaskCopierModal>
+        ></RAGTaskCopierModal>
       )}
 
       {task && models && evaluations && (

src/views/task/Task.module.scss

@@ -36,7 +36,7 @@
 }
 
 .taskContainer {
-  height: calc(100vh - 9rem);
+  height: calc(100vh - 10rem);
   background-color: var(--cds-background);
   margin: $spacing-03 0;
   display: flex;

src/views/task/TextGenerationTask.tsx

@@ -40,7 +40,7 @@ import { truncate, overlaps } from '@/src/utilities/strings';
 import { mark } from '@/src/utilities/highlighter';
 
 import AnnotationsTable from '@/src/views/annotations-table/AnnotationsTable';
-import TaskCopierModal from '@/src/views/task/TaskCopier';
+import TextGenerationTaskCopierModal from '@/src/components/task-copier/TextGenerationTaskCopier';
 
 import classes from './TextGenerationTask.module.scss';
 
@@ -117,7 +117,7 @@ export default function TextGenerationTask({
   return (
     <>
       {models && metrics && task && evaluations && (
-        <TaskCopierModal
+        <TextGenerationTaskCopierModal
           open={taskCopierModalOpen}
           models={Array.from(models.values())}
           metrics={metrics}
@@ -126,7 +126,7 @@ export default function TextGenerationTask({
           onClose={() => {
             setTaskCopierModalOpen(false);
           }}
-        ></TaskCopierModal>
+        ></TextGenerationTaskCopierModal>
       )}
 
       {task && models && evaluations && (

yarn.lock

@@ -1979,12 +1979,7 @@ [email protected], domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
-dompurify@3.1.7:
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.7.tgz#711a8c96479fb6ced93453732c160c3c72418a6a"
-  integrity sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==
-
-dompurify@^3.2.4:
+dompurify@3.2.4, dompurify@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.4.tgz#af5a5a11407524431456cf18836c55d13441cd8e"
   integrity sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==