Code refactoring

[wtlyu]

This PR is created to track the progress of refactoring of the client.

This PR is based on Commit 15486d0.

Here is the summary list of changes:

1. global state changes: from redux -> recoil
2. cleanup all store structure. Do remember the store structure is redesigned and it's not the same as before. I will write the details later
3. move functions related to submit to separate component MessageHandler.
4. move some the the files: all files in Main has been moved to ui/ and Input/
5. introduce react-router v6.
6. now url is changing with conversation changes, loading from a subpath will also enter the conversation directory.
7. add a new api of /api/convos/:conversationId to retrive a conversation
8. fix a bug that user will delete all others' messages when clear conversation. in multi-user mode

[wtlyu]

Things to be done:

• double check all existing functionality.
• catch up current main branch progress
• support new node-chatgpt-api
• support searching
• refactoring of set and save of customgpts.
• click the example message in landing pages, should fill the text input
• comment.

[wtlyu]

brief of new state structure:

here we use recoil to handle global state. please refer to the docs of the usage. (typically, similar to useState)

conversation.js

atom conversation

The current conversation, can be an object or null (null means client need to fetch from server)

If a new chat is created, conversation is also an object. with conversationId = 'new'

When sending new message, {model, chatGptLabel, promptPrefix} is decided by this atom

To set particialy, use setConversation((prevState) => ({...prevState, yourKey: yourValue}));

sample structure
{
  conversationId: "new",
  title: "New Chat",
  jailbreakConversationId: null,
  conversationSignature: null,
  clientId: null,
  invocationId: null,
  model: "chatgpt",
  chatGptLabel: null,
  promptPrefix: null,
  user: null,
  suggestions: [],
}

atom messages

The list of current messages of the conversation, must be an array or null
null means client need to fetch from server

sample structure
[{text, sender, messageId, parentMessageId, isCreatedByUser}]

selector messagesTree

a readonly selector, from atom messages. same as the old version.
It will be null if messages is null

to use it:

const messagesTree = useRecoilValue(store.messagesTree);

atom latestMessage

The latest message of the conversation that is showing.
New message should be append to this message.
can be null

useConversation

A custom hook, provide { newConversation, switchToConversation, searchPlaceholderConversation }

newConversation: a function that will create new conversation and do all clean up work.

params: 

{
    model = null,
    chatGptLabel = null,
    promptPrefix = null,
}

if model == null, getDefaultModel will be called, to set the model as the default version. (firstly check localstorage, or select the first one)

Use this to create new chat, DONT set conversation and messages and latestmessage by hand, it's dirty.

switchToConversation: a function that will switch to given conversation and messages and do all clean up work.

params: 

conversation = {}, messages = []

searchPlaceholderConversation: a function that will switch to a search view.

conversations.js

Here doesn't storage the conversation list. just a refreshConversationsHint to ask refresh conversation.

atom refreshConversationsHint

as before

hook useConversations

provides a function { refreshConversations }, to ask for refresh conversation list.

eg:

const { refreshConversations } = store.useConversations();

refreshConversations();

models.js

Save available models here

atom customGPTModels

a array of customGPTModels. can be filled by server api. must follow this:

      {
        _id: "something",
        name: "something",
        value: "something",
        model: "CustomGPT",
      },

You might not need this, cc availableModels

selector models:

readonly, equals to default models + customGPTModels

You might not need this, cc availableModels

atom modelsFilter:

an object of available models. in this form:

{
    chatgpt: false,
    chatgptCustom: false,
    bingai: false,
    sydney: false,
    chatgptBrowser: false,
}

selector availableModels:

readonly, from models. filtered by modelsFilter

You might love this

submission.js

all things related to a submission.

atom submission

current submission object. send a new object to this will submit a new message.
set null to cancel the latest one.

atom isSubmitting

as the name showing

search.js

atom isSearchEnabled

if the search is enabled by server

atom searchQuery

a string contains the search query, can be blank if nothing to search

atom searchResultMessages

similar to messages. the search result of messages

selector searchResultMessagesTree

similar to messagesTree, but from searchResultMessages

isSearching

if in search mode

actually it check if query is blank

user.js

atom user

current user.
null means not data.
should be some object even though usersys is disabled. { username: "anonymous_user", display: "Anonymous User" }

[danny-avila]

My review is done and I've added some fixes to things before merging this to main. Very well done, this was not easy catching it up to latest.