Skip to content

dev -> main #353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rhlsthrm merged 17 commits into from
Apr 27, 2025
Merged

dev -> main #353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
2cb1869
canvas overlay
vidvidvid Apr 26, 2025
912a3f2
remove card design from bot response
vidvidvid Apr 26, 2025
59f9b59
lint fix
vidvidvid Apr 26, 2025
eeef201
remove 'you' from messages
vidvidvid Apr 26, 2025
f8a8f0c
fix disconnected message
vidvidvid Apr 26, 2025
6cac752
match chat and right sidebar styles
vidvidvid Apr 26, 2025
215dbc1
simplify design
vidvidvid Apr 26, 2025
3d15e51
redesign example queries
vidvidvid Apr 26, 2025
9da98c0
improve layout positioning
vidvidvid Apr 26, 2025
6dd30c2
improve suggestions behaviour
vidvidvid Apr 26, 2025
3cf5e4c
add cursor pointer
vidvidvid Apr 26, 2025
a38fa18
add cursor pointer to example queries
vidvidvid Apr 26, 2025
cd4e31c
fix dced msg
vidvidvid Apr 26, 2025
19033b1
fix header bg
vidvidvid Apr 26, 2025
fbd0dde
unify bg colors
vidvidvid Apr 27, 2025
7a05246
remove gradient from left sidebar bg
vidvidvid Apr 27, 2025
0ce03e6
Merge pull request #352 from MatrixTerminal/ui/redesign-darkmode
vidvidvid Apr 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion public/next.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion public/vercel.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion public/window.svg
View file
Open in desktop

This file was deleted.

29 changes: 28 additions & 1 deletion src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -986,6 +986,33 @@
/* indigo-500 */
}

.markdown-content hr {
border: none;
height: 1px;
background-color: rgba(0, 0, 0, 0.1);
margin: 1.5rem 0;
}

.dark .markdown-content hr {
background-color: rgba(255, 255, 255, 0.1);
}

.markdown-content[data-message-mode="sentinel"] hr {
background-color: rgba(99, 102, 241, 0.3);
}

.dark .markdown-content[data-message-mode="sentinel"] hr {
background-color: rgba(99, 102, 241, 0.3);
}

.markdown-content[data-message-mode="morpheus"] hr {
background-color: rgba(71, 216, 163, 0.3);
}

.dark .markdown-content[data-message-mode="morpheus"] hr {
background-color: rgba(71, 216, 163, 0.3);
}

