Skip to content

Commit

Permalink
change color scheme for demo chat app
Browse files Browse the repository at this point in the history
  • Loading branch information
Corneliu Croitoru committed Oct 24, 2024
1 parent c516ade commit 0a290f1
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 87 deletions.
175 changes: 100 additions & 75 deletions examples/chat-demo-app/ui/src/components/ChatWindow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,34 +40,35 @@ const MarkdownRenderer: React.FC<{ content: string }> = ({ content }) => {
code({ node, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
return match ? (
<pre className="bg-yellow-50 rounded-md p-4 my-2 overflow-x-auto text-sm font-mono">
<pre className="bg-slate-100 rounded-md p-4 my-2 overflow-x-auto text-sm font-mono text-slate-900">
<code className={className} {...props}>
{children}
</code>
</pre>
) : (
<code className="bg-yellow-100 text-yellow-900 px-1 rounded font-mono" {...props}>
<code className="bg-slate-200 text-slate-900 px-1 rounded font-mono" {...props}>
{children}
</code>
);
},
p: ({ node, ...props }) => <p className="mb-2" {...props} />,
a: ({ node, ...props }) => <a className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer" {...props} />,
h1: ({ node, ...props }) => <h1 className="text-2xl font-bold mt-4 mb-2" {...props} />,
h2: ({ node, ...props }) => <h2 className="text-xl font-bold mt-3 mb-2" {...props} />,
h3: ({ node, ...props }) => <h3 className="text-lg font-bold mt-2 mb-1" {...props} />,
ul: ({ node, ...props }) => <ul className="list-disc list-inside mb-2 pl-4" {...props} />,
ol: ({ node, ...props }) => <ol className="list-decimal mb-2 pl-6" {...props} />,
li: ({ node, ...props }) => <li className="mb-1" {...props} />,
blockquote: ({ node, ...props }) => <blockquote className="border-l-4 border-yellow-300 pl-4 italic my-2" {...props} />,
p: ({ node, ...props }) => <p className="mb-2 text-slate-900" {...props} />,
a: ({ node, ...props }) => <a className="text-blue-700 hover:underline font-semibold" target="_blank" rel="noopener noreferrer" {...props} />,
h1: ({ node, ...props }) => <h1 className="text-2xl font-bold mt-4 mb-2 text-slate-900" {...props} />,
h2: ({ node, ...props }) => <h2 className="text-xl font-bold mt-3 mb-2 text-slate-900" {...props} />,
h3: ({ node, ...props }) => <h3 className="text-lg font-bold mt-2 mb-1 text-slate-900" {...props} />,
ul: ({ node, ...props }) => <ul className="list-disc list-inside mb-2 pl-4 text-slate-900" {...props} />,
ol: ({ node, ...props }) => <ol className="list-decimal mb-2 pl-6 text-slate-900" {...props} />,
li: ({ node, ...props }) => <li className="mb-1 text-slate-900" {...props} />,
blockquote: ({ node, ...props }) => <blockquote className="border-l-4 border-blue-700 pl-4 italic my-2 text-slate-700" {...props} />,
}}
className="markdown-content text-yellow-900"
className="markdown-content text-slate-900"
>
{content}
</ReactMarkdown>
);
};


