ichbtrv / chatgpt-svelte

A simple UI for the ChatGPT Open AI Api

Another SvelteKit ChatGPT UI

Video Link: https://ivanprojects.s3.us-west-1.amazonaws.com/Screen+Recording+2023-03-10+at+10.11.18+AM.mov

Features

• Formatted Markdown Responses
• Persisted Chat History (Setup for local storage but able to be adapted)
• Auto Scrolling/Message streaming

Using the App

1. pnpm Install
2. Add an OPENAI_KEY to an .env file with your open ai key
3. Enjoy

Stores

• Chat Messages
• Chat Messages (Derived)
• Answer
• Chat History

Chat Messages

The chat messages store stores the transcript for the current active conversation. When a question is submitted it posts to the api endpoint and if it gets a 200 starts to stream the answer.

Answer Store The answer store is what holds answer being streamed. While the AI is typing the answer store is being updated, and when the response is 'DONE' the answer is appended to the active transcript and reset to a blank string.

The use of two separate stores allows for a single update to the entire transcript, error checking prior to updating and for there to be no visible difference in the UI when streaming the answer.

Chat Messages (Derived)

The derived Chat Messages store gets the active conversation starting with the first query and checks to see if there is a 'chatHistory' key in local storage. This store acts as the bridge between the history store and the chat messages store. If there isn't any history in local storage, it creates a key and updates it if there is a query. Once the answer store finishes streaming the answer and updates the original Chat messages store, the derived store updates the key with updated transcript

Chat history

The Chat history store holds the references to all the various conversations held in local storage. On clicking one it'll update the chat view to display the active transcript. It also handles deleting any of the keys. The Chat history store is set by the derived store, since it is dependant on the existance of messages, the change in those messages, and the existance of a history in local storage.

chatgpt-svelte's Issues

Responsive ?

Hello, love your chat starter kit. Do you plan to add responsive for mobile/tablets ?

Thanks

Licensing Issues

I noticed that this repository does not currently contain the proper license. I am sorry that I have already forked it, but in the case of an unintended No license, could you please add the appropriate license?
If this is difficult, I will delete my forked repository as soon as possible.

Please fix this problem.
https://choosealicense.com/no-permission/

text.match is not a function

running this - I get the following stack trace when i submit something .

TypeError: text.match is not a function
at GPT3NodeTokenizer.encode (/Users/jonahfox/Downloads/chatgpt-svelte-main/node_modules/.pnpm/[email protected]/node_modules/gpt3-tokenizer/dist/gpt3-tokenizer.cjs.development.js:155:26)
at Module.getTokens (/src/lib/utils/tokenizer.ts:8:28)
at eval (/src/routes/api/chat/+server.ts:28:44)
at Array.forEach ()

I found a little bug that you might be interested to fix

Bug : After the bot answer and we click "New Chat" the last answer is stuck in display, to fix it :

const reset = () => {
  store.set({
    messages: [
      { role: 'assistant', content: introduction }
    ],
    chatState: 'idle'
  });
  answer.set('')
}

its @chat-messages.ts

Just minor bug, love your chat starter app BTW