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

Update the Stop Generating button style (#79)

This commit is contained in:
Xiangxuan Liu 2023-03-23 01:38:48 +08:00 committed by GitHub
parent 6c1ed37323
commit cccf753743
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Chat/Chat.tsx
View File

@ -80,7 +80,7 @@ export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, mode
{loading && <ChatLoader />} {loading && <ChatLoader />}
<div <div
className="bg-white dark:bg-[#343541] h-[113px] sm:h-[162px]" className="bg-white dark:bg-[#343541] h-[162px]"
ref={messagesEndRef} ref={messagesEndRef}
/> />
</> </>

21
components/Chat/ChatInput.tsx
View File

@ -1,5 +1,5 @@
import { Message, OpenAIModel, OpenAIModelID } from "@/types"; import { Message, OpenAIModel, OpenAIModelID } from "@/types";
import { IconHandStop, IconSend } from "@tabler/icons-react"; import { IconSend, IconPlayerStop } from "@tabler/icons-react";
import { FC, KeyboardEvent, MutableRefObject, useEffect, useRef, useState } from "react"; import { FC, KeyboardEvent, MutableRefObject, useEffect, useRef, useState } from "react";
interface Props { interface Props {
@ -78,6 +78,14 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopCo
return ( return (
<div className="absolute bottom-0 left-0 w-full dark:border-white/20 border-transparent dark:bg-[#444654] dark:bg-gradient-to-t from-[#343541] via-[#343541] to-[#343541]/0 bg-white dark:!bg-transparent dark:bg-vert-dark-gradient pt-6 md:pt-2"> <div className="absolute bottom-0 left-0 w-full dark:border-white/20 border-transparent dark:bg-[#444654] dark:bg-gradient-to-t from-[#343541] via-[#343541] to-[#343541]/0 bg-white dark:!bg-transparent dark:bg-vert-dark-gradient pt-6 md:pt-2">
<div className="stretch mx-2 md:mt-[52px] mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-3xl"> <div className="stretch mx-2 md:mt-[52px] mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-3xl">
{messageIsStreaming && (
<button
className="absolute -top-2 md:top-0 left-0 right-0 mx-auto dark:bg-[#343541] border w-fit border-gray-500 py-2 px-4 rounded"
onClick={handleStopConversation}
>
<IconPlayerStop size={16} className="inline-block mb-[2px]"/> Stop Generating
</button>
)}
<div className="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-[#40414F] rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"> <div className="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-[#40414F] rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]">
<textarea <textarea
ref={textareaRef} ref={textareaRef}
@ -106,17 +114,6 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopCo
className="opacity-60" className="opacity-60"
/> />
</button> </button>
{messageIsStreaming ? (
<button
className="absolute right-12 focus:outline-none text-neutral-800 hover:text-neutral-900 dark:text-neutral-100 dark:hover:text-neutral-200 dark:bg-opacity-50 hover:bg-neutral-200 p-1 rounded-sm"
onClick={handleStopConversation}
>
<IconHandStop
size={16}
className="opacity-60"
/>
</button>
) : null}
</div> </div>
</div> </div>
<div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6"> <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">