KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new load behavior

This commit is contained in:
Mckay Wrigley 2023-03-23 08:54:22 -06:00
parent 2b1ef7be3e
commit 83217c6d83
3 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/Chat/Chat.tsx
View File

@ -10,6 +10,7 @@ import { SystemPrompt } from "./SystemPrompt";
interface Props {
conversation: Conversation;
models: OpenAIModel[];
apiKey: string;
messageIsStreaming: boolean;
modelError: boolean;
messageError: boolean;
@ -20,7 +21,7 @@ interface Props {
stopConversationRef: MutableRefObject<boolean>;
}
export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, stopConversationRef }) => {
export const Chat: FC<Props> = ({ conversation, models, apiKey, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, stopConversationRef }) => {
const [currentMessage, setCurrentMessage] = useState<Message>();
const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
@ -64,6 +65,13 @@ export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, mode
return (
<div className="relative flex-1 overflow-none dark:bg-[#343541] bg-white">
{!apiKey && (
<div className="flex flex-col justify-center mx-auto h-full w-[300px] sm:w-[500px] space-y-6">
<div className="text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">OpenAI API Key Required</div>
<div className="text-center text-gray-500 dark:text-gray-400">Please set your OpenAI API key in the bottom left of the sidebar.</div>
</div>
)}
{modelError ? (
<div className="flex flex-col justify-center mx-auto h-full w-[300px] sm:w-[500px] space-y-6">
<div className="text-center text-red-500">Error fetching models.</div>

6
components/Chat/ChatLoader.tsx
View File

@ -6,11 +6,11 @@ interface Props {}
export const ChatLoader: FC<Props> = () => {
return (
<div
className={`flex justify-center py-[20px] sm:py-[30px] whitespace-pre-wrap dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 dark:border-none"`}
className="group text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]"
style={{ overflowWrap: "anywhere" }}
>
<div className="w-full sm:w-4/5 md:w-3/5 lg:w-[600px] xl:w-[800px] flex px-4">
<div className="mr-1 sm:mr-2 font-bold min-w-[40px]">AI:</div>
<div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div className="font-bold min-w-[40px]">AI:</div>
<IconDots className="animate-pulse" />
</div>
</div>

10
pages/index.tsx
View File

@ -82,7 +82,7 @@ export default function Home() {
}
if (updatedConversation.messages.length === 1) {
const {content} = message
const { content } = message;
const customName = content.length > 30 ? content.substring(0, 30) + "..." : content;
updatedConversation = {
@ -291,7 +291,9 @@ export default function Home() {
}, [selectedConversation]);
useEffect(() => {
if (apiKey) {
fetchModels(apiKey);
}
}, [apiKey]);
useEffect(() => {
@ -300,9 +302,10 @@ export default function Home() {
setLightMode(theme as "dark" | "light");
}
const apiKey = localStorage.getItem("apiKey") || "";
const apiKey = localStorage.getItem("apiKey");
if (apiKey) {
setApiKey(apiKey);
fetchModels(apiKey);
}
if (window.innerWidth < 640) {
@ -330,8 +333,6 @@ export default function Home() {
prompt: DEFAULT_SYSTEM_PROMPT
});
}
fetchModels(apiKey);
}, []);
return (
@ -396,6 +397,7 @@ export default function Home() {
<Chat
conversation={selectedConversation}
messageIsStreaming={messageIsStreaming}
apiKey={apiKey}
modelError={modelError}
messageError={messageError}
models={models}