Use Chakra UI for Messages

website/src/components/FlaggableElement.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   Checkbox,
   Flex,
+  Grid,
   Popover,
   PopoverAnchor,
   PopoverArrow,
@@ -15,6 +16,7 @@ import {
   SliderTrack,
   Spacer,
   useBoolean,
+  useId,
 } from "@chakra-ui/react";
 import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
@@ -65,58 +67,47 @@ export const FlaggableElement = (props) => {
       isLazy
       lazyBehavior="keepMounted"
     >
-      <div className="inline-block float-left">
+      <Grid templateColumns="1fr min-content" gap={2}>
         <PopoverAnchor>{props.children}</PopoverAnchor>
         <PopoverTrigger>
-          <Button color="transparent">
+          <Button h="full">
-            <FlagIcon
+            <FlagIcon className="w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
-              className="h-5 w-5 ml-3 align-center text-gray-400 group-hover:text-gray-500"
-              aria-hidden="true"
-            />
           </Button>
         </PopoverTrigger>
-      </div>
+      </Grid>
 
       <PopoverContent width="fit-content">
         <PopoverArrow />
-        <PopoverCloseButton />
+        <div className="relative h-4">
-        <div className="flex mt-3 ">
+          <PopoverCloseButton />
-          <PopoverBody>
-            <ul>
-              {TEXT_LABEL_FLAGS.map((option, i) => {
-                return (
-                  <FlagCheckboxLi
-                    option={option}
-                    key={i}
-                    idx={i}
-                    checkboxValues={checkboxValues}
-                    sliderValues={sliderValues}
-                    checkboxHandler={handleCheckboxState}
-                    sliderHandler={handleSliderState}
-                  ></FlagCheckboxLi>
-                );
-              })}
-            </ul>
-            <div className="flex justify-center ml-auto">
-              <Button
-                isDisabled={
-                  !checkboxValues.reduce((all, current) => {
-                    return all | current;
-                  }, false)
-                }
-                onClick={() => submitResponse()}
-                className="bg-indigo-600 text-black hover:bg-indigo-700"
-              >
-                Report
-              </Button>
-            </div>
-          </PopoverBody>
         </div>
+        <PopoverBody>
+          {TEXT_LABEL_FLAGS.map((option, i) => (
+            <FlagCheckbox
+              option={option}
+              key={i}
+              idx={i}
+              checkboxValues={checkboxValues}
+              sliderValues={sliderValues}
+              checkboxHandler={handleCheckboxState}
+              sliderHandler={handleSliderState}
+            />
+          ))}
+          <Flex justify="center">
+            <Button
+              isDisabled={!checkboxValues.some(Boolean)}
+              onClick={submitResponse}
+              className="bg-indigo-600 text-black hover:bg-indigo-700"
+            >
+              Report
+            </Button>
+          </Flex>
+        </PopoverBody>
       </PopoverContent>
     </Popover>
   );
 };
-function FlagCheckboxLi(props: {
+function FlagCheckbox(props: {
   option: textFlagLabels;
   idx: number;
   checkboxValues: boolean[];
@@ -136,37 +127,35 @@ function FlagCheckboxLi(props: {
     );
   }
 
+  const id = useId();
+
   return (
-    <li>
+    <Flex gap={1}>
-      <Flex>
+      <Checkbox
-        <Checkbox
+        id={id}
-          onChange={(e) => {
+        onChange={(e) => {
-            props.checkboxHandler(e.target.checked, props.idx);
+          props.checkboxHandler(e.target.checked, props.idx);
-          }}
+        }}
-        />
+      />
-        <label
+      <label className="text-sm form-check-label" htmlFor={id}>
-          className=" ml-1 mr-1 text-sm form-check-label  hover:cursor-pointer"
+        <span className="text-gray-800 hover:text-blue-700 float-left">{props.option.labelText}</span>
-          htmlFor={props.option.attributeName}
+        {AdditionalExplanation}
-        >
+      </label>
-          <span className="text-gray-800 hover:text-blue-700 float-left">{props.option.labelText}</span>
+      <Spacer />
-          {AdditionalExplanation}
+      <Slider
-        </label>
+        width="100px"
-        <Spacer />
+        isDisabled={!props.checkboxValues[props.idx]}
-        <Slider
+        defaultValue={100}
-          width="100px"
+        onChangeEnd={(val) => {
-          isDisabled={!props.checkboxValues[props.idx]}
+          props.sliderHandler(val / 100, props.idx);
-          defaultValue={100}
+        }}
-          onChangeEnd={(val) => {
+      >
-            props.sliderHandler(val / 100, props.idx);
+        <SliderTrack>
-          }}
+          <SliderFilledTrack />
-        >
+          <SliderThumb />
-          <SliderTrack>
+        </SliderTrack>
-            <SliderFilledTrack />
+      </Slider>
-            <SliderThumb />
+    </Flex>
-          </SliderTrack>
-        </Slider>
-      </Flex>
-    </li>
   );
 }
 interface textFlagLabels {

website/src/components/Messages.tsx

@@ -1,3 +1,4 @@
+import { Grid } from "@chakra-ui/react";
 import { FlaggableElement } from "./FlaggableElement";
 
 export interface Message {
@@ -10,18 +11,13 @@ const getColor = (isAssistant: boolean) => (isAssistant ? "bg-slate-800" : "bg-s
 export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => {
   const items = messages.map(({ text, is_assistant }: Message, i: number) => {
     return (
-      <div className="flex" key={i + text}>
+      <FlaggableElement text={text} post_id={post_id} key={i + text}>
-        <FlaggableElement text={text} post_id={post_id}>
+        <div key={i + text} className={`${getColor(is_assistant)} p-4 rounded-md text-white whitespace-pre-wrap`}>
-          <div
+          {text}
-            key={i + text}
+        </div>
-            className={`${getColor(is_assistant)} p-4 my-1 rounded-xl text-white whitespace-pre-wrap float-left mr-3`}
+      </FlaggableElement>
-          >
-            {text}
-          </div>
-        </FlaggableElement>
-      </div>
     );
   });
   // Maybe also show a legend of the colors?
-  return <>{items}</>;
+  return <Grid gap={2}>{items}</Grid>;
 };