Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-16 16:30:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat: main styling/ui/ux final changes

Browse source
This commit is contained in:
Danny Avila 2023-03-22 16:06:11 -04:00
parent 67161c983f
commit 8f58c95452
17 changed files with 166 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

2
api/lib/db/indexSync.js
View file

@ -16,7 +16,7 @@ async function indexSync(req, res, next) {
});
const { status } = await client.health();
console.log(`Meilisearch: ${status}`);
// console.log(`Meilisearch: ${status}`);
const result = status === 'available' && !!process.env.SEARCH;
if (!result) {

5
api/models/Conversation.js
View file

@ -81,6 +81,7 @@ module.exports = {
}
const cache = {};
const convoMap = {};
const promises = [];
// will handle a syncing solution soon
const deletedConvoIds = [];
@ -104,6 +105,7 @@ module.exports = {
cache[page] = [];
}
cache[page].push(convo);
convoMap[convo.conversationId] = convo;
return true;
}
});
@ -120,7 +122,8 @@ module.exports = {
pageNumber,
pageSize,
// will handle a syncing solution soon
filter: new Set(deletedConvoIds)
filter: new Set(deletedConvoIds),
convoMap
};
} catch (error) {
console.log(error);

23
api/server/routes/search.js
View file

@ -4,6 +4,7 @@ const { MeiliSearch } = require('meilisearch');
const { Message } = require('../../models/Message');
const { Conversation, getConvosQueried } = require('../../models/Conversation');
const { reduceHits } = require('../../lib/utils/reduceHits');
const { cleanUpPrimaryKeyValue } = require('../../lib/utils/misc');
const cache = new Map();
router.get('/sync', async function (req, res) {
@ -52,9 +53,25 @@ router.get('/', async function (req, res) {
console.log('messages', messages.length, 'titles', titles.length);
const sortedHits = reduceHits(messages, titles);
const result = await getConvosQueried(user, sortedHits, pageNumber);
cache.set(q, result.cache);
cache.set(key, result.cache);
delete result.cache;
result.messages = messages.filter(message => !result.filter.has(message.conversationId));
// result.messages = messages.filter(message => { });
// !result.filter.has(message.conversationId)
const activeMessages = [];
for (let i = 0; i < messages.length; i++) {
let message = messages[i];
if (message.conversationId.includes('--')) {
message.conversationId = cleanUpPrimaryKeyValue(message.conversationId);
}
if (result.convoMap[message.conversationId] && !message.error) {
message = { ...message, title: result.convoMap[message.conversationId].title };
activeMessages.push(message);
}
}
result.messages = activeMessages;
delete result.cache;
delete result.convoMap;
// for debugging
// console.log(result, messages.length);
res.status(200).send(result);
@ -89,7 +106,7 @@ router.get('/enable', async function (req, res) {
});
const { status } = await client.health();
console.log(`Meilisearch: ${status}`);
// console.log(`Meilisearch: ${status}`);
result = status === 'available' && !!process.env.SEARCH;
return res.send(result);
} catch (error) {

2
client/src/components/Main/TextChat.jsx
View file

@ -350,7 +350,7 @@ export default function TextChat({ messages }) {
const isSearchView = messages?.[0]?.searchResult === true;
const getPlaceholderText = () => {
if (isSearchView) {
return 'Click a message to open its conversation.'
return 'Click a message title to open its conversation.'
}
if (disabled) {

2
client/src/components/Messages/Content/Content.jsx
View file

@ -53,7 +53,7 @@ const code = React.memo((props) => {
});
const p = React.memo((props) => {
return <p className="whitespace-pre-wrap ">{props?.children}</p>;
return <span className="whitespace-pre-wrap mb-2">{props?.children}</span>;
});
const blinker = ({ node }) => {

9
client/src/components/Messages/Content/SubRow.jsx Normal file
View file

@ -0,0 +1,9 @@
import React from 'react';
export default function SubRow({ children, classes = '', subclasses = '', onClick }) {
return (
<div className={`flex justify-between ${classes}`} onClick={onClick}>
<div className={`flex items-center justify-center gap-1 self-center pt-2 text-xs ${subclasses}`}>{children}</div>
</div>
);
}

4
client/src/components/Messages/Content/Wrapper.jsx
View file

@ -3,14 +3,14 @@ import TextWrapper from './TextWrapper';
import Content from './Content';
const Wrapper = React.memo(({ text, generateCursor, isCreatedByUser, searchResult }) => {
if (!isCreatedByUser && searchResult) {
if (searchResult) {
return (
<Content
content={text}
generateCursor={generateCursor}
/>
);
} else if (!isCreatedByUser && !searchResult) {
} else if (!isCreatedByUser) {
return (
<TextWrapper
text={text}

45
client/src/components/Messages/Message.jsx
View file

@ -1,11 +1,12 @@
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import SubRow from './Content/SubRow';
import Wrapper from './Content/Wrapper';
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 { setModel, setCustomModel, setCustomGpt, toggleCursor, setDisabled } from '~/store/submitSlice';
import { setModel, setCustomModel, setCustomGpt, setDisabled } from '~/store/submitSlice';
import { setMessages } from '~/store/messageSlice';
import { fetchById } from '~/utils/fetchers';
import { getIconOfModel } from '~/utils';
@ -21,17 +22,15 @@ export default function Message({
siblingCount,
setSiblingIdx
}) {
const { isSubmitting, model, chatGptLabel, cursor, promptPrefix } = useSelector(
(state) => state.submit
);
const { isSubmitting, model, chatGptLabel, cursor, promptPrefix } = useSelector(state => state.submit);
const [abortScroll, setAbort] = useState(false);
const { sender, text, searchResult, isCreatedByUser, error, submitting } = message;
const textEditor = useRef(null);
// const { convos } = useSelector((state) => state.convo);
const last = !message?.children?.length;
const edit = message.messageId == currentEditId;
const { ask } = useMessageHandler();
const dispatch = useDispatch();
// const currentConvo = convoMap[message.conversationId];
// const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
// const blinker = submitting && isSubmitting && last && !isCreatedByUser;
@ -62,7 +61,7 @@ export default function Message({
}
}, [last, message]);
const enterEdit = (cancel) => setCurrentEditId(cancel ? -1 : message.messageId);
const enterEdit = cancel => setCurrentEditId(cancel ? -1 : message.messageId);
const handleWheel = () => {
if (blinker) {
@ -92,11 +91,10 @@ export default function Message({
'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';
props.className = message.bg.split('hover')[0];
props.titleClass = message.bg.split(props.className)[1] + ' cursor-pointer';
}
// const wrapText = (text) => <TextWrapper text={text} generateCursor={generateCursor}/>;
const resubmitMessage = () => {
const text = textEditor.current.innerText;
@ -135,11 +133,11 @@ export default function Message({
<div
{...props}
onWheel={handleWheel}
onClick={clickSearchResult}
// 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">
{typeof icon === 'string' && icon.match(/[^\u0000-\u007F]+/) ? (
{typeof icon === 'string' && icon.match(/[^\\x00-\\x7F]+/) ? (
<span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
) : (
icon
@ -153,6 +151,13 @@ export default function Message({
</div>
</div>
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
{searchResult && (
<SubRow
classes={props.titleClass + ' rounded'}
subclasses="switch-result pl-2 pb-2"
onClick={clickSearchResult}
>{`${message.title} | ${message.sender}`}</SubRow>
)}
<div className="flex flex-grow flex-col gap-3">
{error ? (
<div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
@ -207,15 +212,13 @@ export default function Message({
visible={!error && isCreatedByUser && !edit && !searchResult}
onClick={() => enterEdit()}
/>
<div className="sibling-switch-container flex justify-between">
<div className="flex items-center justify-center gap-1 self-center pt-2 text-xs">
<SiblingSwitch
siblingIdx={siblingIdx}
siblingCount={siblingCount}
setSiblingIdx={setSiblingIdx}
/>
</div>
</div>
<SubRow subclasses="switch-container">
<SiblingSwitch
siblingIdx={siblingIdx}
siblingCount={siblingCount}
setSiblingIdx={setSiblingIdx}
/>
</SubRow>
</div>
</div>
</div>

38
client/src/components/Messages/MessageBar.jsx Normal file
View file

@ -0,0 +1,38 @@
import React, { useRef, useEffect, useState } from 'react';
const MessageBar = ({ children, dynamicProps, handleWheel, clickSearchResult }) => {
const ref = useRef(null);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.unobserve(ref.current);
}
},
{ threshold: 0.1 }
);
observer.observe(ref.current);
return () => {
observer.unobserve(ref.current);
};
}, []);
return (
<div
{...dynamicProps}
onWheel={handleWheel}
// onClick={clickSearchResult}
ref={ref}
>
{isVisible ? children : null}
</div>
);
};
export default MessageBar;

2
client/src/components/Messages/index.jsx
View file

@ -75,7 +75,7 @@ export default function Messages({ messages, messageTree }) {
<div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300">
Model: {modelName} {customModel ? `(${customModel})` : null}
</div>
{(messageTree.length === 0) ? (
{(messageTree.length === 0 || messages.length === 0 || !messages) ? (
<Spinner />
) : (
<>

9
client/src/components/Nav/NewChat.jsx
View file

@ -1,9 +1,10 @@
import React from 'react';
import { useDispatch } from 'react-redux';
import { setNewConvo } from '~/store/convoSlice';
import { setNewConvo, refreshConversation } from '~/store/convoSlice';
import { setMessages } from '~/store/messageSlice';
import { setSubmission } from '~/store/submitSlice';
import { setSubmission, setDisabled } from '~/store/submitSlice';
import { setText } from '~/store/textSlice';
import { setInputValue, setQuery } from '~/store/searchSlice';
export default function NewChat() {
const dispatch = useDispatch();
@ -12,7 +13,11 @@ export default function NewChat() {
dispatch(setText(''));
dispatch(setMessages([]));
dispatch(setNewConvo());
dispatch(refreshConversation());
dispatch(setSubmission({}));
dispatch(setDisabled(false));
dispatch(setInputValue(''));
dispatch(setQuery(''));
};
return (

12
client/src/components/Nav/SearchBar.jsx
View file

@ -1,12 +1,13 @@
import React, { useState, useCallback } from 'react';
import React, { useCallback } from 'react';
import { debounce } from 'lodash';
import { useDispatch } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import { Search } from 'lucide-react';
import { setQuery } from '~/store/searchSlice';
import { setInputValue, setQuery } from '~/store/searchSlice';
export default function SearchBar({ fetch, clearSearch }) {
const dispatch = useDispatch();
const [inputValue, setInputValue] = useState('');
const { inputValue } = useSelector((state) => state.search);
// const [inputValue, setInputValue] = useState('');
const debouncedChangeHandler = useCallback(
debounce((q) => {
@ -28,10 +29,9 @@ export default function SearchBar({ fetch, clearSearch }) {
}
};
const changeHandler = (e) => {
let q = e.target.value;
setInputValue(q);
dispatch(setInputValue(q));
q = q.trim();
if (q === '') {

6
client/src/components/Nav/index.jsx
View file

@ -54,8 +54,10 @@ export default function Nav({ navVisible, setNavVisible }) {
const clearSearch = () => {
setPage(1);
dispatch(refreshConversation());
dispatch(setNewConvo());
dispatch(setMessages([]));
if (!conversationId) {
dispatch(setNewConvo());
dispatch(setMessages([]));
}
dispatch(setDisabled(false));
};

8
client/src/mobile.css
View file

@ -22,11 +22,17 @@
}
@media (min-width: 1024px) {
.sibling-switch-container {
.switch-container {
display: none;
}
}
.switch-result {
display: block !important;
visibility: visible;
}
@media (max-width: 1024px) {
/* .sibling-switch {
left: 114px;

12
client/src/store/convoSlice.js
View file

@ -17,14 +17,15 @@ const initialState = {
refreshConvoHint: 0,
search: false,
latestMessage: null,
convos: []
convos: [],
convoMap: {},
};
const currentSlice = createSlice({
name: 'convo',
initialState,
reducers: {
refreshConversation: (state, action) => {
refreshConversation: (state) => {
state.refreshConvoHint = state.refreshConvoHint + 1;
},
setConversation: (state, action) => {
@ -69,6 +70,13 @@ const currentSlice = createSlice({
} else {
state.convos = convos.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
}
// state.convoMap = convos.reduce((acc, curr) => {
// acc[curr.conversationId] = { ...curr };
// delete acc[curr.conversationId].conversationId;
// return acc;
// }, {});
},
setPages: (state, action) => {
state.pages = action.payload;

6
client/src/store/searchSlice.js
View file

@ -4,12 +4,16 @@ const initialState = {
searchEnabled: false,
search: false,
query: '',
inputValue: '',
};
const currentSlice = createSlice({
name: 'search',
initialState,
reducers: {
setInputValue: (state, action) => {
state.inputValue = action.payload;
},
setSearchState: (state, action) => {
state.searchEnabled = action.payload;
},
@ -26,6 +30,6 @@ const currentSlice = createSlice({
}
});
export const { setSearchState, setQuery } = currentSlice.actions;
export const { setInputValue, setSearchState, setQuery } = currentSlice.actions;
export default currentSlice.reducer;

51
client/src/utils/buildTree.js
View file

@ -21,31 +21,32 @@ export default function buildTree(messages, groupAll = false) {
}
// Group all messages into one tree
// let parentId = null;
// messages.forEach((message, i) => {
// messageMap[message.messageId] = { ...message, bg: i % 2 === 0 ? even : odd, children: [] };
// const currentMessage = messageMap[message.messageId];
// const parentMessage = messageMap[parentId];
// if (parentMessage) parentMessage.children.push(currentMessage);
// else rootMessages.push(currentMessage);
// parentId = message.messageId;
// });
// return rootMessages;
// Group all messages by conversation
// Traverse the messages array and store each element in messageMap.
rootMessages = {};
let parents = 0;
messages.forEach(message => {
if (message.conversationId in messageMap) {
messageMap[message.conversationId].children.push(message);
} else {
messageMap[message.conversationId] = { ...message, bg: parents % 2 === 0 ? even : odd, children: [] };
rootMessages[message.conversationId] = messageMap[message.conversationId];
parents++;
}
let parentId = null;
messages.forEach((message, i) => {
messageMap[message.messageId] = { ...message, bg: i % 2 === 0 ? even : odd, children: [] };
const currentMessage = messageMap[message.messageId];
const parentMessage = messageMap[parentId];
if (parentMessage) parentMessage.children.push(currentMessage);
else rootMessages.push(currentMessage);
parentId = message.messageId;
});
return Object.values(rootMessages);
return rootMessages;
// Group all messages by conversation, doesn't look great
// Traverse the messages array and store each element in messageMap.
// rootMessages = {};
// let parents = 0;
// messages.forEach(message => {
// if (message.conversationId in messageMap) {
// messageMap[message.conversationId].children.push(message);
// } else {
// messageMap[message.conversationId] = { ...message, bg: parents % 2 === 0 ? even : odd, children: [] };
// rootMessages.push(messageMap[message.conversationId]);
// parents++;
// }
// });
// // return Object.values(rootMessages);
// return rootMessages;
}