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

fix: optimize mobile layout (#606) 

- conserve space in new convo view
- fix overlapping edit and delete chat message icons
- fix overlapping copy icon
This commit is contained in:
Shemar Lindie 2023-04-19 10:34:27 -04:00 committed by GitHub
parent 2208e4dfc7
commit dcb2810d46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Chat/Chat.tsx
View File

@ -398,7 +398,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
>
{selectedConversation?.messages.length === 0 ? (
<>
<div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
<div className="mx-auto flex flex-col space-y-5 md:space-y-10 px-3 pt-5 md:pt-12 sm:max-w-[600px]">
<div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
{models.length === 0 ? (
<div>

70
components/Chat/ChatMessage.tsx
View File

@ -126,14 +126,14 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
return (
<div
className={`group px-4 ${
className={`group md:px-4 ${
message.role === 'assistant'
? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
: 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
}`}
style={{ overflowWrap: 'anywhere' }}
>
<div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="relative m-auto flex p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="min-w-[40px] text-right font-bold">
{message.role === 'assistant' ? (
<IconRobot size={30} />
@ -185,64 +185,32 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
</div>
</div>
) : (
<div className="prose whitespace-pre-wrap dark:prose-invert">
<div className="prose whitespace-pre-wrap dark:prose-invert flex-1">
{message.content}
</div>
)}
{(window.innerWidth < 640 || !isEditing) && (
<>
{!isEditing && (
<div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">
<button
className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
window.innerWidth < 640
? 'bottom-1 right-3'
: 'right-6 top-[26px]'
}
`}
className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
onClick={toggleEditing}
>
<IconEdit size={20} />
</button>
<button
className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
window.innerWidth < 640
? 'bottom-1 right-3'
: 'right-0 top-[26px]'
}
`}
className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
onClick={handleDeleteMessage}
>
<IconTrash size={20} />
</button>
</>
</div>
)}
</div>
) : (
<>
<div
className={`absolute ${
window.innerWidth < 640
? 'bottom-1 right-3'
: 'right-0 top-[26px] m-0'
}`}
>
{messagedCopied ? (
<IconCheck
size={20}
className="text-green-500 dark:text-green-400"
/>
) : (
<button
className="translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300"
onClick={copyOnClick}
>
<IconCopy size={20} />
</button>
)}
</div>
<div className="flex flex-row">
<MemoizedReactMarkdown
className="prose dark:prose-invert"
className="prose dark:prose-invert flex-1"
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
components={{
@ -287,7 +255,23 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
>
{message.content}
</MemoizedReactMarkdown>
</>
<div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">
{messagedCopied ? (
<IconCheck
size={20}
className="text-green-500 dark:text-green-400"
/>
) : (
<button
className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
onClick={copyOnClick}
>
<IconCopy size={20} />
</button>
)}
</div>
</div>
)}
</div>
</div>