mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-22 11:20:15 +01:00
loads up to 20 messages, debugging markdown issue
This commit is contained in:
Daniel Avila
parent
4e6168d8fa
commit
d56aa2edef
19 changed files with 329 additions and 625 deletions
|
|
@ -343,12 +343,29 @@ export default function TextChat({ messages }) {
|
|||
dispatch(setError(false));
|
||||
};
|
||||
|
||||
const isSearchView = messages?.[0]?.searchResult === true;
|
||||
const getPlaceholderText = () => {
|
||||
if (isSearchView) {
|
||||
return 'Click a message to open its conversation.'
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
return 'Choose another model or customize GPT again';
|
||||
}
|
||||
|
||||
if (isNotAppendable) {
|
||||
return 'Edit your message or Regenerate.'
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
return (
|
||||
<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 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">
|
||||
<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 && !isSearchView ? (
|
||||
<button
|
||||
onClick={handleStopGenerating}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
|
|
@ -357,7 +374,7 @@ export default function TextChat({ messages }) {
|
|||
<StopGeneratingIcon />
|
||||
<span className="hidden md:block">Stop generating</span>
|
||||
</button>
|
||||
) : latestMessage && !latestMessage?.isCreatedByUser ? (
|
||||
) : latestMessage && !latestMessage?.isCreatedByUser && !isSearchView ? (
|
||||
<button
|
||||
onClick={handleRegenerate}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
|
|
@ -388,15 +405,9 @@ export default function TextChat({ messages }) {
|
|||
onChange={changeHandler}
|
||||
onCompositionStart={handleCompositionStart}
|
||||
onCompositionEnd={handleCompositionEnd}
|
||||
placeholder={
|
||||
disabled
|
||||
? 'Choose another model or customize GPT again'
|
||||
: isNotAppendable
|
||||
? 'Edit your message or Regenerate.'
|
||||
: ''
|
||||
}
|
||||
placeholder={getPlaceholderText()}
|
||||
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"
|
||||
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 placeholder:text-gray-600 dark:placeholder:text-gray-500 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
|
||||
/>
|
||||
<SubmitButton
|
||||
submitMessage={submitMessage}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,12 @@ 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 { getIconOfModel } from '../../utils';
|
||||
import { useMessageHandler } from '../../utils/handleSubmit';
|
||||
import { setConversation, setLatestMessage } from '~/store/convoSlice';
|
||||
import { setModel, setCustomModel, setCustomGpt, setDisabled } from '~/store/submitSlice';
|
||||
import { setMessages } from '~/store/messageSlice';
|
||||
import { fetchById } from '~/utils/fetchers';
|
||||
import { getIconOfModel } from '~/utils';
|
||||
import { useMessageHandler } from '~/utils/handleSubmit';
|
||||
|
||||
export default function Message({
|
||||
message,
|
||||
|
|
@ -24,7 +27,7 @@ export default function Message({
|
|||
const [abortScroll, setAbort] = useState(false);
|
||||
const { sender, text, searchResult, isCreatedByUser, error, submitting } = message;
|
||||
const textEditor = useRef(null);
|
||||
const convo = useSelector((state) => state.convo);
|
||||
// const { convos } = useSelector((state) => state.convo);
|
||||
const last = !message?.children?.length;
|
||||
const edit = message.messageId == currentEditId;
|
||||
const { ask } = useMessageHandler();
|
||||
|
|
@ -74,6 +77,7 @@ export default function Message({
|
|||
sender,
|
||||
isCreatedByUser,
|
||||
model,
|
||||
searchResult,
|
||||
chatGptLabel,
|
||||
promptPrefix,
|
||||
error
|
||||
|
|
@ -83,6 +87,10 @@ export default function Message({
|
|||
props.className =
|
||||
'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';
|
||||
}
|
||||
|
||||
// const wrapText = (text) => <TextWrapper text={text} generateCursor={generateCursor}/>;
|
||||
|
||||
const resubmitMessage = () => {
|
||||
|
|
@ -98,11 +106,32 @@ export default function Message({
|
|||
enterEdit(true);
|
||||
};
|
||||
|
||||
const clickSearchResult = async () => {
|
||||
if (!searchResult) return;
|
||||
dispatch(setMessages([]))
|
||||
const convoResponse = await fetchById('convos', message.conversationId);
|
||||
const convo = convoResponse.data;
|
||||
if (convo?.chatGptLabel) {
|
||||
dispatch(setModel('chatgptCustom'));
|
||||
dispatch(setCustomModel(convo.chatGptLabel.toLowerCase()));
|
||||
} else {
|
||||
dispatch(setModel(convo.model));
|
||||
dispatch(setCustomModel(null));
|
||||
}
|
||||
|
||||
dispatch(setCustomGpt(convo));
|
||||
dispatch(setConversation(convo));
|
||||
const {data} = await fetchById('messages', message.conversationId);
|
||||
dispatch(setMessages(data))
|
||||
dispatch(setDisabled(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
{...props}
|
||||
onWheel={handleWheel}
|
||||
// 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">
|
||||
|
|
@ -159,7 +188,7 @@ export default function Message({
|
|||
<div className="flex min-h-[20px] flex-grow flex-col items-start gap-4 whitespace-pre-wrap">
|
||||
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
|
||||
<div className="markdown prose dark:prose-invert light w-full break-words">
|
||||
{(!isCreatedByUser || searchResult) ? (
|
||||
{!isCreatedByUser && !searchResult ? (
|
||||
<TextWrapper
|
||||
text={text}
|
||||
generateCursor={generateCursor}
|
||||
|
|
@ -173,7 +202,7 @@ export default function Message({
|
|||
</div>
|
||||
<HoverButtons
|
||||
model={model}
|
||||
visible={!error && isCreatedByUser && !edit}
|
||||
visible={!error && isCreatedByUser && !edit && !searchResult}
|
||||
onClick={() => enterEdit()}
|
||||
/>
|
||||
<div className="sibling-switch-container flex justify-between">
|
||||
|
|
@ -188,13 +217,13 @@ export default function Message({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MultiMessage
|
||||
messageList={message.children}
|
||||
messages={messages}
|
||||
scrollToBottom={scrollToBottom}
|
||||
currentEditId={currentEditId}
|
||||
setCurrentEditId={setCurrentEditId}
|
||||
/>
|
||||
<MultiMessage
|
||||
messageList={message.children}
|
||||
messages={messages}
|
||||
scrollToBottom={scrollToBottom}
|
||||
currentEditId={currentEditId}
|
||||
setCurrentEditId={setCurrentEditId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default function MultiMessage({
|
|||
messages,
|
||||
scrollToBottom,
|
||||
currentEditId,
|
||||
setCurrentEditId
|
||||
setCurrentEditId,
|
||||
}) {
|
||||
const [siblingIdx, setSiblingIdx] = useState(0);
|
||||
|
||||
|
|
@ -29,10 +29,11 @@ export default function MultiMessage({
|
|||
return null;
|
||||
}
|
||||
|
||||
const message = messageList[messageList.length - siblingIdx - 1];
|
||||
return (
|
||||
<Message
|
||||
key={messageList[messageList.length - siblingIdx - 1].messageId}
|
||||
message={messageList[messageList.length - siblingIdx - 1]}
|
||||
key={message.messageId}
|
||||
message={message}
|
||||
messages={messages}
|
||||
scrollToBottom={scrollToBottom}
|
||||
currentEditId={currentEditId}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import axios from 'axios';
|
||||
import _ from 'lodash';
|
||||
import NewChat from './NewChat';
|
||||
import Spinner from '../svg/Spinner';
|
||||
|
|
@ -8,7 +7,9 @@ import Conversations from '../Conversations';
|
|||
import NavLinks from './NavLinks';
|
||||
import { searchFetcher, swr } from '~/utils/fetchers';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { setConvos, refreshConversation } from '~/store/convoSlice';
|
||||
import { setConvos, setNewConvo, refreshConversation } from '~/store/convoSlice';
|
||||
import { setMessages } from '~/store/messageSlice';
|
||||
import { setDisabled } from '~/store/submitSlice';
|
||||
|
||||
export default function Nav({ navVisible, setNavVisible }) {
|
||||
const dispatch = useDispatch();
|
||||
|
|
@ -42,6 +43,10 @@ export default function Nav({ navVisible, setNavVisible }) {
|
|||
setPage(res.pageNumber);
|
||||
setPages(res.pages);
|
||||
setIsFetching(false);
|
||||
if (res.messages) {
|
||||
dispatch(setMessages(res.messages));
|
||||
dispatch(setDisabled(true));
|
||||
}
|
||||
};
|
||||
|
||||
const fetch = useCallback(_.partialRight(searchFetcher.bind(null, () => setIsFetching(true)), onSearchSuccess), [dispatch]);
|
||||
|
|
@ -49,6 +54,9 @@ export default function Nav({ navVisible, setNavVisible }) {
|
|||
const clearSearch = () => {
|
||||
setPage(1);
|
||||
dispatch(refreshConversation());
|
||||
dispatch(setNewConvo());
|
||||
dispatch(setMessages([]));
|
||||
dispatch(setDisabled(false));
|
||||
};
|
||||
|
||||
const { data, isLoading, mutate } = swr(`/api/convos?pageNumber=${pageNumber}`, onSuccess, {
|
||||
|
|
@ -102,7 +110,7 @@ export default function Nav({ navVisible, setNavVisible }) {
|
|||
|
||||
container.scrollTop = Math.min(maxScrollTop, scrollPositionRef.current);
|
||||
}
|
||||
}, [data, convos]);
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
setNavVisible(false);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue