fix: loading and send button, mobile style

feat: sibling switch, mobile style
fix: only the real submitting message will blink
feat: drop the text version username, use a similar square. (or it will mass up the sibling switch)

client/src/components/Main/SubmitButton.jsx

@@ -10,7 +10,7 @@ export default function SubmitButton({ submitMessage }) {
 
   if (isSubmitting) {
     return (
-      <button className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:bottom-0.5 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2 md:disabled:bottom-1">
+      <button className="absolute bottom-0 h-[50px] w-[30px] right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2" disabled>
         <div className="text-2xl">
           <span >·</span>
           <span className="blink">·</span>
@@ -23,7 +23,7 @@ export default function SubmitButton({ submitMessage }) {
     <button
       onClick={clickHandler}
       disabled={disabled}
-      className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2"
+      className="absolute bottom-0 flex justify-center items-center h-[50px] w-[50px] right-0 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent"
     >
       <svg
         stroke="currentColor"

client/src/components/Main/TextChat.jsx

@@ -34,7 +34,7 @@ export default function TextChat({ messages }) {
   const messageHandler = (data, currentState, currentMsg) => {
     const { messages, _currentMsg, message, sender } = currentState;
 
-    dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_' }]));
+    dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_', submitting: true }]));
   };
 
   const createdHandler = (data, currentState, currentMsg) => {
@@ -158,7 +158,7 @@ export default function TextChat({ messages }) {
     const message = text.trim();
     const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true, parentMessageId: convo.parentMessageId || '00000000-0000-0000-0000-000000000000', messageId: fakeMessageId };
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
-    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId };
+    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
 
     dispatch(setSubmitState(true));
     dispatch(setMessages([...messages, currentMsg, initialResponse]));

client/src/components/Messages/Message.jsx

@@ -60,7 +60,7 @@ export default function Message({
 }) {
   const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector((state) => state.submit);
   const [abortScroll, setAbort] = useState(false);
-  const { sender, text, isCreatedByUser, error } = message
+  const { sender, text, isCreatedByUser, error, submitting } = message
   const textEditor = useRef(null)
   const convo = useSelector((state) => state.convo);
   const { initial } = useSelector((state) => state.models);
@@ -72,7 +72,7 @@ export default function Message({
   const dispatch = useDispatch();
 
   // const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
-  const blinker = isSubmitting && last && !isCreatedByUser;
+  const blinker = submitting && isSubmitting && last && !isCreatedByUser;
 
   useEffect(() => {
     if (blinker && !abortScroll) {
@@ -113,7 +113,16 @@ export default function Message({
 
   const isBing = sender === 'bingai' || sender === 'sydney';
 
-  let icon = `${sender}:`;
+  let icon = (
+    <div
+      style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12 }}
+      className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
+    >
+      User
+    </div>
+  );
+    //`${sender}:`;
+
   let backgroundColor = bgColors[sender];
 
   if (!isCreatedByUser) {
@@ -160,7 +169,7 @@ export default function Message({
     const currentMsg = { ...message, sender: 'User', text: text.trim(), current: true, isCreatedByUser: true, messageId: fakeMessageId };
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
 
-    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId };
+    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
 
     dispatch(setSubmitState(true));
     dispatch(setMessages([...messages, currentMsg, initialResponse]));

client/src/components/Messages/SiblingSwitch.jsx

@@ -13,7 +13,7 @@ export default function SiblingSwitch({
     setSiblingIdx(siblingIdx + 1);
   }
   return siblingCount > 1 ? (
-    <div className="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible">
+    <div className="sibling-switch text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible">
       <button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={previous} disabled={siblingIdx==0}>
         <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"></polyline></svg>
       </button>

client/src/mobile.css

@@ -22,6 +22,14 @@
 }
 
 @media (max-width: 767px) {
+    .sibling-switch {
+        left: 114px;
+        top: unset;
+        bottom: 6px;
+        visibility: visible;
+        z-index: 2;
+    }
+
     .nav-close-button {
         display: block;
         position: absolute;