.markdown-content ul,
.markdown-content ul:first-child,
.markdown-content ul:last-child {
Expand Down Expand Up @@ -1014,7 +1041,7 @@
background-color: white !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.dark .header-transparent header {
background-color: black !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
Expand Down
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function RootLayout({
`}
</Script>
<body
className={`${geistSans.variable} ${geistMono.variable} bg-gray-200 dark:bg-black dark:text-white`}
className={`${geistSans.variable} ${geistMono.variable} bg-gray-100 dark:bg-neutral-900 dark:text-white`}
>
<ClientProviders>
{children}
Expand Down
20 changes: 11 additions & 9 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { useDisconnectedDarkMode } from "@/hooks/useDisconnectedDarkMode";
import { useChat } from "@/contexts/chat-context";

export default function HomePage() {
const { isConnected, isConnecting, isReconnecting } = useAccount();
const { isConnected } = useAccount();
const { handleNavigateToRoot } = useChat();

React.useEffect(() => {
Expand All @@ -22,16 +22,18 @@ export default function HomePage() {

useDisconnectedDarkMode(isConnected);

if (!isConnected && !isConnecting && !isReconnecting) {
return <DisconnectedMessage />;
}

return (
<>
<div className="fixed inset-0 z-0">
<MatrixCanvas />
</div>
<RootLayout />
<div className="fixed inset-0 z-0"></div>

{!isConnected && (
<>
<MatrixCanvas />
<DisconnectedMessage />
</>
)}

{isConnected && <RootLayout />}
</>
);
}
2 changes: 1 addition & 1 deletion src/app/template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function AppTemplate({
}, []);

return (
<div className="h-screen flex bg-gray-200 dark:bg-black overflow-hidden w-full">
<div className="h-screen flex overflow-hidden w-full">
<SplitLayout>
<div
className={`relative flex flex-col w-full h-full ${!isChatActive ? "header-transparent" : ""}`}
Expand Down
3 changes: 2 additions & 1 deletion src/components/chat/ChatLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export function ChatLayout() {
) : (
<>
<Messages />
<div className="mx-auto max-w-3xl absolute bottom-0 left-0 right-0 h-2 bg-gray-100 dark:bg-neutral-900 px-[2px] sm:px-0"></div>
{showInput && (
<motion.div
ref={inputRef}
Expand All @@ -94,7 +95,7 @@ export function ChatLayout() {
duration: 0.5,
ease: "easeOut",
}}
className="absolute bottom-0 left-0 right-0 px-[2px] sm:px-0"
className="absolute bottom-0 left-0 right-0 px-[2px] sm:px-0 pb-2 z-20"
>
<ChatInput
input={input}
Expand Down
11 changes: 5 additions & 6 deletions src/components/chat/RootLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ export function RootLayout() {

const modeTitleStyles =
activeMode === "morpheus"
? "text-emerald-800 dark:text-emerald-50 font-semibold"
: "text-indigo-800 dark:text-indigo-50 font-bold";
? "text-emerald-800 dark:text-emerald-50 font-light"
: "text-indigo-800 dark:text-indigo-50 font-light";

if (!isConnected) {
return (
Expand Down Expand Up @@ -68,7 +68,7 @@ export function RootLayout() {
duration: 0.6,
ease: "easeOut",
}}
className="flex-1 flex flex-col items-center justify-center gap-3 lg:gap-6 z-10 px-4 h-full"
className="mx-auto mt-4 w-full flex-1 px-4 md:pl-8 lg:mt-6 max-w-7xl !mt-0 flex flex-col items-center gap-4 pt-12 md:pr-14 2xl:pr-20 pt-[10vh] md:pt-[30vh] max-sm:!px-1"
>
{/* Dynamic title */}
<motion.h1
Expand All @@ -79,7 +79,7 @@ export function RootLayout() {
duration: 0.35,
ease: "easeOut",
}}
className={`text-2xl lg:text-4xl ${modeTitleStyles} drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)] mb-6 text-center`}
className={`text-2xl lg:text-5xl ${modeTitleStyles} drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)] mb-7 text-center`}
>
{modeTitle}
</motion.h1>
Expand Down Expand Up @@ -108,7 +108,6 @@ export function RootLayout() {
/>
</motion.div>

{/* Example queries */}
<motion.div
initial={{
opacity: 0,
Expand All @@ -123,7 +122,7 @@ export function RootLayout() {
duration: 0.6,
ease: "easeOut",
}}
className="w-full max-w-2xl"
className="w-full"
>
<ExampleQueries
onSelect={handleExampleSelect}
Expand Down
57 changes: 19 additions & 38 deletions src/components/chat/chat-input-base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ interface BaseChatInputProps {
initialMode?: ChatMode;
onSubmitMessage?: () => void;
onSubmit?: (e: FormEvent) => Promise<void>;
isInChatMode?: boolean;
showReloadButton?: boolean;
className?: string;
}
Expand All @@ -52,7 +51,6 @@ export default function BaseChatInput({
initialMode = "morpheus",
onSubmitMessage,
onSubmit,
isInChatMode = false,
showReloadButton = false,
className = "",
}: BaseChatInputProps) {
Expand Down Expand Up @@ -232,7 +230,7 @@ export default function BaseChatInput({
variants={containerVariants}
initial="hidden"
animate="visible"
className={`relative ${isInChatMode ? "mb-[1px]" : ""} ${className}`}
className={`relative ${className}`}
>
<div className="max-w-3xl mx-auto relative">
{/* Action Buttons - Positioned inside the chat input */}
Expand Down Expand Up @@ -376,20 +374,19 @@ export default function BaseChatInput({
<div className="flex flex-col">
{/* Input field with glow effect */}
<motion.div
className={`w-full relative group transition-all duration-400 ease-in-out rounded-t-xl
className={`w-full relative group transition-all duration-400 ease-in-out rounded-xl
${
!isInChatMode && !isBusy
? `rounded-lg shadow-lg backdrop-blur-md bg-white/15 dark:bg-black/15 hover:backdrop-blur-lg hover:bg-white/10 dark:hover:bg-black/10
${
isMorpheusMode
? "shadow-emerald-100/30 dark:shadow-emerald-900/10 border border-emerald-300/70 dark:border-emerald-500/20 hover:border-emerald-400/80 dark:hover:border-emerald-400/30"
: "shadow-indigo-100/30 dark:shadow-indigo-900/10 border border-indigo-300/70 dark:border-indigo-500/20 hover:border-indigo-400/80 dark:hover:border-indigo-400/30"
}`
: `${
isBusy
? `${
isMorpheusMode
? "shadow-none border border-emerald-300/70 dark:border-emerald-800/30 rounded-b-none overflow-hidden bg-white/95 dark:bg-black/95 backdrop-blur-md"
: "shadow-none border border-indigo-300/70 dark:border-indigo-800/30 rounded-b-none overflow-hidden bg-white/95 dark:bg-black/95 backdrop-blur-md"
? "shadow-none border border-emerald-300/70 dark:border-emerald-800/30 overflow-hidden bg-white/95 dark:bg-neutral-800 backdrop-blur-md"
: "shadow-none border border-indigo-300/70 dark:border-indigo-800/30 overflow-hidden bg-white/95 dark:bg-neutral-800 backdrop-blur-md"
}`
: `shadow-none border shadow-lg backdrop-blur-md bg-white/15 dark:bg-black/15 ${
isMorpheusMode
? "border-emerald-300/70 dark:border-emerald-800/30 dark:border-emerald-500/20 hover:border-emerald-400/80 dark:hover:border-emerald-400/30"
: "border-indigo-300/70 dark:border-indigo-800/30 dark:border-indigo-500/20 hover:border-indigo-400/80 dark:hover:border-indigo-400/30"
} overflow-hidden bg-white/95 dark:bg-neutral-800 backdrop-blur-md`
}`}
variants={inputVariants}
initial="hidden"
Expand All @@ -415,17 +412,14 @@ export default function BaseChatInput({
text-sm sm:text-base
min-h-[50px] sm:min-h-[56px]
bg-transparent
${
!isInChatMode && !isBusy
? isMorpheusMode
? "group-hover:bg-emerald-50/10 dark:group-hover:bg-emerald-950/10"
: "group-hover:bg-indigo-50/10 dark:group-hover:bg-indigo-950/10"
: ""
}
border-none
border-b-0
text-gray-800 dark:text-gray-100
placeholder:text-gray-500 dark:placeholder:text-gray-500
${
isMorpheusMode
? "placeholder:text-emerald-900/40 dark:placeholder:text-emerald-100/60"
: "placeholder:text-indigo-900/40 dark:placeholder:text-indigo-100/60"
}
placeholder:text-sm
focus:ring-0 focus:ring-offset-0
focus:outline-none
Expand All @@ -444,33 +438,20 @@ export default function BaseChatInput({
className={`
w-full h-[36px]
flex items-center
${
isInChatMode
? showReloadButton
? "rounded-b-none"
: "rounded-b-xl"
: "rounded-b-xl"
} rounded-t-xl
rounded-b-xl
border-none
border-t-0
shadow-none
pt-0
mt-0
bg-transparent
${
!isInChatMode && !isBusy
? isMorpheusMode
? "group-hover:bg-emerald-50/10 dark:group-hover:bg-emerald-950/10"
: "group-hover:bg-indigo-50/10 dark:group-hover:bg-indigo-950/10"
: ""
} pb-1
bg-transparent pb-1
transition-all duration-200
`}
>
<div className="ml-2 flex items-center gap-1">
{/* Mode Toggle Buttons - Bottom left */}
<motion.div
className={`inline-flex rounded-lg p-0.5 bg-gray-100/70 dark:bg-gray-900/70 backdrop-blur-sm border border-gray-200 dark:border-gray-800
className={`inline-flex rounded-lg p-0.5 bg-gray-100/70 dark:bg-neutral-900/70 backdrop-blur-sm border border-gray-200 dark:border-gray-800
${isBusy ? "relative opacity-90" : ""}`}
variants={toggleVariants}
initial="hidden"
Expand Down
1 change: 0 additions & 1 deletion src/components/chat/chat-input-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@ export default function RootChatInput({
onChange={onChange}
initialMode={initialMode}
onSubmit={onSubmit}
isInChatMode={false}
showReloadButton={false}
className={className}
/>
Expand Down
1 change: 0 additions & 1 deletion src/components/chat/chat-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ export default function ChatInput({
initialMode={initialMode}
onSubmitMessage={onSubmitMessage}
onSubmit={onSubmit}
isInChatMode={true}
showReloadButton={!isPendingResponse}
className={className}
/>
Expand Down
Loading