Skip to content

feat(chat): host-friendly agentic experience #759

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spashii merged 1 commit into from
Jul 2, 2026
Merged

feat(chat): host-friendly agentic experience #759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 15 additions & 22 deletions echo/frontend/src/components/chat/AgenticChatPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,7 @@ export const AgenticChatPanel = ({

const computedChatForCopy = useMemo(() => {
const messagesList = historyMessages.map((message) =>
formatMessage(message, "User", "Dembrane"),
formatMessage(message, "User", "dembrane"),
);
return messagesList.join("\n\n\n\n");
}, [historyMessages]);
Expand Down Expand Up @@ -802,14 +802,7 @@ export const AgenticChatPanel = ({
</ErrorBoundary>
</Group>
</Group>
<Group justify="space-between" gap="sm">
<Group gap="xs">
{runStatus && (
<Text size="sm" c="dimmed">
<Trans>Run status:</Trans> {runStatus}
</Text>
)}
</Group>
<Group justify="flex-end" gap="sm">
{isRunInFlight && (
<Button
variant="outline"
Expand Down Expand Up @@ -871,7 +864,7 @@ export const AgenticChatPanel = ({

{!showExistingChatLoading && timeline.length === 0 && (
<Text c="dimmed" size="sm">
<Trans>Send a message to start an agentic run.</Trans>
<Trans>Ask about your conversations to get started.</Trans>
</Text>
)}

Expand Down Expand Up @@ -915,7 +908,7 @@ export const AgenticChatPanel = ({
className={`mt-[5px] h-1.5 w-1.5 shrink-0 rounded-full ${item.status === "running" ? "animate-pulse" : ""}`}
style={{ backgroundColor: statusMeta.dotColor }}
/>
<Text className="min-w-0 flex-1 truncate text-[11px] font-medium leading-4 text-slate-700">
<Text className="min-w-0 flex-1 truncate text-xs font-medium leading-4 text-slate-700">
{item.headline}
</Text>
</Group>
Expand All @@ -925,12 +918,12 @@ export const AgenticChatPanel = ({
className="shrink-0 self-start"
>
<Text
className="pt-[1px] text-[10px] font-semibold uppercase tracking-wide"
className="pt-[1px] text-xs font-semibold uppercase tracking-wide"
style={{ color: statusMeta.textColor }}
>
{statusMeta.label}
</Text>
<Text className="pt-[1px] text-[10px] text-slate-500">
<Text className="pt-[1px] text-xs text-slate-500">
{formatDate(new Date(item.timestamp), "h:mm a")}
</Text>
{hasRawData && (
Expand Down Expand Up @@ -968,27 +961,27 @@ export const AgenticChatPanel = ({
>
{item.rawInput && (
<Box>
<Text className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
<Text className="text-xs font-semibold uppercase tracking-wide text-slate-500">
<Trans>Input</Trans>
</Text>
<Text
size="xs"
component="pre"
className="mt-1 whitespace-pre-wrap break-words rounded border border-slate-200 bg-slate-50 p-2 font-mono text-[11px] leading-4"
className="mt-1 whitespace-pre-wrap break-words rounded border border-slate-200 bg-slate-50 p-2 font-mono text-xs leading-4"
>
{item.rawInput}
</Text>
</Box>
)}
{item.rawOutput && (
<Box>
<Text className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
<Text className="text-xs font-semibold uppercase tracking-wide text-slate-500">
<Trans>Output</Trans>
</Text>
<Text
size="xs"
component="pre"
className="mt-1 whitespace-pre-wrap break-words rounded border border-slate-200 bg-slate-50 p-2 font-mono text-[11px] leading-4"
className="mt-1 whitespace-pre-wrap break-words rounded border border-slate-200 bg-slate-50 p-2 font-mono text-xs leading-4"
>
{item.rawOutput}
</Text>
Expand All @@ -997,7 +990,7 @@ export const AgenticChatPanel = ({
{item.rawError && (
<Box>
<Text
className="text-[10px] font-semibold uppercase tracking-wide"
className="text-xs font-semibold uppercase tracking-wide"
style={{
color:
"var(--agentic-tool-status-error-text)",
Expand All @@ -1008,7 +1001,7 @@ export const AgenticChatPanel = ({
<Text
size="xs"
component="pre"
className="mt-1 whitespace-pre-wrap break-words rounded border border-red-100 bg-red-50 p-2 font-mono text-[11px] leading-4"
className="mt-1 whitespace-pre-wrap break-words rounded border border-red-100 bg-red-50 p-2 font-mono text-xs leading-4"
>
{item.rawError}
</Text>
Expand All @@ -1034,7 +1027,7 @@ export const AgenticChatPanel = ({
<Stack className="pb-2" gap="xs">
<Group
justify="center"
className="absolute bottom-[105%] left-1/2 z-50 hidden translate-x-[-50%] md:flex"
className="absolute bottom-[105%] right-4 z-50 hidden md:flex"
>
<ScrollToBottomButton
elementRef={scrollTargetRef}
Expand Down Expand Up @@ -1063,7 +1056,7 @@ export const AgenticChatPanel = ({
}}
/>
</Box>
<Text className="max-w-[min(70vw,32rem)] truncate text-[11px] font-medium text-slate-600">
<Text className="max-w-[min(70vw,32rem)] truncate text-xs font-medium text-slate-600">
{liveRunStatusText}
</Text>
</Group>
Expand Down Expand Up @@ -1093,7 +1086,7 @@ export const AgenticChatPanel = ({
maxRows={10}
value={input}
onChange={(event) => setInput(event.currentTarget.value)}
placeholder={t`Ask the agent...`}
placeholder={t`Ask about your conversations...`}
disabled={atTurnLimit}
onKeyDown={(event) => {
if (event.key === "Enter" && !event.shiftKey) {
Expand Down
4 changes: 2 additions & 2 deletions echo/frontend/src/components/chat/ChatTemplatesMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ const TemplatePill = ({
<Tooltip label={label} openDelay={500} disabled={label.length < 25}>
<Paper
withBorder
className={`cursor-pointer whitespace-nowrap truncate rounded-xl px-2 py-1 transition-all hover:scale-[1.02] ${
className={`cursor-pointer rounded-xl px-2 py-1 transition-all hover:scale-[1.02] ${
isSelected
? "border-gray-400 bg-gray-100"
: "border-gray-200 hover:border-gray-300 hover:bg-gray-50"
Expand Down Expand Up @@ -146,7 +146,7 @@ const TemplatePill = ({
size="xs"
fw={500}
c={colors ? MODE_COLORS.graphite : undefined}
lineClamp={2}
truncate
>
{label}
</Text>
Expand Down
Loading
Loading