schihei/chatbot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add GPT-4 support (#25)

Browse Source 
* mobile ui updates

* fixes sidebar btn

* return if null

* mobile input blur

* handle mobile enter key

* new convo name

* new delete mechanism

* test height

* revert

* change padding

* remove overflow

* check relative

* padding

* done

* retry

* test

* test

* should work now

* test

* test

* more

* max h

* revert

* done
This commit is contained in:
Mckay Wrigley
2023-03-20 03:53:00 -06:00
committed by GitHub
parent 9a4824818e
commit 7810a3e7dc
8 changed files with 198 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/Chat.tsx
+13 -12
View File
@@ -1,4 +1,4 @@
import { Message, OpenAIModel, OpenAIModelNames } from "@/types";
import { Conversation, Message, OpenAIModel } from "@/types";
import { FC, useEffect, useRef } from "react";
import { ChatInput } from "./ChatInput";
import { ChatLoader } from "./ChatLoader";
@@ -6,16 +6,16 @@ import { ChatMessage } from "./ChatMessage";
import { ModelSelect } from "./ModelSelect";
interface Props {
model: OpenAIModel;
messages: Message[];
conversation: Conversation;
models: OpenAIModel[];
messageIsStreaming: boolean;
loading: boolean;
lightMode: "light" | "dark";
onSend: (message: Message) => void;
onSelect: (model: OpenAIModel) => void;
onModelChange: (conversation: Conversation, model: OpenAIModel) => void;
}
export const Chat: FC<Props> = ({ model, messages, messageIsStreaming, loading, lightMode, onSend, onSelect }) => {
export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, loading, lightMode, onSend, onModelChange }) => {
const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => {
@@ -24,27 +24,28 @@ export const Chat: FC<Props> = ({ model, messages, messageIsStreaming, loading,
useEffect(() => {
scrollToBottom();
}, [messages]);
}, [conversation.messages]);
return (
<div className="flex-1 overflow-scroll dark:bg-[#343541]">
<div>
{messages.length === 0 ? (
{conversation.messages.length === 0 ? (
<>
<div className="flex justify-center pt-8">
<ModelSelect
model={model}
onSelect={onSelect}
model={conversation.model}
models={models}
onModelChange={(model) => onModelChange(conversation, model)}
/>
</div>
<div className="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">Chatbot UI</div>
<div className="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">{loading ? "Loading..." : "Chatbot UI"}</div>
</>
) : (
<>
<div className="flex justify-center py-2 text-neutral-500 bg-neutral-100 dark:bg-[#444654] dark:text-neutral-200 text-sm border border-b-neutral-300 dark:border-none">Model: {OpenAIModelNames[model]}</div>
<div className="flex justify-center py-2 text-neutral-500 bg-neutral-100 dark:bg-[#444654] dark:text-neutral-200 text-sm border border-b-neutral-300 dark:border-none">Model: {conversation.model.name}</div>
{messages.map((message, index) => (
{conversation.messages.map((message, index) => (
<ChatMessage
key={index}
message={message}