feat: main styling/ui/ux final changes

client/src/components/Main/TextChat.jsx

@@ -350,7 +350,7 @@ export default function TextChat({ messages }) {
   const isSearchView = messages?.[0]?.searchResult === true;
   const getPlaceholderText = () => {
     if (isSearchView) {
-      return 'Click a message to open its conversation.'
+      return 'Click a message title to open its conversation.'
     }
 
     if (disabled) {

client/src/components/Messages/Content/Content.jsx

@@ -53,7 +53,7 @@ const code = React.memo((props) => {
 });
 
 const p = React.memo((props) => {
-  return <p className="whitespace-pre-wrap ">{props?.children}</p>;
+  return <span className="whitespace-pre-wrap mb-2">{props?.children}</span>;
 });
 
 const blinker = ({ node }) => {

client/src/components/Messages/Content/SubRow.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function SubRow({ children, classes = '', subclasses = '', onClick }) {
+  return (
+    <div className={`flex justify-between ${classes}`} onClick={onClick}>
+      <div className={`flex items-center justify-center gap-1 self-center pt-2 text-xs ${subclasses}`}>{children}</div>
+    </div>
+  );
+}

client/src/components/Messages/Content/Wrapper.jsx

@@ -3,14 +3,14 @@ import TextWrapper from './TextWrapper';
 import Content from './Content';
 
 const Wrapper = React.memo(({ text, generateCursor, isCreatedByUser, searchResult }) => {
-  if (!isCreatedByUser && searchResult) {
+  if (searchResult) {
     return (
       <Content
         content={text}
         generateCursor={generateCursor}
       />
     );
-  } else if (!isCreatedByUser && !searchResult) {
+  } else if (!isCreatedByUser) {
     return (
       <TextWrapper
         text={text}

client/src/components/Messages/Message.jsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import SubRow from './Content/SubRow';
 import Wrapper from './Content/Wrapper';
 import MultiMessage from './MultiMessage';
-import { useSelector, useDispatch } from 'react-redux';
 import HoverButtons from './HoverButtons';
 import SiblingSwitch from './SiblingSwitch';
 import { setConversation, setLatestMessage } from '~/store/convoSlice';
-import { setModel, setCustomModel, setCustomGpt, toggleCursor, setDisabled } from '~/store/submitSlice';
+import { setModel, setCustomModel, setCustomGpt, setDisabled } from '~/store/submitSlice';
 import { setMessages } from '~/store/messageSlice';
 import { fetchById } from '~/utils/fetchers';
 import { getIconOfModel } from '~/utils';
@@ -21,17 +22,15 @@ export default function Message({
   siblingCount,
   setSiblingIdx
 }) {
-  const { isSubmitting, model, chatGptLabel, cursor, promptPrefix } = useSelector(
-    (state) => state.submit
-  );
+  const { isSubmitting, model, chatGptLabel, cursor, promptPrefix } = useSelector(state => state.submit);
   const [abortScroll, setAbort] = useState(false);
   const { sender, text, searchResult, isCreatedByUser, error, submitting } = message;
   const textEditor = useRef(null);
-  // const { convos } = useSelector((state) => state.convo);
   const last = !message?.children?.length;
   const edit = message.messageId == currentEditId;
   const { ask } = useMessageHandler();
   const dispatch = useDispatch();
+  // const currentConvo = convoMap[message.conversationId];
 
   // const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
   // const blinker = submitting && isSubmitting && last && !isCreatedByUser;
@@ -62,7 +61,7 @@ export default function Message({
     }
   }, [last, message]);
 
-  const enterEdit = (cancel) => setCurrentEditId(cancel ? -1 : message.messageId);
+  const enterEdit = cancel => setCurrentEditId(cancel ? -1 : message.messageId);
 
   const handleWheel = () => {
     if (blinker) {
@@ -92,11 +91,10 @@ export default function Message({
       'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
 
   if (message.bg && searchResult) {
-    props.className = message.bg + ' cursor-pointer';
+    props.className = message.bg.split('hover')[0];
+    props.titleClass = message.bg.split(props.className)[1] + ' cursor-pointer';
   }
 
-  // const wrapText = (text) => <TextWrapper text={text} generateCursor={generateCursor}/>;
-
   const resubmitMessage = () => {
     const text = textEditor.current.innerText;
 
@@ -135,11 +133,11 @@ export default function Message({
       <div
         {...props}
         onWheel={handleWheel}
-        onClick={clickSearchResult}
+        // onClick={clickSearchResult}
       >
         <div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
           <div className="relative flex h-[30px] w-[30px] flex-col items-end text-right text-xs md:text-sm">
-            {typeof icon === 'string' && icon.match(/[^\u0000-\u007F]+/) ? (
+            {typeof icon === 'string' && icon.match(/[^\\x00-\\x7F]+/) ? (
               <span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
             ) : (
               icon
@@ -153,6 +151,13 @@ export default function Message({
             </div>
           </div>
           <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
+            {searchResult && (
+              <SubRow
+                classes={props.titleClass + ' rounded'}
+                subclasses="switch-result pl-2 pb-2"
+                onClick={clickSearchResult}
+              >{`${message.title} | ${message.sender}`}</SubRow>
+            )}
             <div className="flex flex-grow flex-col gap-3">
               {error ? (
                 <div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
@@ -207,15 +212,13 @@ export default function Message({
               visible={!error && isCreatedByUser && !edit && !searchResult}
               onClick={() => enterEdit()}
             />
-            <div className="sibling-switch-container flex justify-between">
-              <div className="flex items-center justify-center gap-1 self-center pt-2 text-xs">
-                <SiblingSwitch
-                  siblingIdx={siblingIdx}
-                  siblingCount={siblingCount}
-                  setSiblingIdx={setSiblingIdx}
-                />
-              </div>
-            </div>
+            <SubRow subclasses="switch-container">
+              <SiblingSwitch
+                siblingIdx={siblingIdx}
+                siblingCount={siblingCount}
+                setSiblingIdx={setSiblingIdx}
+              />
+            </SubRow>
           </div>
         </div>
       </div>

client/src/components/Messages/MessageBar.jsx

@@ -0,0 +1,38 @@
+import React, { useRef, useEffect, useState } from 'react';
+
+const MessageBar = ({ children, dynamicProps, handleWheel, clickSearchResult }) => {
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(ref.current);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    observer.observe(ref.current);
+
+    return () => {
+      observer.unobserve(ref.current);
+    };
+  }, []);
+
+  return (
+    <div
+      {...dynamicProps}
+      onWheel={handleWheel}
+      // onClick={clickSearchResult}
+
+      ref={ref}
+    >
+      {isVisible ? children : null}
+    </div>
+  );
+};
+
+export default MessageBar;

client/src/components/Messages/index.jsx

@@ -75,7 +75,7 @@ export default function Messages({ messages, messageTree }) {
           <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300">
             Model: {modelName} {customModel ? `(${customModel})` : null}
           </div>
-          {(messageTree.length === 0) ? (
+          {(messageTree.length === 0 || messages.length === 0 || !messages) ? (
             <Spinner />
           ) : (
             <>

client/src/components/Nav/NewChat.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { setNewConvo } from '~/store/convoSlice';
+import { setNewConvo, refreshConversation } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
-import { setSubmission } from '~/store/submitSlice';
+import { setSubmission, setDisabled } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
+import { setInputValue, setQuery } from '~/store/searchSlice';
 
 export default function NewChat() {
   const dispatch = useDispatch();
@@ -12,7 +13,11 @@ export default function NewChat() {
     dispatch(setText(''));
     dispatch(setMessages([]));
     dispatch(setNewConvo());
+    dispatch(refreshConversation());
     dispatch(setSubmission({}));
+    dispatch(setDisabled(false));
+    dispatch(setInputValue(''));
+    dispatch(setQuery(''));
   };
 
   return (

client/src/components/Nav/SearchBar.jsx

@@ -1,12 +1,13 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { debounce } from 'lodash';
-import { useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Search } from 'lucide-react';
-import { setQuery } from '~/store/searchSlice';
+import { setInputValue, setQuery } from '~/store/searchSlice';
 
 export default function SearchBar({ fetch, clearSearch }) {
   const dispatch = useDispatch();
-  const [inputValue, setInputValue] = useState('');
+  const { inputValue } = useSelector((state) => state.search);
+  // const [inputValue, setInputValue] = useState('');
 
   const debouncedChangeHandler = useCallback(
     debounce((q) => {
@@ -28,10 +29,9 @@ export default function SearchBar({ fetch, clearSearch }) {
      }
   };
 
-
   const changeHandler = (e) => {
     let q = e.target.value;
-    setInputValue(q);
+    dispatch(setInputValue(q));
     q = q.trim();
 
     if (q === '') {

client/src/components/Nav/index.jsx

@@ -54,8 +54,10 @@ export default function Nav({ navVisible, setNavVisible }) {
   const clearSearch = () => {
     setPage(1);
     dispatch(refreshConversation());
-    dispatch(setNewConvo());
-    dispatch(setMessages([]));
+    if (!conversationId) {
+      dispatch(setNewConvo());
+      dispatch(setMessages([]));
+    }
     dispatch(setDisabled(false));
   };