adjust: wording and placeholder text size

This commit is contained in:
Danny Avila 2023-03-17 14:48:21 -04:00
parent 0ff3bbb28f
commit 1513c27f7d

View file

@ -43,7 +43,6 @@ export default function TextChat({ messages }) {
}, [convo?.conversationId]); }, [convo?.conversationId]);
const messageHandler = (data, currentState, currentMsg) => { const messageHandler = (data, currentState, currentMsg) => {
const { messages, _currentMsg, message, sender, isRegenerate } = currentState; const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
if (isRegenerate) if (isRegenerate)
@ -79,9 +78,32 @@ export default function TextChat({ messages }) {
const { messages, _currentMsg, message, sender, isRegenerate } = currentState; const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
if (isRegenerate) if (isRegenerate)
dispatch(setMessages([...messages, { sender, text: data, parentMessageId: message?.overrideParentMessageId, messageId: message?.overrideParentMessageId + '_', cancelled: true }])); dispatch(
setMessages([
...messages,
{
sender,
text: data,
parentMessageId: message?.overrideParentMessageId,
messageId: message?.overrideParentMessageId + '_',
cancelled: true
}
])
);
else else
dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_', cancelled: true }])); dispatch(
setMessages([
...messages,
currentMsg,
{
sender,
text: data,
parentMessageId: currentMsg?.messageId,
messageId: currentMsg?.messageId + '_',
cancelled: true
}
])
);
}; };
const createdHandler = (data, currentState, currentMsg) => { const createdHandler = (data, currentState, currentMsg) => {
@ -100,14 +122,8 @@ export default function TextChat({ messages }) {
const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } = const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } =
currentState; currentState;
const { model, chatGptLabel, promptPrefix } = message; const { model, chatGptLabel, promptPrefix } = message;
if (isRegenerate) if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
dispatch( else dispatch(setMessages([...messages, requestMessage, responseMessage]));
setMessages([...messages, responseMessage,])
);
else
dispatch(
setMessages([...messages, requestMessage, responseMessage,])
);
dispatch(setSubmitState(false)); dispatch(setSubmitState(false));
const isBing = model === 'bingai' || model === 'sydney'; const isBing = model === 'bingai' || model === 'sydney';
@ -271,8 +287,8 @@ export default function TextChat({ messages }) {
const isCancelled = events.readyState <= 1; const isCancelled = events.readyState <= 1;
events.close(); events.close();
if (isCancelled) { if (isCancelled) {
const e = new Event("cancel"); const e = new Event('cancel');
events.dispatchEvent(e) events.dispatchEvent(e);
} }
}; };
}, [submission]); }, [submission]);
@ -328,11 +344,11 @@ export default function TextChat({ messages }) {
}; };
return ( return (
<div className="input-panel fixed md:absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:dark:bg-transparent md:bg-transparent dark:md:bg-vert-dark-gradient py-2"> <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
<form className="stretch mx-2 flex flex-row gap-3 md:pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6"> <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
<div className="relative flex h-full flex-1 md:flex-col"> <div className="relative flex h-full flex-1 md:flex-col">
<span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center order-last md:order-none"> <span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
{isSubmitting? {isSubmitting ? (
<button <button
onClick={handleStopGenerating} onClick={handleStopGenerating}
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border" className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
@ -341,17 +357,16 @@ export default function TextChat({ messages }) {
<StopGeneratingIcon /> <StopGeneratingIcon />
<span className="hidden md:block">Stop generating</span> <span className="hidden md:block">Stop generating</span>
</button> </button>
:(latestMessage&&!latestMessage?.isCreatedByUser)? ) : latestMessage && !latestMessage?.isCreatedByUser ? (
<button <button
onClick={handleRegenerate} onClick={handleRegenerate}
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border" className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
type="button" type="button"
> >
<RegenerateIcon /> <RegenerateIcon />
<span className="hidden md:block">Regenerate response</span> <span className="hidden md:block">Regenerate response</span>
</button> </button>
:null ) : null}
}
</span> </span>
<div <div
className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${ className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
@ -367,17 +382,26 @@ export default function TextChat({ messages }) {
ref={inputRef} ref={inputRef}
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}} // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
rows="1" rows="1"
value={(disabled || isNotAppendable) ? '' : text} value={disabled || isNotAppendable ? '' : text}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onChange={changeHandler} onChange={changeHandler}
onCompositionStart={handleCompositionStart} onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd} onCompositionEnd={handleCompositionEnd}
placeholder={disabled ? 'Choose another model or customize GPT again' : isNotAppendable ? 'Try to regenerate the incomplete response.' : ''} placeholder={
disabled
? 'Choose another model or customize GPT again'
: isNotAppendable
? 'Edit your message or Regenerate.'
: ''
}
disabled={disabled || isNotAppendable}
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
/>
<SubmitButton
submitMessage={submitMessage}
disabled={disabled || isNotAppendable} disabled={disabled || isNotAppendable}
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
/> />
<SubmitButton submitMessage={submitMessage} disabled={disabled || isNotAppendable} />
</div> </div>
</div> </div>
</form> </form>