Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Q
qjclaw-dmg
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
AI-甘富林
qjclaw-dmg
Commits
fc12bfc3
Commit
fc12bfc3
authored
Apr 30, 2026
by
AI-甘富林
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
样式修改
parent
7ca78b1b
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
592 additions
and
28 deletions
+592
-28
App.tsx
apps/ui/src/App.tsx
+30
-20
styles.css
apps/ui/src/styles.css
+562
-8
No files found.
apps/ui/src/App.tsx
View file @
fc12bfc3
...
...
@@ -138,12 +138,12 @@ const IMAGE_ATTACHMENT_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".webp", "
const
DOCUMENT_ATTACHMENT_EXTENSIONS
=
new
Set
([
".pdf"
,
".ppt"
,
".pptx"
,
".xls"
,
".xlsx"
,
".csv"
,
".tsv"
,
".doc"
,
".docx"
,
".txt"
,
".md"
,
".json"
,
".mp3"
]);
const
SUPPORTED_ATTACHMENT_EXTENSIONS
=
new
Set
([...
IMAGE_ATTACHMENT_EXTENSIONS
,
...
DOCUMENT_ATTACHMENT_EXTENSIONS
]);
const
COMPOSER_ATTACHMENT_ACCEPT
=
[...
SUPPORTED_ATTACHMENT_EXTENSIONS
].
join
(
","
);
const
COMPOSER_TEXTAREA_DEFAULT_MIN_HEIGHT
=
4
8
;
const
COMPOSER_TEXTAREA_SAFE_MIN_HEIGHT
=
3
8
;
const
COMPOSER_TEXTAREA_MAX_HEIGHT
=
1
88
;
const
COMPOSER_TEXTAREA_DEFAULT_RATIO
=
0.1
45
;
const
COMPOSER_TEXTAREA_MIN_RATIO
=
0.
12
;
const
COMPOSER_TEXTAREA_MAX_RATIO
=
0.
32
;
const
COMPOSER_TEXTAREA_DEFAULT_MIN_HEIGHT
=
3
8
;
const
COMPOSER_TEXTAREA_SAFE_MIN_HEIGHT
=
3
0
;
const
COMPOSER_TEXTAREA_MAX_HEIGHT
=
1
50
;
const
COMPOSER_TEXTAREA_DEFAULT_RATIO
=
0.1
16
;
const
COMPOSER_TEXTAREA_MIN_RATIO
=
0.
096
;
const
COMPOSER_TEXTAREA_MAX_RATIO
=
0.
256
;
function
getComposerTextareaBounds
(
workspaceHeight
:
number
):
{
min
:
number
;
max
:
number
}
{
const
safeWorkspaceHeight
=
Number
.
isFinite
(
workspaceHeight
)
&&
workspaceHeight
>
0
?
workspaceHeight
:
0
;
...
...
@@ -313,6 +313,24 @@ function buildUserMessage(content: string): UiChatMessage {
};
}
function
formatMessageTimestamp
(
value
:
string
):
string
{
const
date
=
new
Date
(
value
);
if
(
Number
.
isNaN
(
date
.
getTime
()))
{
return
value
;
}
const
pad
=
(
part
:
number
)
=>
String
(
part
).
padStart
(
2
,
"0"
);
return
[
date
.
getFullYear
(),
pad
(
date
.
getMonth
()
+
1
),
pad
(
date
.
getDate
())
].
join
(
"-"
)
+
" "
+
[
pad
(
date
.
getHours
()),
pad
(
date
.
getMinutes
()),
pad
(
date
.
getSeconds
())
].
join
(
":"
);
}
function
buildAssistantPlaceholder
(
statusLabel
:
string
):
UiChatMessage
{
return
{
id
:
createClientMessageId
(
"assistant"
),
...
...
@@ -549,7 +567,7 @@ function renderExpertIcon(expertKey: ExpertVisualKey): ReactNode {
function
getIntentSuggestionIcon
(
platform
?:
string
):
ReactNode
{
const
normalized
=
platform
?.
trim
().
toLowerCase
();
if
(
normalized
===
"xiaohongshu"
)
{
if
(
normalized
===
"xiaohongshu"
||
normalized
===
"xhs"
||
normalized
===
"rednote"
)
{
return
<
RedBookIcon
/>;
}
if
(
normalized
===
"douyin"
)
{
...
...
@@ -2199,7 +2217,7 @@ export default function App() {
const [isComposerDragOver, setIsComposerDragOver] = useState(false);
const [isComposerResizeActive, setIsComposerResizeActive] = useState(false);
const [composerTextareaRatio, setComposerTextareaRatio] = useState(COMPOSER_TEXTAREA_DEFAULT_RATIO);
const [composerTextareaHeight, setComposerTextareaHeight] = useState(
96
);
const [composerTextareaHeight, setComposerTextareaHeight] = useState(
77
);
const [composerWorkspaceHeight, setComposerWorkspaceHeight] = useState(0);
const [copiedToken, setCopiedToken] = useState("");
const activeStreamRef = useRef<ActiveStreamState | null>(null);
...
...
@@ -4773,6 +4791,7 @@ export default function App() {
</div>
) : null}
</div>
<span className="message-timestamp" aria-hidden="true">{formatMessageTimestamp(message.createdAt)}</span>
{message.role === "assistant" && canCopyMessage ? (
<div className="message-card-actions">
<button
...
...
@@ -4825,7 +4844,7 @@ export default function App() {
</div>
);
const conversationStatusNotice = showInlineStartupNotice ? (
<div className={"notice" + (chatLaunchState === "error" ? " error" : " toast-notice")}>
<div className={"notice" + (chatLaunchState === "error" ? " error" : " toast-notice")}
role={chatLaunchState === "error" ? "alert" : "status"} aria-live="polite"
>
{startupCurtainStatus}
</div>
) : null;
...
...
@@ -4843,20 +4862,11 @@ export default function App() {
{pendingHomeIntentSuggestion.suggestion.projectDisplayName}
{ui.suggestionSwitchSuffix}
</p>
<span>
{pendingHomeIntentSuggestion.suggestion.reason}
{pendingHomeIntentSuggestion.suggestion.matchedAliases.length
? `
·
$
{
pendingHomeIntentSuggestion
.
suggestion
.
matchedAliases
.
join
(
" / "
)}
`
: ""}
</span>
</div>
<div className="home-intent-suggestion-actions">
<button type="button" className="secondary" disabled={homeIntentDecisionPending} onClick={() => void continuePendingHomePromptInHome()}>
{ui.suggestionContinue}
</button>
<button type="button" className="secondary home-intent-suggestion-dismiss" disabled={homeIntentDecisionPending} onClick={dismissPendingHomeIntentSuggestion}>
{ui.suggestionDismiss}
</button>
<button type="button" disabled={homeIntentDecisionPending} onClick={() => void switchExpertAndContinuePendingHomePrompt()}>
{ui.suggestionSwitchAction}
</button>
...
...
@@ -5155,8 +5165,8 @@ export default function App() {
</div>
</aside>
<div className={"main-shell" + (isConversationView ? " conversation-main-layout" : "") + (viewMode === "settings" ? " settings-main-shell" : "")}>
{infoText ? <div className="notice toast-notice">{infoText}</div> : null}
{errorText ? <div className="notice error">{errorText}</div> : null}
{infoText ? <div className="notice toast-notice"
role="status" aria-live="polite"
>{infoText}</div> : null}
{errorText ? <div className="notice error"
role="alert"
>{errorText}</div> : null}
<main className={"content-area" + (isConversationView ? " conversation-content-area" : "")}>
{isConversationView ? (
<section className="chat-panel conversation-panel">
...
...
apps/ui/src/styles.css
View file @
fc12bfc3
...
...
@@ -77,11 +77,38 @@
--shadow-floating
:
0
20px
40px
rgba
(
139
,
92
,
246
,
0.15
);
/* ===== 全局基础样式 ===== */
--color-primary-50
:
#EFF6FF
;
--color-primary-100
:
#DBEAFE
;
--color-primary-200
:
#BFDBFE
;
--color-primary-300
:
#93C5FD
;
--color-primary-400
:
#60A5FA
;
--color-primary-500
:
#2563EB
;
--color-primary-600
:
#1D4ED8
;
--color-primary-700
:
#1E40AF
;
--color-primary-800
:
#1E3A8A
;
--color-primary-900
:
#172554
;
--color-bg-primary
:
#F8FAFC
;
--color-bg-secondary
:
#F1F5F9
;
--color-text-primary
:
#0F172A
;
--color-text-secondary
:
#475569
;
--color-text-tertiary
:
#64748B
;
--color-border-light
:
rgba
(
148
,
163
,
184
,
0.22
);
--color-border-medium
:
rgba
(
148
,
163
,
184
,
0.34
);
--color-border-strong
:
rgba
(
96
,
165
,
250
,
0.46
);
--shadow-xs
:
0
1px
2px
rgba
(
15
,
23
,
42
,
0.04
);
--shadow-sm
:
0
2px
4px
rgba
(
15
,
23
,
42
,
0.05
);
--shadow-md
:
0
6px
14px
rgba
(
15
,
23
,
42
,
0.06
);
--shadow-lg
:
0
12px
24px
rgba
(
15
,
23
,
42
,
0.08
);
--shadow-xl
:
0
18px
36px
rgba
(
15
,
23
,
42
,
0.1
);
--shadow-2xl
:
0
24px
48px
rgba
(
15
,
23
,
42
,
0.12
);
--shadow-inner
:
inset
0
1px
2px
rgba
(
15
,
23
,
42
,
0.04
);
--shadow-inner-md
:
inset
0
2px
4px
rgba
(
15
,
23
,
42
,
0.06
);
--shadow-card
:
0
10px
24px
rgba
(
15
,
23
,
42
,
0.06
);
--shadow-button
:
0
8px
16px
rgba
(
37
,
99
,
235
,
0.18
);
--shadow-floating
:
0
20px
40px
rgba
(
15
,
23
,
42
,
0.1
);
color
:
var
(
--color-text-primary
);
background
:
radial-gradient
(
circle
at
top
left
,
rgba
(
139
,
92
,
246
,
0.08
),
transparent
30%
),
radial-gradient
(
circle
at
bottom
right
,
rgba
(
59
,
130
,
246
,
0.08
),
transparent
26%
),
var
(
--color-bg-primary
);
background
:
var
(
--color-bg-primary
);
font-family
:
"Microsoft YaHei UI"
,
"PingFang SC"
,
"Segoe UI"
,
sans-serif
;
}
...
...
@@ -107,8 +134,8 @@ button {
transition
:
all
0.2s
ease
;
}
button
:hover:not
(
:disabled
)
{
transform
:
translateY
(
-1px
)
;
box-shadow
:
var
(
--shadow-
lg
);
transform
:
none
;
box-shadow
:
var
(
--shadow-
md
);
}
button
.secondary
{
background
:
var
(
--color-bg-surface
);
...
...
@@ -135,7 +162,7 @@ input, textarea, select {
input
:focus
,
textarea
:focus
,
select
:focus
{
outline
:
none
;
border-color
:
var
(
--color-primary-400
);
box-shadow
:
0
0
0
3px
rgba
(
139
,
92
,
246
,
0.1
);
box-shadow
:
0
0
0
3px
rgba
(
96
,
165
,
250
,
0.16
);
}
textarea
{
min-height
:
128px
;
...
...
@@ -6119,7 +6146,7 @@ h1, h2, h3, h4, h5, h6,
}
.shell.openclaw-theme
.sidebar-digital-workers-title
{
background
:
#e3edf3
;
background
:
transparent
;
}
.shell.openclaw-theme
.expert-category-item
{
...
...
@@ -6348,3 +6375,530 @@ h1, h2, h3, h4, h5, h6,
border
:
1px
dashed
rgba
(
203
,
213
,
225
,
0.96
);
background
:
linear-gradient
(
180deg
,
rgba
(
255
,
255
,
255
,
0.96
),
rgba
(
244
,
246
,
248
,
0.94
));
}
/* gray-blue revamp: consolidated final theme layer */
.shell.openclaw-theme
{
--revamp-canvas
:
#f5f7fa
;
--revamp-surface
:
#ffffff
;
--revamp-surface-soft
:
#f8fafc
;
--revamp-surface-muted
:
#f1f5f9
;
--revamp-text
:
#0f172a
;
--revamp-text-muted
:
#475569
;
--revamp-text-soft
:
#64748b
;
--revamp-blue
:
#2563eb
;
--revamp-blue-strong
:
#1d4ed8
;
--revamp-blue-soft
:
#eff6ff
;
--revamp-blue-border
:
rgba
(
96
,
165
,
250
,
0.38
);
--revamp-border
:
rgba
(
148
,
163
,
184
,
0.24
);
--revamp-border-strong
:
rgba
(
148
,
163
,
184
,
0.38
);
--revamp-shadow
:
0
14px
32px
rgba
(
15
,
23
,
42
,
0.06
);
--revamp-shadow-soft
:
0
8px
18px
rgba
(
15
,
23
,
42
,
0.04
);
grid-template-columns
:
clamp
(
260px
,
20vw
,
280px
)
minmax
(
0
,
1
fr
);
background
:
var
(
--revamp-canvas
);
color
:
var
(
--revamp-text
);
}
.shell.openclaw-theme
button
,
.shell.openclaw-theme
[
role
=
"button"
],
.shell.openclaw-theme
summary
,
.shell.openclaw-theme
select
{
cursor
:
pointer
;
}
.shell.openclaw-theme
button
:disabled
,
.shell.openclaw-theme
[
aria-disabled
=
"true"
]
{
cursor
:
not-allowed
;
}
.shell.openclaw-theme
button
:hover:not
(
:disabled
),
.shell.openclaw-theme
.catalog-item
:hover
,
.shell.openclaw-theme
.plugin-flat-card
:hover
,
.shell.openclaw-theme
.settings-section-card
:hover
,
.shell.openclaw-theme
.model-config-card
:hover
{
transform
:
none
;
}
.shell.openclaw-theme
button
:focus-visible
,
.shell.openclaw-theme
input
:focus-visible
,
.shell.openclaw-theme
textarea
:focus-visible
,
.shell.openclaw-theme
select
:focus-visible
,
.shell.openclaw-theme
a
:focus-visible
{
outline
:
2px
solid
rgba
(
37
,
99
,
235
,
0.35
);
outline-offset
:
2px
;
}
.shell.openclaw-theme
>
.sidebar
{
background
:
linear-gradient
(
180deg
,
#e8f1ff
0%
,
#dbeafe
100%
);
border-right
:
1px
solid
rgba
(
37
,
99
,
235
,
0.28
);
box-shadow
:
inset
-1px
0
0
rgba
(
255
,
255
,
255
,
0.68
);
}
.shell.openclaw-theme
.nav-item
{
min-height
:
42px
;
border-radius
:
12px
;
border
:
1px
solid
transparent
;
background
:
transparent
;
color
:
#334155
;
box-shadow
:
none
;
}
.shell.openclaw-theme
.nav-item
:hover:not
(
.active
)
{
background
:
rgba
(
255
,
255
,
255
,
0.54
);
border-color
:
var
(
--revamp-border
);
color
:
#1e40af
;
}
.shell.openclaw-theme
.nav-item.active
{
background
:
var
(
--revamp-blue-soft
);
border-color
:
var
(
--revamp-blue-border
);
color
:
var
(
--revamp-blue-strong
);
}
.shell.openclaw-theme
.nav-item.active
::before
{
inset
:
7px
auto
7px
0
;
width
:
3px
;
border-radius
:
999px
;
background
:
var
(
--revamp-blue
);
}
.shell.openclaw-theme
.conversation-new-session
,
.shell.openclaw-theme
.sidebar-experts-entry
,
.shell.openclaw-theme
.sidebar-session-section
,
.shell.openclaw-theme
.expert-category-item
,
.shell.openclaw-theme
.sidebar-session-card
{
border-color
:
var
(
--revamp-border
);
background
:
rgba
(
255
,
255
,
255
,
0.58
);
box-shadow
:
none
;
}
.shell.openclaw-theme
.conversation-new-session
:hover:not
(
:disabled
),
.shell.openclaw-theme
.expert-category-item
:hover
,
.shell.openclaw-theme
.expert-category-header
:hover
,
.shell.openclaw-theme
.expert-category-expert-item
:hover
,
.shell.openclaw-theme
.sidebar-session-card
:hover
,
.shell.openclaw-theme
.sidebar-session-main
:hover
{
background
:
rgba
(
255
,
255
,
255
,
0.82
);
border-color
:
rgba
(
96
,
165
,
250
,
0.34
);
color
:
var
(
--revamp-blue-strong
);
box-shadow
:
none
;
}
.shell.openclaw-theme
.expert-category-expert-item.active
,
.shell.openclaw-theme
.sidebar-session-card.active
{
background
:
#ffffff
;
border-color
:
var
(
--revamp-blue-border
);
color
:
var
(
--revamp-blue-strong
);
box-shadow
:
inset
3px
0
0
rgba
(
37
,
99
,
235
,
0.78
);
}
.shell.openclaw-theme
.main-shell
{
min-width
:
0
;
background
:
var
(
--revamp-canvas
);
}
.shell.openclaw-theme
.content-area
{
min-height
:
0
;
background
:
transparent
;
}
.shell.openclaw-theme
.page-topbar
,
.shell.openclaw-theme
.plugin-page-topbar
,
.shell.openclaw-theme
.settings-page-topbar
{
border-color
:
var
(
--revamp-border
);
background
:
rgba
(
255
,
255
,
255
,
0.78
);
box-shadow
:
none
;
}
.shell.openclaw-theme
.panel
,
.shell.openclaw-theme
.plugin-flat-card
,
.shell.openclaw-theme
.settings-section-card
,
.shell.openclaw-theme
.model-config-card
,
.shell.openclaw-theme
.settings-panel
,
.shell.openclaw-theme
.bind-entry
,
.shell.openclaw-theme
.scroll-panel
{
border-color
:
var
(
--revamp-border
);
background
:
var
(
--revamp-surface
);
box-shadow
:
var
(
--revamp-shadow-soft
);
}
.shell.openclaw-theme
.status-chip
{
border-color
:
var
(
--revamp-border
);
background
:
var
(
--revamp-surface-soft
);
color
:
var
(
--revamp-text-muted
);
}
.conversation-shell
.conversation-panel-kicker
{
border-color
:
var
(
--revamp-border
);
background
:
var
(
--revamp-surface
);
color
:
var
(
--revamp-text-muted
);
}
.conversation-shell
.conversation-workspace
{
padding
:
18px
22px
20px
;
border-radius
:
22px
;
border
:
1px
solid
var
(
--revamp-border
);
background
:
var
(
--revamp-surface
);
box-shadow
:
var
(
--revamp-shadow
);
}
.conversation-shell
.message-list
{
padding
:
8px
4px
18px
0
;
scrollbar-color
:
rgba
(
148
,
163
,
184
,
0.52
)
transparent
;
}
.conversation-shell
.message-card
{
position
:
relative
;
padding-bottom
:
16px
;
}
.conversation-shell
.message-bubble
{
max-width
:
min
(
72%
,
760px
);
border-color
:
var
(
--revamp-border
);
background
:
var
(
--revamp-surface
);
box-shadow
:
var
(
--revamp-shadow-soft
);
}
.conversation-shell
.message-bubble-user
{
border-color
:
rgba
(
147
,
197
,
253
,
0.7
);
background
:
#eff6ff
;
color
:
var
(
--revamp-text
);
}
.conversation-shell
.message-card.assistant
.markdown-body
{
border-color
:
var
(
--revamp-border
);
background
:
var
(
--revamp-surface
);
box-shadow
:
var
(
--revamp-shadow-soft
);
}
.conversation-shell
.message-timestamp
{
position
:
absolute
;
bottom
:
0
;
left
:
4px
;
z-index
:
1
;
color
:
#7c8da3
;
font-size
:
11px
;
line-height
:
1
;
opacity
:
0
;
pointer-events
:
none
;
transition
:
opacity
140ms
ease
;
}
.conversation-shell
.message-card.user
.message-timestamp
{
left
:
auto
;
right
:
4px
;
}
.conversation-shell
.message-card
:hover
.message-timestamp
,
.conversation-shell
.message-card
:focus-within
.message-timestamp
{
opacity
:
1
;
}
.conversation-shell
.message-card-actions
{
margin-top
:
8px
;
}
.conversation-shell
.composer-shell
{
background
:
linear-gradient
(
180deg
,
rgba
(
248
,
250
,
252
,
0.95
),
rgba
(
248
,
250
,
252
,
0
)
18px
);
border-top
:
1px
solid
var
(
--revamp-border
);
}
.conversation-shell
.composer-surface
{
border-radius
:
18px
;
border-color
:
var
(
--revamp-border
);
background
:
#ffffff
;
box-shadow
:
var
(
--revamp-shadow-soft
);
}
.conversation-shell
.composer-surface
:focus-within
{
border-color
:
rgba
(
37
,
99
,
235
,
0.5
);
box-shadow
:
0
0
0
3px
rgba
(
37
,
99
,
235
,
0.12
),
var
(
--revamp-shadow-soft
);
}
.conversation-shell
.attachment-trigger.icon-only
,
.conversation-shell
.skill-trigger
,
.conversation-shell
.skill-chip
,
.conversation-shell
.composer-attachment-chip
{
border-color
:
var
(
--revamp-border
);
background
:
var
(
--revamp-surface-soft
);
color
:
var
(
--revamp-blue
);
box-shadow
:
none
;
}
.conversation-shell
.attachment-trigger.icon-only
:hover:not
(
:disabled
),
.conversation-shell
.skill-trigger
:hover:not
(
:disabled
),
.conversation-shell
.skill-chip
:hover:not
(
:disabled
),
.conversation-shell
.composer-attachment-remove
:hover:not
(
:disabled
)
{
background
:
var
(
--revamp-blue-soft
);
color
:
var
(
--revamp-blue-strong
);
box-shadow
:
none
;
}
.conversation-shell
.composer-submit
{
background
:
var
(
--revamp-blue
);
box-shadow
:
0
10px
22px
rgba
(
37
,
99
,
235
,
0.22
);
}
.conversation-shell
.composer-submit
:hover:not
(
:disabled
)
{
background
:
var
(
--revamp-blue-strong
);
box-shadow
:
0
12px
24px
rgba
(
37
,
99
,
235
,
0.24
);
}
.conversation-shell
.composer-submit
:disabled
{
background
:
#dbe4ec
;
color
:
#64748b
;
}
@media
(
prefers-reduced-motion
:
reduce
)
{
.shell.openclaw-theme
*,
.shell.openclaw-theme
*
::before
,
.shell.openclaw-theme
*
::after
{
transition-duration
:
0.01ms
!important
;
animation-duration
:
0.01ms
!important
;
animation-iteration-count
:
1
!important
;
scroll-behavior
:
auto
!important
;
}
}
/* home expert switch suggestion */
.conversation-shell
.home-intent-suggestion
{
flex
:
0
0
auto
;
display
:
grid
;
grid-template-columns
:
auto
minmax
(
0
,
1
fr
)
auto
;
align-items
:
center
;
gap
:
12px
;
padding
:
12px
14px
;
border-radius
:
16px
;
border
:
1px
solid
rgba
(
37
,
99
,
235
,
0.42
);
background
:
linear-gradient
(
180deg
,
#e8f1ff
0%
,
#dbeafe
100%
);
box-shadow
:
inset
0
1px
0
rgba
(
255
,
255
,
255
,
0.72
),
0
12px
26px
rgba
(
37
,
99
,
235
,
0.12
);
}
.conversation-shell
.home-intent-suggestion-leading
{
width
:
36px
;
height
:
36px
;
min-width
:
36px
;
display
:
grid
;
place-items
:
center
;
}
.conversation-shell
.home-intent-suggestion-icon
{
width
:
36px
;
height
:
36px
;
display
:
grid
;
place-items
:
center
;
border-radius
:
12px
;
border
:
1px
solid
rgba
(
37
,
99
,
235
,
0.28
);
background
:
rgba
(
255
,
255
,
255
,
0.72
);
color
:
var
(
--revamp-blue
);
box-shadow
:
0
6px
14px
rgba
(
37
,
99
,
235
,
0.12
);
}
.conversation-shell
.home-intent-suggestion-icon
svg
{
width
:
22px
;
height
:
22px
;
max-width
:
22px
;
max-height
:
22px
;
display
:
block
;
}
.conversation-shell
.home-intent-suggestion-icon-xiaohongshu
,
.conversation-shell
.home-intent-suggestion-icon-xhs
,
.conversation-shell
.home-intent-suggestion-icon-rednote
{
border-color
:
rgba
(
248
,
113
,
113
,
0.34
);
background
:
#fff1f2
;
color
:
#dc2626
;
}
.conversation-shell
.home-intent-suggestion-icon-douyin
{
border-color
:
rgba
(
56
,
189
,
248
,
0.42
);
background
:
#ecfeff
;
color
:
#0891b2
;
}
.conversation-shell
.home-intent-suggestion-copy
{
min-width
:
0
;
display
:
grid
;
gap
:
4px
;
}
.conversation-shell
.home-intent-suggestion-copy
strong
{
color
:
#0f2f63
;
font-size
:
13.5px
;
line-height
:
1.35
;
font-weight
:
700
;
}
.conversation-shell
.home-intent-suggestion-copy
p
,
.conversation-shell
.home-intent-suggestion-copy
span
{
color
:
#294b78
;
font-size
:
12px
;
line-height
:
1.55
;
}
.conversation-shell
.home-intent-suggestion-copy
span
{
color
:
var
(
--revamp-text-soft
);
}
.conversation-shell
.home-intent-suggestion-actions
{
display
:
flex
;
align-items
:
center
;
justify-content
:
flex-end
;
flex-wrap
:
wrap
;
gap
:
10px
;
}
.conversation-shell
.home-intent-suggestion-actions
button
{
min-height
:
32px
;
padding
:
0
14px
;
border-radius
:
999px
;
white-space
:
nowrap
;
font-size
:
12px
;
font-weight
:
700
;
letter-spacing
:
0
;
box-shadow
:
none
;
transition
:
background
160ms
ease
,
border-color
160ms
ease
,
color
160ms
ease
,
box-shadow
160ms
ease
;
}
.conversation-shell
.home-intent-suggestion-actions
.secondary
{
border
:
1px
solid
rgba
(
37
,
99
,
235
,
0.32
);
background
:
rgba
(
255
,
255
,
255
,
0.82
);
color
:
#1e40af
;
}
.conversation-shell
.home-intent-suggestion-actions
.secondary
:hover:not
(
:disabled
)
{
border-color
:
rgba
(
37
,
99
,
235
,
0.48
);
background
:
#ffffff
;
color
:
#1d4ed8
;
box-shadow
:
0
6px
14px
rgba
(
37
,
99
,
235
,
0.12
);
}
.conversation-shell
.home-intent-suggestion-actions
button
:not
(
.secondary
)
{
border
:
1px
solid
rgba
(
29
,
78
,
216
,
0.78
);
background
:
linear-gradient
(
135deg
,
#2563eb
,
#1d4ed8
);
color
:
#ffffff
;
box-shadow
:
0
8px
16px
rgba
(
37
,
99
,
235
,
0.22
);
}
.conversation-shell
.home-intent-suggestion-actions
button
:not
(
.secondary
)
:hover:not
(
:disabled
)
{
background
:
linear-gradient
(
135deg
,
#1d4ed8
,
#1e40af
);
box-shadow
:
0
10px
18px
rgba
(
37
,
99
,
235
,
0.26
);
}
@media
(
max-width
:
820px
)
{
.conversation-shell
.home-intent-suggestion
{
grid-template-columns
:
auto
minmax
(
0
,
1
fr
);
}
.conversation-shell
.home-intent-suggestion-actions
{
grid-column
:
1
/
-1
;
justify-content
:
flex-start
;
}
}
@media
(
max-width
:
520px
)
{
.conversation-shell
.home-intent-suggestion
{
align-items
:
start
;
padding
:
12px
;
}
.conversation-shell
.home-intent-suggestion-actions
{
display
:
grid
;
grid-template-columns
:
1
fr
;
width
:
100%
;
}
.conversation-shell
.home-intent-suggestion-actions
button
{
width
:
100%
;
white-space
:
normal
;
}
}
/* compact composer refinement */
.conversation-shell
.composer-shell
{
padding-top
:
11px
;
}
.conversation-shell
.composer-surface
{
gap
:
9px
;
padding
:
11px
13px
10px
;
border-color
:
rgba
(
37
,
99
,
235
,
0.38
);
box-shadow
:
var
(
--revamp-shadow-soft
);
}
.conversation-shell
.composer-surface
:focus-within
{
border-color
:
rgba
(
37
,
99
,
235
,
0.52
);
box-shadow
:
0
0
0
1px
rgba
(
37
,
99
,
235
,
0.08
),
var
(
--revamp-shadow-soft
);
}
.conversation-shell
.composer-field
textarea
,
.conversation-shell
.composer-textarea
{
font-size
:
14px
;
line-height
:
1.55
;
outline
:
none
;
box-shadow
:
none
;
}
.conversation-shell
.composer-field
textarea
:focus
,
.conversation-shell
.composer-field
textarea
:focus-visible
,
.conversation-shell
.composer-textarea
:focus
,
.conversation-shell
.composer-textarea
:focus-visible
{
outline
:
none
;
border-color
:
transparent
;
box-shadow
:
none
;
}
.conversation-shell
.composer-resize-handle
{
height
:
12px
;
}
.conversation-shell
.composer-resize-handle
span
{
width
:
38px
;
height
:
3px
;
}
.conversation-shell
.composer-footer
{
gap
:
10px
;
padding-top
:
8px
;
}
.conversation-shell
.composer-left-tools
{
gap
:
6px
;
}
.conversation-shell
.attachment-trigger.icon-only
,
.conversation-shell
.skill-trigger
,
.conversation-shell
.skill-chip
{
min-height
:
32px
;
border-radius
:
10px
;
}
.conversation-shell
.attachment-trigger.icon-only
,
.conversation-shell
.skill-trigger
{
width
:
32px
;
min-width
:
32px
;
}
.conversation-shell
.skill-chip
{
padding
:
0
11px
;
}
.conversation-shell
.composer-attachment-chip
{
min-height
:
27px
;
}
.conversation-shell
.composer-submit
{
width
:
35px
;
min-width
:
35px
;
height
:
35px
;
box-shadow
:
0
8px
18px
rgba
(
37
,
99
,
235
,
0.18
);
}
.conversation-shell
.composer-submit
:hover:not
(
:disabled
)
{
box-shadow
:
0
9px
20px
rgba
(
37
,
99
,
235
,
0.2
);
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment