Skip to content

Commit

Permalink
fix history panel colors in light mode (#119)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anirudTT
anirudTT committed Dec 20, 2024
1 parent 5feb247 commit 7decc1f
Showing 1 changed file with 89 additions and 96 deletions.
185 changes: 89 additions & 96 deletions app/frontend/src/components/chatui/HistoryPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,113 +43,106 @@ export function HistoryPanel({
);

return (
<div className="flex flex-col max-w-xl h-full rounded-lg border border-slate-300 bg-[#1C1C1C] dark:bg-[#1C1C1C] dark:border-[#7C68FA]/20">
<div className="flex flex-col h-full rounded-lg border border-slate-200 bg-white dark:bg-[#1C1C1C] dark:border-[#7C68FA]/20">
<div className="flex-none p-4">
<div className="flex items-start px-5">
<h2 className="text-lg font-medium text-slate-800 dark:text-slate-200">
Chats
</h2>
<span className="ml-2 rounded-full bg-[#7C68FA] px-2 py-1 text-xs text-slate-200">
<div className="flex items-center px-4 mb-6">
<h2 className="text-lg font-medium">Chats</h2>
<span className="ml-2 rounded-full bg-[#7C68FA] px-2 py-1 text-xs">
{conversations.length}
</span>
</div>
<div className="mx-2 mt-8">
<div className="relative">
<Input
type="text"
className="w-full rounded-lg border-0 bg-[#2A2A2A] p-3 pr-10 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-[#7C68FA] placeholder:text-slate-400"
placeholder="Search chats"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Button
type="button"
className="absolute right-1 top-1/2 -translate-y-1/2 rounded-lg p-2 text-sm text-slate-400 hover:text-[#7C68FA] focus:outline-none"
>
<Search className="h-5 w-5" />
<span className="sr-only">Search chats</span>
</Button>
</div>
<div className="relative px-2">
<Input
type="text"
className="w-full h-9 bg-slate-100 dark:bg-[#2A2A2A] border border-slate-200 dark:border-0 rounded-lg pl-9 text-slate-800 dark:text-zinc-200 placeholder:text-slate-400 dark:placeholder:text-zinc-400 focus:ring-2 focus:ring-[#7C68FA] transition-all"
placeholder="Search Chats"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Search className="absolute left-5 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
</div>
</div>
<ScrollArea className="flex-grow px-2 my-4">
{filteredConversations.map((conversation) => (
<div
key={conversation.id}
className={`flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-[#3A3A3A] cursor-pointer rounded-lg mb-2 ${
conversation.id === currentConversationId
? "bg-gray-200 dark:bg-[#3A3A3A]"
: ""
}`}
onClick={() => onSelectConversation(conversation.id)}
>
<div className="flex items-center flex-grow mr-2">
<MessageSquare className="mr-2 h-4 w-4 text-gray-600 dark:text-gray-300" />
{editingId === conversation.id ? (
<Input
value={editTitle}
onChange={(e) => setEditTitle(e.target.value)}
onBlur={() => handleEditSave(conversation.id)}
onKeyPress={(e) =>
e.key === "Enter" && handleEditSave(conversation.id)
}
className="h-6 text-sm"
autoFocus
/>
) : (
<span className="truncate text-slate-200">
{searchQuery &&
conversation.title
.toLowerCase()
.includes(searchQuery.toLowerCase())
? conversation.title
.split(new RegExp(`(${searchQuery})`, "gi"))
.map((part, i) =>
part.toLowerCase() === searchQuery.toLowerCase() ? (
<span key={i} className="bg-[#7C68FA]/30">
{part}
</span>
) : (
part
),
)
: conversation.title}
</span>
)}
</div>
<div className="flex">
<Button
variant="ghost"
size="icon"
onClick={(e) => {
e.stopPropagation();
handleEditStart(conversation.id, conversation.title);
}}
className="h-6 w-6"
>
<Edit2 className="h-3 w-3 text-gray-600 dark:text-gray-300" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={(e) => {
e.stopPropagation();
onDeleteConversation(conversation.id);
}}
className="h-6 w-6"
>
<Trash2 className="h-3 w-3 text-gray-600 dark:text-gray-300" />
</Button>
<ScrollArea className="flex-grow px-4">
<div className="space-y-1">
{filteredConversations.map((conversation) => (
<div
key={conversation.id}
className={`group flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all duration-200
${
conversation.id === currentConversationId
? "bg-slate-200 dark:bg-[#3A3A3A]"
: "hover:bg-slate-100 dark:hover:bg-[#2A2A2A]"
}`}
onClick={() => onSelectConversation(conversation.id)}
>
<div className="flex items-center flex-grow min-w-0">
<MessageSquare className="shrink-0 mr-2 h-4 w-4 text-zinc-400" />
{editingId === conversation.id ? (
<Input
value={editTitle}
onChange={(e) => setEditTitle(e.target.value)}
onBlur={() => handleEditSave(conversation.id)}
onKeyPress={(e) =>
e.key === "Enter" && handleEditSave(conversation.id)
}
className="h-6 text-sm bg-[#2A2A2A] border-0 focus:ring-2 focus:ring-[#7C68FA]"
autoFocus
/>
) : (
<span className="truncate text-slate-800 dark:text-slate-200">
{searchQuery &&
conversation.title
.toLowerCase()
.includes(searchQuery.toLowerCase())
? conversation.title
.split(new RegExp(`(${searchQuery})`, "gi"))
.map((part, i) =>
part.toLowerCase() === searchQuery.toLowerCase() ? (
<span key={i} className="bg-[#7C68FA]/30">
{part}
</span>
) : (
part
),
)
: conversation.title}
</span>
)}
</div>
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<Button
variant="ghost"
size="icon"
className="h-6 w-6 hover:bg-slate-200 dark:hover:bg-[#3A3A3A] hover:text-[#7C68FA] transition-colors"
onClick={(e) => {
e.stopPropagation();
handleEditStart(conversation.id, conversation.title);
}}
>
<Edit2 className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-6 w-6 hover:bg-slate-200 dark:hover:bg-[#3A3A3A] hover:text-[#7C68FA] transition-colors"
onClick={(e) => {
e.stopPropagation();
onDeleteConversation(conversation.id);
}}
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
</div>
</div>
))}
))}
</div>
</ScrollArea>
<div className="flex-none p-4 mt-auto">
<div className="flex-none p-4">
<Button
onClick={onCreateNewConversation}
className="flex w-full justify-center items-center rounded-lg bg-[#7C68FA] p-4 text-sm font-medium text-white transition-colors duration-200 hover:bg-[#7C68FA]/90 focus:outline-none"
className="w-full bg-[#7C68FA] dark:bg-[#7C68FA] hover:bg-[#7C68FA]/80 dark:hover:bg-[#7C68FA]/90 text-white transition-colors flex items-center justify-center gap-2 py-4 rounded-lg"
>
<PlusCircle className="mr-2 h-4 w-4" />
<PlusCircle className="h-4 w-4" />
New Chat
</Button>
</div>
Expand Down

0 comments on commit 7decc1f

Please sign in to comment.