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)
This commit is contained in:
Wentao Lyu 2023-03-13 22:20:50 +08:00
parent a4d5f6a3f2
commit 953f846958
5 changed files with 26 additions and 9 deletions

View file

@ -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"

View file

@ -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]));