const ChatWindow: React.FC = () => {
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
const [messages, setMessages] = useState<Array<any>>([]);
Expand Down Expand Up @@ -277,48 +278,51 @@ const ChatWindow: React.FC = () => {
if (isAuthenticated === null) {
return <LoadingScreen text="Please wait..." />;
}



return (
<div className="flex items-center justify-center min-h-screen">
<div className="flex items-center justify-center min-h-screen bg-slate-100">
<Authenticator>
{({ signOut: _signOut, user: _user }) => (
<div className="flex flex-col h-[90vh] w-[70vw] bg-gradient-to-br from-yellow-400 to-amber-500 rounded-2xl p-6 shadow-lg">
{({ signOut: _signOut, user: _user }) => (
<div className="flex flex-col h-[90vh] w-[70vw] bg-white rounded-2xl p-6 shadow-lg border border-slate-200">
<div className="text-center mb-6 relative">
<h1 className="text-3xl font-bold text-yellow-900 mb-2">
Multi-Agent Orchestrator Demo
</h1>
<button
onClick={resetSessionId}
className="absolute top-0 right-0 bg-yellow-700 hover:bg-blue-600 text-white px-3 py-2 rounded-lg flex items-center text-sm transition-colors duration-200"
>
<RefreshCw size={24} />
</button>
<p className="text-lg text-yellow-800 mb-4">
Experience the power of intelligent routing and context management
across multiple AI agents.
</p>
<p className="text-md text-yellow-700 italic">
Type "hello" or "bonjour" to see the available agents, or ask questions like "How do I use agents?", "How can I use the framework to create a custom agent?", "What are the steps to customize an agent?", and more!
</p>
</div>
<div className="flex-grow bg-yellow-100 rounded-lg p-4 overflow-y-auto mb-4">
<h1 className="text-3xl font-bold text-blue-700 mb-2">
Multi-Agent Orchestrator Demo
</h1>
<button
onClick={resetSessionId}
className="absolute top-0 right-0 bg-slate-200 hover:bg-slate-300 text-slate-900 px-3 py-2 rounded-lg flex items-center text-sm transition-colors duration-200"
>
<RefreshCw size={24} />
</button>
<p className="text-lg text-slate-900 mb-4">
Experience the power of intelligent routing and context management
across multiple AI agents.
</p>
<p className="text-md text-slate-700 italic">
Type "hello" or "bonjour" to see the available agents, or ask questions like "How do I use agents?", "How can I use the framework to create a custom agent?", "What are the steps to customize an agent?"
</p>
</div>

<div className="flex-grow bg-slate-50 rounded-lg p-4 overflow-y-auto mb-4">
{messages.map((msg, index) => (
<div key={index} className="mb-4">
<div className={`rounded-lg py-2 px-4 ${
msg.sender === "You"
? "bg-yellow-300 text-yellow-900 ml-auto"
: "bg-yellow-200 text-yellow-900"
? "bg-blue-100 text-slate-900 ml-auto border border-blue-200"
: "bg-white border border-slate-200 text-slate-900"
}`}>
<p className="text-xs font-semibold mb-1">{msg.sender}</p>
<p className={`text-xs font-semibold mb-1 ${
msg.sender === "You"
? "text-blue-700"
: "text-slate-700"
}`}>
{msg.sender}
</p>
{msg.isWaiting ? (
<div className="flex flex-col items-center justify-center">
{/* Cooler animated loader - infinity loop icon */}
<div className="animate-spin">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-indigo-500"
className="h-8 w-8 text-blue-700"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
Expand All @@ -329,78 +333,99 @@ const ChatWindow: React.FC = () => {
<path d="M5 12a7 7 0 0 1 14 0M12 5a7 7 0 0 1 0 14" />
</svg>
</div>

{/* Funny wait message */}
<p className="mt-2 text-gray-600 text-sm">
<p className="mt-2 text-slate-600 text-sm">
{getRandomWaitMessage()}
</p>
</div>
) : (
<div className="markdown-wrapper">{renderMessageContent(msg.content)}</div>
)}


<p className="text-xs mt-1 text-yellow-700">
<p className="text-xs mt-1 text-slate-500">
{new Date(msg.timestamp).toLocaleTimeString()}
</p>
</div>
</div>
))}
<div ref={messagesEndRef} />
</div>

<form onSubmit={handleSubmit} className="flex mt-auto mb-4">
<input
ref={inputRef}
type="text"
value={inputMessage}
onChange={(e) => setInputMessage(e.target.value)}
className="flex-grow mr-2 p-2 rounded-lg"
className="flex-grow mr-2 p-2 rounded-lg bg-white border-2 border-slate-200 text-slate-900 placeholder-slate-500 focus:border-blue-700 focus:ring-2 focus:ring-blue-200"
placeholder="Type a message..."
disabled={running}
/>
<button
type="submit"
className="bg-amber-600 text-white p-2 rounded-lg"
className="bg-blue-700 hover:bg-blue-800 text-white p-2 rounded-lg transition-colors duration-200"
disabled={running}
>
<Send size={20} />
</button>
</form>
<div className="text-center text-yellow-900">
<p className="mb-2">To learn more about the Multi-Agent Orchestrator:</p>
<div className="flex justify-center space-x-4">
<a
href="https://github.com/awslabs/multi-agent-orchestrator"
target="_blank"
rel="noopener noreferrer"
className="flex items-center bg-yellow-400 hover:bg-yellow-500 text-orange-900 font-bold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105"
>
<Code2 size={24} className="mr-2" />
GitHub Repo
</a>
<a
href="https://awslabs.github.io/multi-agent-orchestrator/"
target="_blank"
rel="noopener noreferrer"
className="flex items-center bg-yellow-400 hover:bg-yellow-500 text-orange-900 font-bold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105"
>
<BookOpen size={24} className="mr-2" />
Documentation
</a>
</div>
</div>

<div className="text-center text-slate-900">
<p className="mb-2">To learn more about the Multi-Agent Orchestrator:</p>
<div className="flex justify-center space-x-4">
<a
href="https://github.com/awslabs/multi-agent-orchestrator"
target="_blank"
rel="noopener noreferrer"
className="flex items-center bg-slate-100 hover:bg-slate-200 text-slate-900 font-bold py-2 px-4 rounded-lg transition-all duration-300"
>
<Code2 size={24} className="mr-2 text-blue-700" />
GitHub Repo
</a>
<a
href="https://awslabs.github.io/multi-agent-orchestrator/"
target="_blank"
rel="noopener noreferrer"
className="flex items-center bg-slate-100 hover:bg-slate-200 text-slate-900 font-bold py-2 px-4 rounded-lg transition-all duration-300"
>
<BookOpen size={24} className="mr-2 text-blue-700" />
Documentation
</a>
<a
href="https://github.com/awslabs/multi-agent-orchestrator/tree/main/examples/chat-demo-app"
target="_blank"
rel="noopener noreferrer"
className="flex items-center bg-slate-100 hover:bg-slate-200 text-slate-900 font-bold py-2 px-4 rounded-lg transition-all duration-300"
>
<svg
viewBox="0 0 24 24"
className="w-6 h-6 mr-2 text-blue-700"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
<polyline points="7.5 4.21 12 6.81 16.5 4.21" />
<polyline points="7.5 19.79 7.5 14.6 3 12" />
<polyline points="21 12 16.5 14.6 16.5 19.79" />
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
<line x1="12" y1="22.08" x2="12" y2="12" />
</svg>
Deploy this app!
</a>
</div>
</div>

<button
onClick={handleSignOut}
className="mt-4 bg-red-500 text-white px-4 py-2 rounded-lg"
className="mt-4 bg-slate-800 hover:bg-slate-900 text-white px-4 py-2 rounded-lg transition-colors duration-200"
>
Sign out
</button>
</div>
)}
</Authenticator>
</div>

);
};

export default ChatWindow;
21 changes: 9 additions & 12 deletions examples/chat-demo-app/ui/src/pages/index.astro
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
---
import ChatWindow from '../components/ChatWindow';
---

<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Multi-Agent Orchestrator Demo</title>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Multi-Agent Orchestrator Demo</title>
</head>
<body class="bg-gradient-to-br from-amber-500 via-orange-500 to-red-500 min-h-screen flex items-center justify-center p-4">
<div class="w-[70%] h-[90vh]">
<ChatWindow client:load />
</div>
</body>

<body class="bg-gradient-to-br from-slate-200 via-slate-100 to-white">
<!-- Removed the wrapping div -->
<ChatWindow client:load />
</body>
</html>

0 comments on commit 0a290f1

Please sign in to comment.