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

mobile improvements

This commit is contained in:
Mckay Wrigley 2023-03-18 04:29:39 -06:00
parent fa4e27a164
commit fad67499e7
4 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Chat/Chat.tsx
View File

@ -57,7 +57,7 @@ export const Chat: FC<Props> = ({ model, messages, loading, lightMode, onSend, o
)} )}
</div> </div>
<div className="h-[140px] w-[300px] sm:w-[400px] md:w-[500px] lg:w-[700px] xl:w-[800px] mx-auto"> <div className="h-[80px] sm:h-[140px] w-[340px] sm:w-[400px] md:w-[500px] lg:w-[700px] xl:w-[800px] mx-auto">
<ChatInput onSend={onSend} /> <ChatInput onSend={onSend} />
</div> </div>
</div> </div>

2
components/Chat/ChatInput.tsx
View File

@ -47,7 +47,7 @@ export const ChatInput: FC<Props> = ({ onSend }) => {
return ( return (
<div className="relative"> <div className="relative">
<div className="absolute bottom-[-120px] w-full"> <div className="absolute bottom-[-70px] sm:bottom-[-120px] w-full">
<textarea <textarea
ref={textareaRef} ref={textareaRef}
className="rounded-lg pl-4 pr-8 py-3 w-full focus:outline-none max-h-[280px] dark:bg-[#40414F] dark:border-opacity-50 dark:border-neutral-800 dark:text-neutral-100 border border-neutral-300 shadow text-neutral-900" className="rounded-lg pl-4 pr-8 py-3 w-full focus:outline-none max-h-[280px] dark:bg-[#40414F] dark:border-opacity-50 dark:border-neutral-800 dark:text-neutral-100 border border-neutral-300 shadow text-neutral-900"

8
components/Chat/ChatMessage.tsx
View File

@ -11,13 +11,13 @@ interface Props {
export const ChatMessage: FC<Props> = ({ message, lightMode }) => { export const ChatMessage: FC<Props> = ({ message, lightMode }) => {
return ( return (
<div <div
className={`flex justify-center py-[30px] ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`} className={`flex justify-center py-[20px] sm:py-[30px] ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`}
style={{ overflowWrap: "anywhere" }} style={{ overflowWrap: "anywhere" }}
> >
<div className="w-full px-4 sm:px-0 sm:w-2/3 md:w-1/2 flex"> <div className="w-full sm:w-2/3 md:w-1/2 flex px-4">
<div className="mr-4 font-bold min-w-[40px]">{message.role === "assistant" ? "AI:" : "You:"}</div> <div className="mr-1 sm:mr-2 font-bold min-w-[40px]">{message.role === "assistant" ? "AI:" : "You:"}</div>
<div className="prose dark:prose-invert"> <div className="prose dark:prose-invert mt-[-2px]">
<ReactMarkdown <ReactMarkdown
components={{ components={{
code({ node, inline, className, children, ...props }) { code({ node, inline, className, children, ...props }) {

2
pages/index.tsx
View File

@ -245,7 +245,7 @@ export default function Home() {
/> />
) : ( ) : (
<IconArrowBarRight <IconArrowBarRight
className="absolute top-4 left-4 text-black dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300" className="absolute top-2 left-4 text-black dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300"
onClick={() => setShowSidebar(!showSidebar)} onClick={() => setShowSidebar(!showSidebar)}
/> />
)} )}