mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-08 19:48:51 +01:00
adding clear methods for convos
This commit is contained in:
Daniel Avila
parent
c7c50dbbab
commit
6e3f63ee46
16 changed files with 466 additions and 121 deletions
|
|
@ -1,8 +1,11 @@
|
|||
import React from 'react';
|
||||
import RenameButton from './RenameButton';
|
||||
import DeleteButton from './DeleteButton';
|
||||
|
||||
export default function Conversation({
|
||||
id,
|
||||
parentMessageId,
|
||||
convo,
|
||||
convoHandler,
|
||||
title = 'New conversation'
|
||||
}) {
|
||||
|
|
@ -29,52 +32,8 @@ export default function Conversation({
|
|||
{title}
|
||||
</div>
|
||||
<div className="visible absolute right-1 z-10 flex text-gray-300">
|
||||
<button className="p-1 hover:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M12 20h9" />
|
||||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className="p-1 hover:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||||
<line
|
||||
x1="10"
|
||||
y1="11"
|
||||
x2="10"
|
||||
y2="17"
|
||||
/>
|
||||
<line
|
||||
x1="14"
|
||||
y1="11"
|
||||
x2="14"
|
||||
y2="17"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<RenameButton />
|
||||
<DeleteButton />
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import Conversation from './Conversation';
|
||||
|
||||
export default function Conversations({ conversations, convoHandler }) {
|
||||
export default function Conversations({ convoState, conversations, convoHandler }) {
|
||||
return (
|
||||
<div className="-mr-2 flex-1 flex-col overflow-y-auto border-b border-white/20">
|
||||
<div className="flex flex-col gap-2 text-sm text-gray-100">
|
||||
|
|
@ -12,6 +12,7 @@ export default function Conversations({ conversations, convoHandler }) {
|
|||
id={convo.conversationId}
|
||||
parentMessageId={convo.parentMessageId}
|
||||
title={convo.title}
|
||||
convo={convoState}
|
||||
convoHandler={convoHandler}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
35
src/components/DeleteButton.jsx
Normal file
35
src/components/DeleteButton.jsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function DeleteButton({ onClick, disabled }) {
|
||||
return (
|
||||
<button className="p-1 hover:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||||
<line
|
||||
x1="10"
|
||||
y1="11"
|
||||
x2="10"
|
||||
y2="17"
|
||||
/>
|
||||
<line
|
||||
x1="14"
|
||||
y1="11"
|
||||
x2="14"
|
||||
y2="17"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,14 +3,14 @@ import NewChat from './NewChat';
|
|||
import Conversations from './Conversations';
|
||||
import NavLinks from './NavLinks';
|
||||
|
||||
export default function Nav({ conversations, convoHandler }) {
|
||||
export default function Nav({ conversations, convo, convoHandler }) {
|
||||
return (
|
||||
<div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
|
||||
<div className="flex h-full min-h-0 flex-col ">
|
||||
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
|
||||
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
|
||||
<NewChat />
|
||||
<Conversations conversations={conversations} convoHandler={convoHandler}/>
|
||||
<Conversations convoState={convo} conversations={conversations} convoHandler={convoHandler}/>
|
||||
<NavLinks />
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
23
src/components/RenameButton.jsx
Normal file
23
src/components/RenameButton.jsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function RenameButton({ onClick, disabled }) {
|
||||
return (
|
||||
<button className="p-1 hover:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M12 20h9" />
|
||||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
28
src/components/SubmitButton.jsx
Normal file
28
src/components/SubmitButton.jsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function SubmitButton({ onClick, disabled }) {
|
||||
return (
|
||||
<button onClick={onClick} 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">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="mr-1 h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line
|
||||
x1="22"
|
||||
y1="2"
|
||||
x2="11"
|
||||
y2="13"
|
||||
/>
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,57 +1,29 @@
|
|||
import React, { useState } from 'react';
|
||||
import { SSE } from '../../app/sse';
|
||||
import SubmitButton from './SubmitButton';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import handleSubmit from '../utils/handleSubmit';
|
||||
|
||||
const handleSubmit = (text, messageHandler, convo, convoHandler) => {
|
||||
let payload = { text };
|
||||
if (convo.conversationId && convo.parentMessageId) {
|
||||
payload = {
|
||||
...payload,
|
||||
conversationId: convo.conversationId,
|
||||
parentMessageId: convo.parentMessageId
|
||||
};
|
||||
}
|
||||
|
||||
const events = new SSE('http://localhost:3050/ask', {
|
||||
payload: JSON.stringify(payload),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
events.onopen = function () {
|
||||
console.log('connection is opened');
|
||||
};
|
||||
|
||||
events.onmessage = function (e) {
|
||||
const data = JSON.parse(e.data);
|
||||
if (!!data.message) {
|
||||
messageHandler(data.text.replace(/^\n/, ''));
|
||||
} else {
|
||||
console.log(data);
|
||||
convoHandler(data);
|
||||
}
|
||||
};
|
||||
|
||||
events.onerror = function (e) {
|
||||
console.log(e, 'error in opening conn.');
|
||||
events.close();
|
||||
};
|
||||
|
||||
events.stream();
|
||||
};
|
||||
|
||||
export default function TextChat({
|
||||
messages,
|
||||
setMessages,
|
||||
reloadConvos,
|
||||
convo,
|
||||
setConvo,
|
||||
}) {
|
||||
export default function TextChat({ messages, setMessages, reloadConvos, convo, setConvo }) {
|
||||
const [text, setText] = useState('');
|
||||
// const [convo, setConvo] = useState({ conversationId: null, parentMessageId: null });
|
||||
const submitMessage = () => {
|
||||
const payload = text.trim();
|
||||
const currentMsg = { sender: 'user', text: payload, current: true };
|
||||
setMessages([...messages, currentMsg]);
|
||||
setText('');
|
||||
const messageHandler = (data) => {
|
||||
setMessages([...messages, currentMsg, { sender: 'GPT', text: data }]);
|
||||
};
|
||||
const convoHandler = (data) => {
|
||||
if (convo.conversationId === null && convo.parentMessageId === null) {
|
||||
const { conversationId, parentMessageId } = data;
|
||||
setConvo({ conversationId, parentMessageId: data.id });
|
||||
}
|
||||
|
||||
// if (!!conversation) {
|
||||
// setConvo(conversation);
|
||||
// }
|
||||
reloadConvos();
|
||||
};
|
||||
console.log('User Input:', payload);
|
||||
handleSubmit(payload, messageHandler, convo, convoHandler);
|
||||
};
|
||||
|
||||
const handleKeyPress = (e) => {
|
||||
if (e.key === 'Enter' && e.shiftKey) {
|
||||
|
|
@ -59,23 +31,7 @@ export default function TextChat({
|
|||
}
|
||||
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
const payload = text.trim();
|
||||
const currentMsg = { sender: 'user', text: payload, current: true };
|
||||
setMessages([...messages, currentMsg]);
|
||||
setText('');
|
||||
const messageHandler = (data) => {
|
||||
setMessages([...messages, currentMsg, { sender: 'GPT', text: data }]);
|
||||
};
|
||||
const convoHandler = (data) => {
|
||||
if (convo.conversationId === null && convo.parentMessageId === null) {
|
||||
const { conversationId, parentMessageId } = data;
|
||||
setConvo({ conversationId, parentMessageId: data.id });
|
||||
}
|
||||
|
||||
reloadConvos();
|
||||
};
|
||||
console.log('User Input:', payload);
|
||||
handleSubmit(payload, messageHandler, convo, convoHandler);
|
||||
submitMessage();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -103,7 +59,8 @@ export default function TextChat({
|
|||
placeholder=""
|
||||
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0"
|
||||
/>
|
||||
<button 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">
|
||||
<SubmitButton onClick={() => submitMessage()} />
|
||||
{/* <button 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">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
|
|
@ -124,7 +81,7 @@ export default function TextChat({
|
|||
/>
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
||||
</svg>
|
||||
</button>
|
||||
</button> */}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue