diff --git a/packages/app/src/components/agent-stream-view.tsx b/packages/app/src/components/agent-stream-view.tsx
index f99667d54..0dccd9e61 100644
--- a/packages/app/src/components/agent-stream-view.tsx
+++ b/packages/app/src/components/agent-stream-view.tsx
@@ -26,6 +26,7 @@ import { Check, ChevronDown, X } from "lucide-react-native";
import { usePanelStore } from "@/stores/panel-store";
import {
AssistantMessage,
+ SpeakMessage,
UserMessage,
ActivityLog,
ToolCall,
@@ -359,6 +360,21 @@ const AgentStreamViewComponent = forwardRef
+ );
+ }
+
return (
({
+ container: {
+ paddingHorizontal: theme.spacing[2],
+ paddingVertical: theme.spacing[3],
+ },
+ containerSpacing: {
+ marginBottom: theme.spacing[4],
+ },
+ header: {
+ flexDirection: "row",
+ alignItems: "center",
+ gap: theme.spacing[2],
+ marginBottom: theme.spacing[2],
+ },
+ headerLabel: {
+ fontFamily: Fonts.sans,
+ fontSize: 12,
+ fontWeight: "500",
+ color: theme.colors.foregroundMuted,
+ },
+ text: {
+ fontFamily: Fonts.sans,
+ fontSize: theme.fontSize.base,
+ lineHeight: 22,
+ color: theme.colors.foreground,
+ },
+}));
+
+export const SpeakMessage = memo(function SpeakMessage({
+ message,
+ timestamp,
+ disableOuterSpacing,
+}: SpeakMessageProps) {
+ const { theme } = useUnistyles();
+ const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);
+
+ return (
+
+
+
+ Spoke
+
+ {message}
+
+ );
+});
+
interface ActivityLogProps {
type: "system" | "info" | "success" | "error" | "artifact";
message: string;