wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update UI components for improved styling and consistency across conversation panels

Browse Source
This commit is contained in:
mlogclub
2026-05-24 15:32:19 +08:00
parent af2280ee45
commit 17959b18b4
5 changed files with 60 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/conversations/_components/chat-panel.tsx
+2 -2
View File
@@ -173,7 +173,7 @@ export function ChatPanel() {
toast.error(error instanceof Error ? error.message : "设置已读失败");
});
}, [
conversation?.id,
conversation,
getViewport,
isNearBottom,
loading,
@@ -386,7 +386,7 @@ export function ChatPanel() {
);
const bottomPanel = (
<div className="h-full overflow-auto border-t border-border bg-background">
<div className="h-full overflow-auto border-t border-border/80 bg-card">
{isClosedConversation ? (
<div className="h-full flex justify-center items-center">
当前会话已关闭
web/app/dashboard/conversations/_components/conversation-info-panel.tsx
+3 -3
View File
@@ -199,12 +199,12 @@ export function ConversationInfoPanel({
className={cn(
"flex h-full min-h-0 flex-col overflow-hidden",
embedded
? "bg-background text-foreground"
: "border-border bg-card text-card-foreground",
? "bg-card text-card-foreground"
: "border-border/80 bg-card text-card-foreground",
className,
)}
>
<div className="flex h-12.5 shrink-0 items-center border-b border-border px-3">
<div className="flex h-12.5 shrink-0 items-center border-b border-border/80 bg-card px-3">
<h2 className="text-sm font-medium text-foreground">会话信息</h2>
</div>
web/app/dashboard/conversations/_components/conversation-list.tsx
+7 -7
View File
@@ -15,9 +15,9 @@ import { formatDateTime } from "@/lib/utils";
function getStatusVariant(status: number) {
switch (status) {
case IMConversationStatus.AIServing:
return "bg-violet-500/15 text-violet-700 dark:bg-violet-500/20 dark:text-violet-300"
return "bg-primary/10 text-primary"
case IMConversationStatus.Pending:
return "bg-blue-500/15 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
return "bg-amber-500/15 text-amber-800 dark:bg-amber-500/20 dark:text-amber-300"
case IMConversationStatus.Active:
return "bg-emerald-500/15 text-emerald-800 dark:bg-emerald-500/20 dark:text-emerald-300"
case IMConversationStatus.Closed:
@@ -49,8 +49,8 @@ export function ConversationList({ onAfterSelect }: ConversationListProps) {
return (
<div
key={conversation.id}
className={`cursor-pointer px-2.5 py-1.5 transition-colors hover:bg-muted/50 border-b ${
isSelected ? "bg-muted/80" : ""
className={`cursor-pointer border-b border-border/80 px-3 py-2 transition-colors hover:bg-muted/40 ${
isSelected ? "bg-accent/70" : ""
}`}
onClick={() => {
void selectConversation(conversation.id).then(
@@ -65,7 +65,7 @@ export function ConversationList({ onAfterSelect }: ConversationListProps) {
<div className="flex items-center gap-2">
<Avatar className="size-7 shrink-0">
<AvatarImage src="" />
<AvatarFallback className="bg-primary/10">
<AvatarFallback className="bg-primary/10 text-primary">
<UserIcon className="size-3.5 text-primary" />
</AvatarFallback>
</Avatar>
@@ -94,7 +94,7 @@ export function ConversationList({ onAfterSelect }: ConversationListProps) {
</div>
<div className="mt-1 flex items-center gap-1 text-[10px] text-muted-foreground">
<span
className={`rounded px-1 py-0.5 ${getStatusVariant(
className={`rounded-md px-1.5 py-0.5 ${getStatusVariant(
conversation.status
)}`}
>
@@ -102,7 +102,7 @@ export function ConversationList({ onAfterSelect }: ConversationListProps) {
</span>
{conversation.status === IMConversationStatus.Pending &&
conversation.currentTeamName ? (
<span className="rounded bg-muted px-1 py-0.5">
<span className="rounded-md bg-muted px-1.5 py-0.5">
值班组：{conversation.currentTeamName}
</span>
) : null}