Merge pull request #959 from LAION-AI/oasst-header

Send `x-oasst-user` header to backend

website/src/components/Messages/MessageTableEntry.tsx

@@ -34,7 +34,7 @@ interface MessageTableEntryProps {
 
 export function MessageTableEntry({ message, enabled, highlight }: MessageTableEntryProps) {
   const router = useRouter();
-  const [emojis, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
+  const [emojiState, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
   useEffect(() => {
     setEmojis({ emojis: message.emojis, user_emojis: message.user_emojis });
   }, [message.emojis, message.user_emojis]);
@@ -93,17 +93,17 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
           style={{ float: "right", position: "relative", right: "-0.3em", bottom: "-0em", marginLeft: "1em" }}
           onClick={(e) => e.stopPropagation()}
         >
-          {Object.entries(emojis.emojis).map(([emoji, count]) => (
+          {Object.entries(emojiState.emojis).map(([emoji, count]) => (
             <MessageEmojiButton
               key={emoji}
               emoji={{ name: emoji, count }}
-              checked={emojis.user_emojis.includes(emoji)}
-              onClick={() => react(emoji, !emojis.user_emojis.includes(emoji))}
+              checked={emojiState.user_emojis.includes(emoji)}
+              onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
             />
           ))}
           <MessageActions
             react={react}
-            userEmoji={emojis.user_emojis}
+            userEmoji={emojiState.user_emojis}
             onLabel={showLabelPopup}
             onReport={showReportPopup}
             messageId={message.id}

website/src/components/Survey/LabelInputGroup.tsx

@@ -211,7 +211,7 @@ export const LabelInputGroup = ({ labelIDs, onChange, isEditable = true }: Label
               }}
               alignItems="center"
             >
-              <Text>
+              <Text as="div">
                 {textA}
                 {descriptionA.length > 0 ? <Explain explanation={descriptionA} /> : null}
               </Text>
@@ -229,7 +229,7 @@ export const LabelInputGroup = ({ labelIDs, onChange, isEditable = true }: Label
                 />
               </GridItem>
               <GridItem>
-                <Text textAlign="right">
+                <Text textAlign="right" as="div">
                   {textB}
                   {descriptionB.length > 0 ? <Explain explanation={descriptionB} /> : null}
                 </Text>

website/src/components/Tasks/LabelTask/LabelTask.tsx

@@ -6,7 +6,6 @@ import { LabelInputGroup } from "src/components/Survey/LabelInputGroup";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskHeader } from "src/components/Tasks/TaskHeader";
-import { TaskType } from "src/types/Task";
 
 export const LabelTask = ({
   task,
@@ -35,14 +34,7 @@ export const LabelTask = ({
           {task.conversation ? (
             <Box mt="4" p={[4, 6]} borderRadius="lg" bg={cardColor}>
               <MessageTable
-                messages={[
-                  ...(task.conversation?.messages ?? []),
-                  {
-                    text: task.reply,
-                    is_assistant: task.type === TaskType.label_assistant_reply,
-                    message_id: task.message_id,
-                  },
-                ]}
+                messages={[...(task.conversation?.messages ?? []), task.reply_message]}
                 highlightLastMessage
               />
             </Box>