From c4fe34ed231105345fb0b95eb8baa350e98b1afe Mon Sep 17 00:00:00 2001 From: MT-Mint <798521692@qq.com> Date: Wed, 15 Apr 2026 17:37:20 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=AE=8B=E5=AF=B9ui=E5=92=8C?= =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86placeholder=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/workspace/chats/[thread_id]/page.tsx | 35 +++++----- .../ai-elements/chain-of-thought.tsx | 2 +- .../src/components/ai-elements/message.tsx | 12 +++- .../src/components/ai-elements/suggestion.tsx | 2 +- .../artifacts/artifact-file-list.tsx | 15 +++-- .../src/components/workspace/input-box.tsx | 2 +- .../workspace/messages/message-group.tsx | 5 +- .../workspace/messages/message-list-item.tsx | 5 +- .../workspace/messages/message-list.tsx | 6 ++ frontend/src/core/i18n/locales/zh-CN.ts | 2 +- frontend/src/styles/globals.css | 66 ++++++++++++++++++- 11 files changed, 117 insertions(+), 35 deletions(-) diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx index 86f0ec1f..254e6191 100644 --- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx +++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx @@ -472,8 +472,22 @@ export default function ChatPage() { /> ) : (
-
-
+ {thread.values.artifacts?.length === 0 ? ( + } + title="No artifact selected" + description="Select an artifact to view its details" + /> + ) : ( +
+
+

+ {t.common.artifacts} +

+ -
- {thread.values.artifacts?.length === 0 ? ( - } - title="No artifact selected" - description="Select an artifact to view its details" - /> - ) : ( -
-
-

- {t.common.artifacts} -

@@ -656,7 +657,7 @@ export default function ChatPage() { {/* MARK: 开发测试：iframe 通信功能测试面板 */} - {process.env.NODE_ENV !== "production" && } + {/* {process.env.NODE_ENV !== "production" && } */}
); diff --git a/frontend/src/components/ai-elements/chain-of-thought.tsx b/frontend/src/components/ai-elements/chain-of-thought.tsx index 8fda3db0..715292de 100644 --- a/frontend/src/components/ai-elements/chain-of-thought.tsx +++ b/frontend/src/components/ai-elements/chain-of-thought.tsx @@ -207,7 +207,7 @@ export const ChainOfThoughtContent = memo( & { from: UIMessage["role"]; + isFirstInSession?: boolean; }; -export const Message = ({ className, from, ...props }: MessageProps) => ( +export const Message = ({ + className, + from, + isFirstInSession = false, + ...props +}: MessageProps) => (
( handleClick(file)} > - +
-
- {getFileIcon(file, "size-6 stroke-[1.5px] stroke-[#333333]")} +
+ {getFileIcon(file, "size-9 stroke-[1px] stroke-[#333333]")}
- + {getFileExtensionDisplayName(file)} file @@ -124,7 +124,10 @@ export function ArtifactFileList({ target="_blank" onClick={(e) => e.stopPropagation()} > - diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx index 97c29d19..748ae047 100644 --- a/frontend/src/components/workspace/input-box.tsx +++ b/frontend/src/components/workspace/input-box.tsx @@ -741,7 +741,7 @@ export function InputBox({ "pointer-events-none invisible h-[0px] translate-y-2 p-[0px] opacity-0", )} > - + {/* TODO: Add more connectors here diff --git a/frontend/src/components/workspace/messages/message-group.tsx b/frontend/src/components/workspace/messages/message-group.tsx index 3f6a7315..4a7cd4ec 100644 --- a/frontend/src/components/workspace/messages/message-group.tsx +++ b/frontend/src/components/workspace/messages/message-group.tsx @@ -125,7 +125,8 @@ export function MessageGroup({ {aboveLastToolCallSteps.length > 0 && ( )} {shouldShowToolSteps && ( - + {showAbove && aboveLastToolCallSteps.map((step) => step.type === "reasoning" ? ( diff --git a/frontend/src/components/workspace/messages/message-list-item.tsx b/frontend/src/components/workspace/messages/message-list-item.tsx index 5b2b8952..e19ba516 100644 --- a/frontend/src/components/workspace/messages/message-list-item.tsx +++ b/frontend/src/components/workspace/messages/message-list-item.tsx @@ -41,11 +41,13 @@ export function MessageListItem({ message, isLoading, threadId, + isFirstInSession = false, }: { className?: string; message: Message; isLoading?: boolean; threadId: string; + isFirstInSession?: boolean; }) { const isHuman = message.type === "human"; return ( @@ -55,6 +57,7 @@ export function MessageListItem({ className, )} from={isHuman ? "user" : "assistant"} + isFirstInSession={isFirstInSession} > diff --git a/frontend/src/components/workspace/messages/message-list.tsx b/frontend/src/components/workspace/messages/message-list.tsx index 3c0bcb2a..8bb5bbf2 100644 --- a/frontend/src/components/workspace/messages/message-list.tsx +++ b/frontend/src/components/workspace/messages/message-list.tsx @@ -55,6 +55,9 @@ export function MessageList({ const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading); const updateSubtask = useUpdateSubtask(); const messages = messagesOverride ?? thread.messages; + const firstConversationMessageId = messages.find( + (message) => message.name !== "todo_reminder", + )?.id; if (thread.isThreadLoading && !suppressThreadLoading) { return ; } @@ -71,6 +74,9 @@ export function MessageList({ message={group.messages[0]!} isLoading={thread.isLoading} threadId={threadId} + isFirstInSession={ + group.messages[0]?.id === firstConversationMessageId + } /> ); } else if (group.type === "assistant:clarification") { diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts index 25ccee6d..83696780 100644 --- a/frontend/src/core/i18n/locales/zh-CN.ts +++ b/frontend/src/core/i18n/locales/zh-CN.ts @@ -77,7 +77,7 @@ export const zhCN: Translations = { // Input Box inputBox: { - placeholder: "先输入说明需求，选择Skill，开始使用吧", + placeholder: "可直接聊天，或者输入需求并选择skill，完成更专业的任务", createSkillPrompt: "我们一起用 skill-creator 技能来创建一个技能吧。先问问我希望这个技能能做什么。", sendMessagePrice: diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css index 7c3169a8..a84533af 100644 --- a/frontend/src/styles/globals.css +++ b/frontend/src/styles/globals.css @@ -247,7 +247,9 @@ --accent: #1500331a; --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0.0098 87.47); + --border: #00000015; + /* --border: oklch(92.23% 0.00983 87.442 / 0.09); */ + --input: oklch(0.88 0.0098 87.47); --ring: transparent; --chart-1: oklch(0.646 0.222 41.116); @@ -282,7 +284,7 @@ --accent: oklch(0.32 0.0036 106.64); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0.191 22.216 / 10%); + --border: oklch(87.64% 0.06554 21.887 / 0.038); --input: oklch(1 0 0 / 15%); --ring: transparent; --chart-1: oklch(0.488 0.243 264.376); @@ -441,6 +443,10 @@ pre { font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif !important; } +pre{ + border-radius: 5px; + padding: 12px 16px; +} /* 列表项 - 14px */ [data-streamdown="list-item"] { @@ -465,6 +471,62 @@ pre { font-size: calc(14px * var(--zoom-scale)); } +/* 代码块 - 14px */ + +[data-streamdown="table"] { + border: none; + border-collapse: separate; + border-spacing: 0; +} + +[data-streamdown="table-cell"] { + background-color: transparent; +} +[data-streamdown="table-header"] { + background: #9c9b9b26; + height: 50px; +} +[data-streamdown="table-header"] th { + text-align: center; +} + + +/* 表格四角圆角：由四个角单元格承担视觉圆角 */ +[data-streamdown="table-header"] tr:first-child > [data-streamdown="table-header-cell"]:first-child { + border-top-left-radius: 5px; +} + +[data-streamdown="table-header"] tr:first-child > [data-streamdown="table-header-cell"]:last-child { + border-top-right-radius: 5px; +} +[data-streamdown="table-body"] tr:first-child td{ + padding-top: 20px; +} +/* 行分隔线 */ +[data-streamdown="table-body"] tr{ + border-bottom: 1px solid var(--border); +} +[data-streamdown="table-body"] tr:last-child > [data-streamdown="table-cell"]:first-child { + border-bottom-left-radius: 5px; +} + +[data-streamdown="table-body"] tr:last-child > [data-streamdown="table-cell"]:last-child { + border-bottom-right-radius: 5px; +} + +[data-streamdown="table-body"] tr:last-child { + height: 50px; + +} +[data-streamdown="table-row"] >[data-streamdown="table-cell"]{ +line-height: 14px; +vertical-align: top; + text-align: center; + +} + + + .cm-line { font-size: calc(14px * var(--zoom-scale)); white-space: pre-wrap;