Skip to content

Commit

Permalink
fix : remove light theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@thyoondev
thyoondev committed Nov 19, 2023
1 parent 851913f commit 1d8053d
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 22 deletions.
22 changes: 11 additions & 11 deletions src/components/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ const Chat = (props: any) => {
<div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-black pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
<button
type="button"
className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"
className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white hover:text-white"
onClick={toggleComponentVisibility}
>
<span className="sr-only">Open sidebar</span>
Expand All @@ -126,11 +126,11 @@ const Chat = (props: any) => {
</div>
<div className="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1">
<div className="flex-1 overflow-hidden">
<div className="react-scroll-to-bottom--css-ikyem-79elbk h-full dark:bg-bg-stars z-40">
<div className="react-scroll-to-bottom--css-ikyem-79elbk h-full bg-bg-stars z-40">
<div className="react-scroll-to-bottom--css-ikyem-1n7m0yu">
{!showEmptyChat && conversation.length > 0 ? (
<div className="flex flex-col items-center text-sm bg-black">
<div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-gray-500 dark:border-gray-900/50 dark:bg-black dark:text-gray-300">
<div className="flex w-full items-center justify-center gap-1 border-b p-3 border-gray-900/50 bg-black text-gray-300">
Model: {selectedModel.name}
</div>
{conversation.map((message, index) => (
Expand All @@ -145,7 +145,7 @@ const Chat = (props: any) => {
<div className="flex items-center justify-center gap-2">
<div className="relative w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
<button
className="relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:border-white/20 dark:bg-black sm:text-sm align-center"
className="relative flex w-full cursor-default flex-col rounded-md border py-2 pl-3 pr-10 text-left focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 border-white/20 bg-black sm:text-sm align-center"
id="headlessui-listbox-button-:r0:"
type="button"
aria-haspopup="true"
Expand All @@ -154,7 +154,7 @@ const Chat = (props: any) => {
aria-labelledby="headlessui-listbox-label-:r1: headlessui-listbox-button-:r0:"
>
<label
className="block text-xs text-gray-700 dark:text-gray-500 text-center"
className="block text-xs text-gray-500 text-center"
id="headlessui-listbox-label-:r1:"
data-headlessui-state=""
>
Expand All @@ -171,17 +171,17 @@ const Chat = (props: any) => {
</button>
</div>
</div>
<h1 className="text-2xl sm:text-4xl font-semibold text-center text-gray-200 dark:text-gray-800 flex gap-2 items-center justify-center h-screen">
<h1 className="text-2xl sm:text-4xl font-semibold text-center text-gray-800 flex gap-2 items-center justify-center h-screen">
ChatSwap
</h1>
</div>
) : null}
<div className="flex flex-col items-center text-sm dark:bg-black"></div>
<div className="flex flex-col items-center text-sm bg-black"></div>
</div>
</div>
</div>

<div className="absolute z-50 bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-black md:!bg-transparent dark:md:bg-black pt-2">
<div className="absolute z-50 bottom-0 left-0 w-full border-t md:border-t-0 border-white/20 md:border-transparent md:bg-vert-light-gradient :bg-black md:!bg-transparent md:bg-black pt-2">
<form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
<div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col">
{errorMessage ? (
Expand All @@ -191,7 +191,7 @@ const Chat = (props: any) => {
</div>
</div>
) : null}
<div className="flex flex-col w-full py-2 flex-grow md:py-6 md:px-6 relative border border-black/10 bg-white dark:border-[#C1C7D0] dark:text-white dark:bg-gray-700 dark:opacity-80 rounded-full 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-6 md:px-6 relative border border-[#C1C7D0] text-white bg-gray-700 opacity-80 rounded-full shadow-[0_0_15px_rgba(0,0,0,0.10)]">
<textarea
ref={textAreaRef}
value={message}
Expand All @@ -204,7 +204,7 @@ const Chat = (props: any) => {
}}
// rows={1}
placeholder={"Send a message..."}
className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pl-2 md:pl-0"
className="m-0 w-full resize-none border-0 p-0 pr-7 focus:ring-0 focus-visible:ring-0 bg-transparent pl-2 md:pl-0"
onChange={(e) => setMessage(e.target.value)}
onKeyDown={handleKeypress}
// disabled={!isConnected}
Expand All @@ -219,7 +219,7 @@ const Chat = (props: any) => {
</div>
</div>
</form>
<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-white/50 md:px-4 md:pt-3 md:pb-6">
{/* <span>
ChatGPT Clone may produce inaccurate information about people,
places, or facts.
Expand Down
16 changes: 5 additions & 11 deletions src/components/Message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,8 @@ const Message = (props: any) => {

return (
<div
className={`group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 ${
isUser ? "dark:bg-black" : "bg-gray-50 dark:bg-black"
className={`group w-full text-gray-100 border-b border-gray-900/50 ${
isUser ? ":bg-black" : "bg-black"
}`}
>
<div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
Expand All @@ -208,21 +208,15 @@ const Message = (props: any) => {
)}
</div>
<div className="text-xs flex items-center justify-center gap-1 absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible">
<button
disabled
className="text-gray-300 dark:text-gray-400"
></button>
<button disabled className="text-gray-400"></button>
<span className="flex-grow flex-shrink-0">1 / 1</span>
<button
disabled
className="text-gray-300 dark:text-gray-400"
></button>
<button disabled className="text-gray-400"></button>
</div>
</div>
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div className="flex flex-grow flex-col gap-3">
<div className="min-h-20 flex flex-col items-start gap-4 whitespace-pre-wrap break-words">
<div className="markdown prose w-full break-words dark:prose-invert dark">
<div className="markdown prose w-full break-words prose-invert dark">
{!isUser && text === null ? (
<Skeleton className="w-3/5 rounded-lg">
<div className="h-6 w-2/5 rounded-lg bg-default-200"></div>
Expand Down

0 comments on commit 1d8053d

Please sign in to comment.