feat: chat presets (experimental)

frontend/src/components/CustomToastContainer.tsx

@@ -0,0 +1,17 @@
+import commonStore from '../stores/commonStore';
+import { ToastContainer } from 'react-toastify';
+
+export const CustomToastContainer = () =>
+  <ToastContainer
+    style={{ width: '350px' }}
+    position="top-center"
+    autoClose={4000}
+    pauseOnHover={true}
+    hideProgressBar={true}
+    newestOnTop={true}
+    closeOnClick={false}
+    rtl={false}
+    pauseOnFocusLoss={false}
+    draggable={false}
+    theme={commonStore.settings.darkMode ? 'dark' : 'light'}
+  />;

frontend/src/components/ToolTipButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEventHandler, ReactElement } from 'react';
+import React, { CSSProperties, FC, MouseEventHandler, ReactElement } from 'react';
 import { Button, Tooltip } from '@fluentui/react-components';
 
 export const ToolTipButton: FC<{
@@ -6,6 +6,7 @@ export const ToolTipButton: FC<{
   desc: string,
   icon?: ReactElement,
   className?: string,
+  style?: CSSProperties,
   size?: 'small' | 'medium' | 'large',
   shape?: 'rounded' | 'circular' | 'square';
   appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
@@ -17,6 +18,7 @@ export const ToolTipButton: FC<{
   desc,
   icon,
   className,
+  style,
   size,
   shape,
   appearance,
@@ -26,8 +28,8 @@ export const ToolTipButton: FC<{
 }) => {
   return (
     <Tooltip content={desc} showDelay={showDelay} hideDelay={0} relationship="label">
-      <Button className={className} disabled={disabled} icon={icon} onClick={onClick} size={size} shape={shape}
-        appearance={appearance}>{text}</Button>
+      <Button style={style} className={className} disabled={disabled} icon={icon} onClick={onClick} size={size}
+        shape={shape} appearance={appearance}>{text}</Button>
     </Tooltip>
   );
 };