feat: session list responsive

src/common/component/Message/styled.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 const StyledMsg = styled.div`
+width: 100%;
   position: relative;
   display: flex;
   align-items: flex-start;

src/common/component/MixedInput/index.tsx

@@ -19,7 +19,6 @@ import {
 import { createComboboxPlugin } from "@udecode/plate-combobox";
 import { ReactEditor } from "slate-react";
 import useUploadFile from "../../hook/useUploadFile";
-import Styled from "./styled";
 import { CONFIG } from "./config";
 import User from "../User";
 import { useAppSelector } from "../../../app/store";
@@ -56,12 +55,12 @@ const Plugins: FC<Props> = ({
   const editableRef = useRef(null);
   const initialProps = {
     ...CONFIG.editableProps,
-    className: "box",
+    className: "flex flex-col gap-2",
     placeholder
   };
   const plateEditor = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${id}`);
   useEffect(() => {
-    const handlePasteEvent = (evt: ClipboardEvent) => {
+    const handlePasteEvent = (evt: ClipboardEvent<Window>) => {
       const files = [...evt.clipboardData.files];
       if (files.length) {
         const filesData = files.map((file) => {
@@ -80,7 +79,6 @@ const Plugins: FC<Props> = ({
       //   updateDraft(plateEditor.children);
       // }
     };
-    // window.addEventListener("paste")
   }, [id, updateDraft]);
 
   useKey(
@@ -117,21 +115,21 @@ const Plugins: FC<Props> = ({
   const plugins = createPlugins(
     enableMentions
       ? pluginArr.concat([
-          createComboboxPlugin(),
-          createMentionPlugin({
-            options: {
-              createMentionNode: (item) => {
-                // console.log("mention", item);
-                const {
-                  text,
-                  data: { uid }
-                } = item;
-                return { value: `@${text}`, uid };
-              },
-              insertSpaceAfterMention: true
-            }
-          })
-        ])
+        createComboboxPlugin(),
+        createMentionPlugin({
+          options: {
+            createMentionNode: (item) => {
+              // console.log("mention", item);
+              const {
+                text,
+                data: { uid }
+              } = item;
+              return { value: `@${text}`, uid };
+            },
+            insertSpaceAfterMention: true
+          }
+        })
+      ])
       : pluginArr,
     {
       components
@@ -174,12 +172,12 @@ const Plugins: FC<Props> = ({
       const arr = tmps.map((tmp) => {
         return Array.isArray(tmp)
           ? {
-              type: "text",
-              content: tmp.map((t) => t.content).join("\n"),
-              properties: {
-                mentions: tmp.map((t) => t.properties?.mentions || []).flat()
-              }
+            type: "text",
+            content: tmp.map((t) => t.content).join("\n"),
+            properties: {
+              mentions: tmp.map((t) => t.properties?.mentions || []).flat()
             }
+          }
           : tmp;
       });
       const msgs = arr.filter(({ content }) => !!content);
@@ -188,8 +186,9 @@ const Plugins: FC<Props> = ({
     [msgs]
   );
 
+
   return (
-    <Styled className="input" ref={editableRef}>
+    <div className="input max-h-[50vh] overflow-auto text-sm text-gray-600" ref={editableRef}>
       <Plate
         id={`${TEXT_EDITOR_PREFIX}_${id}`}
         onChange={handleChange}
@@ -222,7 +221,7 @@ const Plugins: FC<Props> = ({
           />
         ) : null}
       </Plate>
-    </Styled>
+    </div>
   );
 };
 

src/common/component/MixedInput/styled.ts

@@ -1,20 +0,0 @@
-import styled from "styled-components";
-
-const Styled = styled.div`
-  max-height: 50vh;
-  overflow: auto;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
-  color: #475467;
-  > .box {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    p {
-      padding: 0;
-    }
-  }
-`;
-
-export default Styled;

src/common/component/Send/Toolbar.tsx

@@ -1,5 +1,4 @@
 import { ChangeEvent, useRef, FC } from "react";
-import styled from "styled-components";
 import Tooltip from "../Tooltip";
 import AddIcon from "../../../assets/icons/add.solid.svg";
 import MarkdownIcon from "../../../assets/icons/markdown.svg";
@@ -8,41 +7,6 @@ import ExitFullscreenIcon from "../../../assets/icons/fullscreen.exit.svg";
 import useUploadFile from "../../hook/useUploadFile";
 import { useTranslation } from "react-i18next";
 
-const Styled = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-  &.markdown .add {
-    display: none;
-  }
-  .md {
-    cursor: pointer;
-    display: flex;
-    gap: 14px;
-    .markdown path {
-      fill: #22ccee;
-    }
-  }
-  .add {
-    cursor: pointer;
-    position: relative;
-    width: 24px;
-    height: 24px;
-    label {
-      opacity: 0;
-      cursor: pointer;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      input {
-        display: none;
-      }
-    }
-  }
-`;
 type Props = {
   toggleMarkdownFullscreen: () => void;
   fullscreen: boolean;
@@ -79,13 +43,14 @@ const Toolbar: FC<Props> = ({
     // setFiles([...evt.target.files]);
   };
 
+  const isMarkdown = mode == 'markdown';
   return (
-    <Styled className={mode}>
-      <div className="md">
+    <div className={`flex flex-col items-center justify-end gap-2.5 md:flex-row`}>
+      <div className="cursor-pointer flex gap-3.5">
         <Tooltip placement="top" tip="Markdown">
-          <MarkdownIcon className={mode} onClick={toggleMode} />
+          <MarkdownIcon className="fill-[#22ccee]" onClick={toggleMode} />
         </Tooltip>
-        {mode == "markdown" &&
+        {isMarkdown &&
           (fullscreen ? (
             <Tooltip placement="top" tip="Exit Fullscreen">
               <ExitFullscreenIcon onClick={toggleMarkdownFullscreen} />
@@ -96,11 +61,12 @@ const Toolbar: FC<Props> = ({
             </Tooltip>
           ))}
       </div>
-      <Tooltip placement="top" tip={t("action.upload")}>
-        <div className="add">
+      {!isMarkdown && <Tooltip placement="top" tip={t("action.upload")}>
+        <div className="cursor-pointer relative w-6 h-6">
           <AddIcon />
-          <label htmlFor="file">
+          <label htmlFor="file" className=" cursor-pointer absolute left-0 top-0 w-full h-full opacity-0">
             <input
+              className="hidden"
               size={24}
               ref={fileInputRef}
               multiple={true}
@@ -111,8 +77,8 @@ const Toolbar: FC<Props> = ({
             />
           </label>
         </div>
-      </Tooltip>
-    </Styled>
+      </Tooltip>}
+    </div>
   );
 };
 export default Toolbar;