Skip to content

Commit 1ff6422

Browse files
wasagawasaga
authored
Merge branch 'main' into nickytonline/reasoning-model-output
2 parents 5d9f96a + aad488e commit 1ff6422

12 files changed

Lines changed: 347 additions & 576 deletions

File tree

‎public/Pomerium-icon.png‎

240 KB
Loading

‎public/Pomerium-icon.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/components/ChatInput.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useRef, useEffect } from 'react'
22
import { Button } from './ui/button'
33
import { Send } from 'lucide-react'
4+
import { Textarea } from './ui/textarea'
45

56
type ChatInputProps = {
67
onSendMessage: (message: string) => void
@@ -49,11 +50,11 @@ export function ChatInput({
4950

5051
return (
5152
<form
52-
className="flex items-end gap-2 p-4 border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 backdrop-blur-sm shadow-sm"
53+
className="flex items-end gap-2 p-4 border-t border-gray-200 dark:border-gray-800 bg-background backdrop-blur-sm shadow-t-sm"
5354
onSubmit={handleSubmit}
5455
>
55-
<div className="relative flex-1">
56-
<textarea
56+
<div className="relative flex-1 flex items-center">
57+
<Textarea
5758
ref={textareaRef}
5859
value={value}
5960
onChange={onChange}
@@ -62,14 +63,15 @@ export function ChatInput({
6263
required
6364
disabled={disabled}
6465
rows={1}
65-
className="w-full resize-none bg-gray-100 dark:bg-gray-800 rounded-lg border-0 px-4 py-3 pr-12 text-sm placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 disabled:opacity-50 transition-all"
66+
className="w-full resize-none rounded-lg border-0 pr-12 text-sm placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 disabled:opacity-50 transition-all"
6667
/>
6768
<Button
6869
type="submit"
69-
className="absolute right-2 bottom-3 flex h-8 w-8 items-center justify-center p-0"
70+
variant="default"
71+
className="absolute right-2 size-8"
7072
aria-label="Send message"
7173
>
72-
<Send className="h-5 w-5" />
74+
<Send className="size-4" />
7375
</Button>
7476
</div>
7577
</form>

‎src/components/Header.tsx‎

Lines changed: 93 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react'
1+
import React, { useEffect, useState } from 'react'
22
import { Link } from '@tanstack/react-router'
3-
import { MessageSquareText, ChevronLeft, User, Settings2 } from 'lucide-react'
3+
import { ChevronLeft, User, Settings2, Menu } from 'lucide-react'
44
import {
55
DropdownMenu,
66
DropdownMenuTrigger,
@@ -17,39 +17,40 @@ import { useRouteMatch } from '../hooks/useRouteMatch'
1717
const Header: React.FC = () => {
1818
const { selectedModel, setSelectedModel } = useModel()
1919
const isSettingsPage = useRouteMatch('/settings')
20+
const [isDark, setIsDark] = useState(false);
2021

21-
return (
22-
<header className="sticky top-0 z-50 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 px-4 py-3 flex justify-between items-center">
23-
<div className="flex items-center gap-2">
24-
<MessageSquareText className="h-6 w-6 text-indigo-600 dark:text-indigo-400" />
25-
<h1 className="text-xl font-semibold">PomChat</h1>
22+
useEffect(() => {
23+
setIsDark(document.documentElement.classList.contains("dark"));
24+
// Optionally, subscribe to theme changes
25+
const observer = new MutationObserver(() => {
26+
setIsDark(document.documentElement.classList.contains("dark"));
27+
});
28+
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
29+
return () => observer.disconnect();
30+
}, []);
2631

27-
<ModelSelect value={selectedModel} onValueChange={setSelectedModel} />
28-
</div>
32+
33+
return (
34+
<header className="sticky top-0 z-50 bg-primary dark:bg-background border-b px-4 py-3 flex justify-between items-center">
2935
<div className="flex items-center gap-2">
30-
{isSettingsPage && (
31-
<Link
32-
to="/"
33-
className="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
34-
>
35-
<ChevronLeft className="h-4 w-4" />
36-
Back to Chat
37-
</Link>
38-
)}
39-
<ThemeToggle />
4036
<DropdownMenu>
4137
<DropdownMenuTrigger asChild>
42-
<Button
43-
variant="ghost"
44-
size="sm"
45-
className="relative h-10 w-10 rounded-full"
46-
>
47-
<div className="flex h-full w-full items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900">
48-
<User className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
49-
</div>
38+
<Button variant="secondary" className='size-10 flex md:hidden justify-center items-center rounded-full'>
39+
<Menu className='size-4' />
5040
</Button>
5141
</DropdownMenuTrigger>
52-
<DropdownMenuContent align="end" className="w-56">
42+
<DropdownMenuContent className='mx-4 my-2'>
43+
{isSettingsPage && (
44+
<>
45+
<DropdownMenuItem asChild>
46+
<Link to="/" className='flex gap-2 items-center justify-between'>
47+
<ChevronLeft className="size-4" />
48+
Back to Chat
49+
</Link>
50+
</DropdownMenuItem>
51+
<DropdownMenuSeparator />
52+
</>
53+
)}
5354
<div className="px-2 py-1.5">
5455
<p className="text-sm font-medium">User Account</p>
5556
<p className="text-xs text-gray-500 dark:text-gray-400">
@@ -74,6 +75,70 @@ const Header: React.FC = () => {
7475
</DropdownMenuItem>
7576
</DropdownMenuContent>
7677
</DropdownMenu>
78+
<a href="https://pomerium.com" target='_blank'>
79+
<img
80+
src={isDark ? "/pomerium-icon.svg" : "/pomerium-icon.png"}
81+
alt="Pomerium Logo"
82+
className='w-8 hover:-translate-y-0.5 transition-all'
83+
/>
84+
</a>
85+
<Link to="/">
86+
<h1 className="text-xl font-bold text-white">PomChat</h1>
87+
</Link>
88+
<ModelSelect value={selectedModel} onValueChange={setSelectedModel} />
89+
</div>
90+
91+
92+
93+
94+
<div className="flex items-center gap-2">
95+
{isSettingsPage && (
96+
<Link
97+
to="/"
98+
className="hidden md:flex items-center gap-2 text-sm text-primary-foreground hover:bg-secondary hover:text-secondary-foreground rounded-lg px-2 py-1 transition-colors"
99+
>
100+
<ChevronLeft className="h-4 w-4" />
101+
Back to Chat
102+
</Link>
103+
)}
104+
<ThemeToggle />
105+
<span className='hidden md:inline-block'>
106+
<DropdownMenu>
107+
<DropdownMenuTrigger asChild>
108+
<Button
109+
variant="secondary"
110+
size="sm"
111+
className="size-10 flex items-center justify-center rounded-full"
112+
>
113+
<User className="h-5 w-5 text-secondary-foreground" />
114+
</Button>
115+
</DropdownMenuTrigger>
116+
<DropdownMenuContent align="end" className="w-56">
117+
<div className="px-2 py-1.5">
118+
<p className="text-sm font-medium">User Account</p>
119+
<p className="text-xs text-gray-500 dark:text-gray-400">
120+
user@example.com
121+
</p>
122+
</div>
123+
<DropdownMenuSeparator />
124+
<DropdownMenuItem asChild>
125+
<Link to="/settings" className="w-full flex items-center">
126+
<Settings2 className="mr-2 h-4 w-4" />
127+
<span>Settings</span>
128+
</Link>
129+
</DropdownMenuItem>
130+
<DropdownMenuSeparator />
131+
<DropdownMenuItem asChild>
132+
<a
133+
href="/.pomerium/sign_out"
134+
className="w-full flex items-center text-red-600 dark:text-red-400"
135+
>
136+
<span>Sign out</span>
137+
</a>
138+
</DropdownMenuItem>
139+
</DropdownMenuContent>
140+
</DropdownMenu>
141+
</span>
77142
</div>
78143
</header>
79144
)

‎src/components/ModelSelect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
2626
return (
2727
<DropdownMenu>
2828
<DropdownMenuTrigger asChild>
29-
<Button variant="outline" className="w-[240px] justify-between">
29+
<Button variant="outline" className="w-fit max-w-[100px] md:max-w-[240px] justify-between">
3030
<span className="truncate block max-w-[160px] overflow-hidden whitespace-nowrap">
3131
{value || 'Select a model'}
3232
</span>

0 commit comments

Comments
 (0)