chat page

frontend/src/components/Labeled.tsx

@@ -1,5 +1,6 @@
 import {FC, ReactElement} from 'react';
 import {Label, Tooltip} from '@fluentui/react-components';
+import classnames from 'classnames';
 
 export const Labeled: FC<{
   label: string; desc?: string, content: ReactElement, flex?: boolean, spaceBetween?: boolean
@@ -11,10 +12,10 @@ export const Labeled: FC<{
         spaceBetween
       }) => {
   return (
-    <div className={
-      (flex ? 'flex' : 'grid grid-cols-2') + ' ' +
-      (spaceBetween ? 'justify-between' : '') + ' ' +
-      'items-center'
+    <div className={classnames(
+      'items-center',
+      flex ? 'flex' : 'grid grid-cols-2',
+      spaceBetween && 'justify-between')
     }>
       {desc ?
         <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="description">

frontend/src/components/NumberInput.tsx

@@ -1,5 +1,4 @@
-import React, * as React_2 from 'react';
-import {CSSProperties, FC} from 'react';
+import React, {CSSProperties, FC} from 'react';
 import {Input} from '@fluentui/react-components';
 import {SliderOnChangeData} from '@fluentui/react-slider';
 
@@ -8,7 +7,7 @@ export const NumberInput: FC<{
   min: number,
   max: number,
   step?: number,
-  onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void
   style?: CSSProperties
 }> = ({value, min, max, step, onChange, style}) => {
   return (

frontend/src/components/ValuedSlider.tsx

@@ -1,5 +1,4 @@
-import React, * as React_2 from 'react';
-import {FC, useEffect, useRef} from 'react';
+import React, {FC, useEffect, useRef} from 'react';
 import {Slider, Text} from '@fluentui/react-components';
 import {SliderOnChangeData} from '@fluentui/react-slider';
 import {NumberInput} from './NumberInput';
@@ -10,7 +9,7 @@ export const ValuedSlider: FC<{
   max: number,
   step?: number,
   input?: boolean
-  onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void
 }> = ({value, min, max, step, input, onChange}) => {
   const sliderRef = useRef<HTMLInputElement>(null);
   useEffect(() => {