{/* Mode Toggle Buttons - Bottom left */}
diff --git a/src/components/chat/chat-input.tsx b/src/components/chat/chat-input.tsx
index 08bbd421..30a39197 100644
--- a/src/components/chat/chat-input.tsx
+++ b/src/components/chat/chat-input.tsx
@@ -81,7 +81,6 @@ export default function ChatInput({
initialMode={initialMode}
onSubmitMessage={onSubmitMessage}
onSubmit={onSubmit}
- isInChatMode={true}
showReloadButton={!isPendingResponse}
className={className}
/>
diff --git a/src/components/chat/example-queries.tsx b/src/components/chat/example-queries.tsx
index f7a711fa..4d96b34d 100644
--- a/src/components/chat/example-queries.tsx
+++ b/src/components/chat/example-queries.tsx
@@ -1,14 +1,16 @@
"use client";
import * as React from "react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { ArrowRight, BookOpen, Database, Info } from "lucide-react";
+import { motion } from "framer-motion";
+import { ArrowRight, BookOpen, Database, Info, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
interface ExampleQueriesProps {
onSelect: (query: string) => void;
activeMode?: "morpheus" | "sentinel";
@@ -23,12 +25,29 @@ export function ExampleQueries({
const [currentMode, setCurrentMode] = useState<"morpheus" | "sentinel">(
activeMode
);
+ const [activeMenu, setActiveMenu] = useState<"morpheus" | "sentinel" | null>(
+ null
+ );
+ const containerRef = useRef
(null);
+ const menuRef = useRef(null);
- // Sync with parent component's activeMode
- React.useEffect(() => {
+ useEffect(() => {
setCurrentMode(activeMode);
}, [activeMode]);
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+ setActiveMenu(null);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
+
const queries = {
morpheus: [
"What is the sentiment around $BTC this week?",
@@ -48,324 +67,295 @@ export function ExampleQueries({
],
};
- const QueryButton = ({ query }: { query: string }) => {
- if (!query) return ;
-
- const handleClick = () => {
- onSelect(query);
- };
-
- // Determine style based on active mode
- const activeStyles =
- currentMode === "morpheus"
- ? {
- buttonBg: "bg-white/30 dark:bg-black/30 backdrop-blur-sm",
- buttonHoverBg:
- "hover:bg-emerald-50/40 dark:hover:bg-emerald-950/20",
- buttonBorder:
- "border border-emerald-300/70 dark:border-emerald-500/20",
- buttonHoverBorder:
- "hover:border-emerald-400/80 dark:hover:border-emerald-400/30",
- buttonText: "text-gray-800 dark:text-gray-200",
- buttonHoverText:
- "hover:text-emerald-800 dark:hover:text-emerald-300",
- gradientFrom: "from-emerald-100/40 dark:from-emerald-400/20",
- }
- : {
- buttonBg: "bg-white/30 dark:bg-black/30 backdrop-blur-sm",
- buttonHoverBg: "hover:bg-indigo-50/40 dark:hover:bg-indigo-950/20",
- buttonBorder:
- "border border-indigo-300/70 dark:border-indigo-500/20",
- buttonHoverBorder:
- "hover:border-indigo-400/80 dark:hover:border-indigo-400/30",
- buttonText: "text-gray-800 dark:text-gray-200",
- buttonHoverText: "hover:text-indigo-800 dark:hover:text-indigo-300",
- gradientFrom: "from-indigo-100/40 dark:from-indigo-400/20",
- };
+ const QueryItem = ({ query }: { query: string }) => {
+ if (!query) return null;
return (
{
+ if (activeMenu && onModeSelect && currentMode !== activeMenu) {
+ onModeSelect(activeMenu);
+ }
+ onSelect(query);
+ setActiveMenu(null);
+ }}
+ className={`text-left px-3 py-2 text-sm rounded-md w-full transition-colors cursor-pointer ${
+ activeMenu === "sentinel"
+ ? "hover:bg-indigo-50/30 dark:hover:bg-indigo-900/10"
+ : "hover:bg-emerald-50/30 dark:hover:bg-emerald-900/10"
+ }`}
+ whileHover={{ x: 4 }}
+ whileTap={{ scale: 0.98 }}
>
-
-
+
-
);
};
+ const handleMenuToggle = (mode: "morpheus" | "sentinel") => {
+ setActiveMenu(activeMenu === mode ? null : mode);
+ };
+
return (
-
-
-
-
- Example queries
-
+
+ {/* Info Button */}
+
-
- {currentMode === "morpheus" ? (
-
- {queries.morpheus.map((query, idx) => (
-
- ))}
-
- ) : (
-
- {queries.sentinel.map((query, idx) => (
-
- ))}
-
- )}
-
+ {/* Morpheus Button */}
+
handleMenuToggle("morpheus")}
+ whileHover={{ scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ >
+
+ Morpheus
+
+
+ {/* Sentinel Button */}
+
handleMenuToggle("sentinel")}
+ whileHover={{ scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ >
+
+ Sentinel
+
+
+ {/* Centered menu */}
+ {activeMenu && (
+
+
+
+
+ {activeMenu === "morpheus"
+ ? "Morpheus Intelligence"
+ : "Sentinel Commands"}
+
+
+
+
+ {queries[activeMenu].map((query, idx) => (
+
+ ))}
+
+
+
+ )}
);
}
diff --git a/src/components/chat/messages.tsx b/src/components/chat/messages.tsx
index 3478d84c..f800fb74 100644
--- a/src/components/chat/messages.tsx
+++ b/src/components/chat/messages.tsx
@@ -252,44 +252,46 @@ function MessagesComponent() {
const buttonMode = q.mode || defaultMode;
return (
-
-
-
+
+
+ {colorizeQuestionModes(q.question)}
+
+
+
+
+
+
);
})}
@@ -360,7 +362,7 @@ function MessagesComponent() {
}
return (
-
+
{mainContent && (
-
- YOU
-
total +
@@ -594,15 +592,8 @@ function MessagesComponent() {
-
-
-
+
+
{group.messages.map(
(message: UIMessage, messageIndex: number) => {
@@ -622,15 +613,20 @@ function MessagesComponent() {
: ""
}
>
-
+
{message.parts?.map(
- (part: Part, partIndex: number) =>
- renderMessagePart(
- part,
- partIndex,
- oracleMessageKey, // Pass unique seed for IDs
- message
- )
+ (part: Part, partIndex: number) => (
+
+ {renderMessagePart(
+ part,
+ partIndex,
+ oracleMessageKey,
+ message
+ )}
+
+ )
)}
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index e11b7cb3..4d10b137 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -68,7 +68,7 @@ export function Header() {
return (