Skip to content

Commit

Permalink
update screenshots for demo app
Browse files Browse the repository at this point in the history
  • Loading branch information
Corneliu Croitoru committed Oct 24, 2024
1 parent 0a290f1 commit 4685512
Show file tree
Hide file tree
Showing 11 changed files with 255 additions and 213 deletions.
Binary file modified docs/public/chat_mode.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/public/email_mode.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion examples/chat-demo-app/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
### Overview
The demo showcases the versatility of the Multi-Agent Orchestrator System through an interactive chat interface. Watch how the system seamlessly handles diverse queries using specialized agents:

![Demo Application](./img/demo-app.jpg)
![Demo Application](./img/chat-demo-app.png)

### Featured Agents
Our demo showcases specialized agents, each designed for specific use cases:
Expand Down
Binary file added examples/chat-demo-app/img/chat-demo-app.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed examples/chat-demo-app/img/demo-app.jpg
View file
Binary file not shown.
Binary file modified examples/ecommerce-support-simulator/img/chat_mode.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/ecommerce-support-simulator/img/email_mode.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 66 additions & 46 deletions examples/ecommerce-support-simulator/resources/ui/src/components/ChatMode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
import { Send } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import type { Message } from '../types';

const ChatMode = ({
messages,
customerMessage,
Expand Down Expand Up @@ -46,20 +45,24 @@ const ChatMode = ({
<div key={index} className={`flex ${isFromUI ? 'justify-end' : 'justify-start'} mb-2`}>
<div className={`rounded-lg py-2 px-4 max-w-[80%] break-words ${
isFromUI
? (isCustomer ? 'bg-yellow-300 text-yellow-900' : 'bg-red-300 text-red-900')
: 'bg-gray-300 text-gray-900'
? (isCustomer ? 'bg-blue-50 border border-blue-100 text-gray-900' : 'bg-gray-50 border border-gray-200 text-gray-900')
: 'bg-white border border-gray-200 text-gray-900'
}`}>
<p className="text-xs font-semibold mb-1">{senderLabel}</p>
<p className={`text-xs font-semibold mb-1 ${
isFromUI ? 'text-blue-600' : 'text-gray-600'
}`}>
{senderLabel}
</p>
<ReactMarkdown
className="prose prose-sm max-w-none"
className="prose prose-sm max-w-none text-gray-900"
components={{
p: ({node, ...props}) => <p className="whitespace-pre-wrap" {...props} />,
pre: ({node, ...props}) => <pre className="whitespace-pre-wrap overflow-x-auto" {...props} />
pre: ({node, ...props}) => <pre className="whitespace-pre-wrap overflow-x-auto bg-gray-50 p-2 rounded" {...props} />
}}
>
{msg.content}
</ReactMarkdown>
<p className="text-xs mt-1 text-gray-600">
<p className="text-xs mt-1 text-gray-500">
{new Date(msg.timestamp).toLocaleTimeString()}
</p>
</div>
Expand All @@ -71,6 +74,8 @@ const ChatMode = ({
const submitMessage = (e: React.FormEvent, isCustomer: boolean) => {
e.preventDefault();
const message = isCustomer ? customerMessage : supportMessage;
if (!message.trim()) return;

const newMessage = {
content: message,
destination: isCustomer ? 'customer' : 'support',
Expand All @@ -88,49 +93,64 @@ const ChatMode = ({

return (
<div className="flex flex-col space-y-4 h-[700px]">
<div className="flex-grow flex space-x-4 h-full">
{/* Customer Chat */}
<div className="flex-1 bg-gradient-to-br from-yellow-400 to-amber-500 rounded-2xl p-4 shadow-lg flex flex-col">
<h2 className="text-2xl font-bold text-yellow-900 mb-4">Customer Chat</h2>
<div ref={customerChatRef} className="flex-grow bg-yellow-100 rounded-lg p-4 overflow-y-auto mb-4 h-[calc(100%-120px)]">
{renderMessages(true)}
<div className="flex-grow flex space-x-4 h-full">
{/* Customer Chat */}
<div className="flex-1 bg-white rounded-xl p-4 shadow-sm border border-gray-200 flex flex-col">
<h2 className="text-2xl font-bold text-gray-900 mb-4">Customer Chat</h2>
<div
ref={customerChatRef}
className="flex-grow bg-gray-50 rounded-lg p-4 overflow-y-auto mb-4 h-[calc(100%-120px)] border border-gray-100"
>
{renderMessages(true)}
</div>
<form onSubmit={(e) => submitMessage(e, true)} className="flex mt-auto">
<input
ref={customerInputRef}
type="text"
value={customerMessage}
onChange={(e) => setCustomerMessage(e.target.value)}
className="flex-grow mr-2 p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 text-gray-900 placeholder-gray-500"
placeholder="Type a message..."
/>
<button
type="submit"
className="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg transition-colors duration-200"
disabled={!customerMessage.trim()}
>
<Send size={20} />
</button>
</form>
</div>
<form onSubmit={(e) => submitMessage(e, true)} className="flex mt-auto">
<input
ref={customerInputRef}
type="text"
value={customerMessage}
onChange={(e) => setCustomerMessage(e.target.value)}
className="flex-grow mr-2 p-2 rounded-lg"
placeholder="Type a message..."
/>
<button type="submit" className="bg-amber-500 text-white p-2 rounded-lg">
<Send size={20} />
</button>
</form>
</div>
{/* Support Chat */}
<div className="flex-1 bg-gradient-to-br from-orange-400 to-red-500 rounded-2xl p-4 shadow-lg flex flex-col">
<h2 className="text-2xl font-bold text-red-900 mb-4">Support Chat</h2>
<div ref={supportChatRef} className="flex-grow bg-red-100 rounded-lg p-4 overflow-y-auto mb-4 h-[calc(100%-120px)]">
{renderMessages(false)}

{/* Support Chat */}
<div className="flex-1 bg-white rounded-xl p-4 shadow-sm border border-gray-200 flex flex-col">
<h2 className="text-2xl font-bold text-gray-900 mb-4">Support Chat</h2>
<div
ref={supportChatRef}
className="flex-grow bg-gray-50 rounded-lg p-4 overflow-y-auto mb-4 h-[calc(100%-120px)] border border-gray-100"
>
{renderMessages(false)}
</div>
<form onSubmit={(e) => submitMessage(e, false)} className="flex mt-auto">
<input
ref={supportInputRef}
type="text"
value={supportMessage}
onChange={(e) => setSupportMessage(e.target.value)}
className="flex-grow mr-2 p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 text-gray-900 placeholder-gray-500"
placeholder="Type a response..."
/>
<button
type="submit"
className="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg transition-colors duration-200"
disabled={!supportMessage.trim()}
>
<Send size={20} />
</button>
</form>
</div>
<form onSubmit={(e) => submitMessage(e, false)} className="flex mt-auto">
<input
ref={supportInputRef}
type="text"
value={supportMessage}
onChange={(e) => setSupportMessage(e.target.value)}
className="flex-grow mr-2 p-2 rounded-lg"
placeholder="Type a response..."
/>
<button type="submit" className="bg-red-500 text-white p-2 rounded-lg">
<Send size={20} />
</button>
</form>
</div>
</div>
</div>
);
};

Expand Down
53 changes: 26 additions & 27 deletions examples/ecommerce-support-simulator/resources/ui/src/components/EmailMode.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { Send } from 'lucide-react';

const EmailMode = ({
fromEmail,
setFromEmail,
Expand Down Expand Up @@ -46,48 +45,48 @@ const EmailMode = ({
return (
<div className="grid grid-cols-2 gap-4 h-full">
{/* Customer Email */}
<div className="bg-gradient-to-br from-yellow-400 to-amber-500 rounded-2xl p-6 shadow-lg flex flex-col h-full">
<h2 className="text-2xl font-bold text-yellow-900 mb-4">Customer Email</h2>
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 flex flex-col h-full">
<h2 className="text-2xl font-bold text-gray-900 mb-4">Customer Email</h2>
<div className="flex flex-col flex-grow">
<form onSubmit={submitCustomerEmail} className="flex flex-col flex-grow">
<div className="mb-2">
<label className="block text-sm font-medium text-yellow-900 mb-1">From:</label>
<label className="block text-sm font-medium text-gray-700 mb-1">From:</label>
<input
type="email"
value={fromEmail}
onChange={(e) => setFromEmail(e.target.value)}
className="w-full p-2 rounded-lg"
className="w-full p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
required
/>
</div>
<div className="mb-2">
<label className="block text-sm font-medium text-yellow-900 mb-1">Template:</label>
<label className="block text-sm font-medium text-gray-700 mb-1">Template:</label>
<select
value={selectedTemplate}
onChange={handleTemplateChange}
className="w-full p-2 rounded-lg"
className="w-full p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 bg-white"
>
{Object.entries(emailTemplates).map(([key, value]) => (
<option key={key} value={key}>{String(value)}</option>
))}
</select>
</div>
<div className="flex-grow mb-4">
<label className="block text-sm font-medium text-yellow-900 mb-1">Message:</label>
<label className="block text-sm font-medium text-gray-700 mb-1">Message:</label>
<textarea
value={customerMessage}
onChange={(e) => setCustomerMessage(e.target.value)}
className="w-full p-2 rounded-lg h-full min-h-[120px] resize-none"
className="w-full p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 h-full min-h-[120px] resize-none"
required
/>
</div>
<div className="mt-4"> {/* Added margin top here */}
<div className="mt-4">
<button
type="submit"
className={`w-full flex items-center justify-center text-lg py-2 px-4 rounded-lg ${
className={`w-full flex items-center justify-center text-lg py-2 px-4 rounded-lg transition-colors duration-200 ${
isCustomerMessageEmpty
? 'bg-gray-300 text-gray-500 cursor-not-allowed'
: 'bg-amber-500 text-white hover:bg-amber-600'
? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200'
: 'bg-blue-600 text-white hover:bg-blue-700'
}`}
disabled={isCustomerMessageEmpty}
>
Expand All @@ -97,33 +96,33 @@ const EmailMode = ({
</div>
</form>
</div>
<div className="mt-4 bg-yellow-100 p-4 rounded-lg h-32 overflow-auto">
<h3 className="font-semibold mb-2">Response:</h3>
<p>{customerResponse}</p>
<div className="mt-4 bg-gray-50 border border-gray-200 p-4 rounded-lg h-32 overflow-auto">
<h3 className="font-semibold mb-2 text-gray-900">Response:</h3>
<p className="text-gray-700">{customerResponse}</p>
</div>
</div>

{/* Support Email */}
<div className="bg-gradient-to-br from-orange-400 to-red-500 rounded-2xl p-6 shadow-lg flex flex-col h-full">
<h2 className="text-2xl font-bold text-red-900 mb-4">Support Email</h2>
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 flex flex-col h-full">
<h2 className="text-2xl font-bold text-gray-900 mb-4">Support Email</h2>
<div className="flex flex-col flex-grow">
<form onSubmit={submitSupportEmail} className="flex flex-col flex-grow">
<div className="flex-grow mb-4">
<label className="block text-sm font-medium text-red-900 mb-1">Message:</label>
<label className="block text-sm font-medium text-gray-700 mb-1">Message:</label>
<textarea
value={supportMessage}
onChange={(e) => setSupportMessage(e.target.value)}
className="w-full p-2 rounded-lg h-full min-h-[120px] resize-none"
className="w-full p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 h-full min-h-[120px] resize-none"
required
/>
</div>
<div className="mt-4"> {/* Added margin top here */}
<div className="mt-4">
<button
type="submit"
className={`w-full flex items-center justify-center text-lg py-2 px-4 rounded-lg ${
className={`w-full flex items-center justify-center text-lg py-2 px-4 rounded-lg transition-colors duration-200 ${
isSupportMessageEmpty
? 'bg-gray-300 text-gray-500 cursor-not-allowed'
: 'bg-red-500 text-white hover:bg-red-600'
? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200'
: 'bg-blue-600 text-white hover:bg-blue-700'
}`}
disabled={isSupportMessageEmpty}
>
Expand All @@ -133,9 +132,9 @@ const EmailMode = ({
</div>
</form>
</div>
<div className="mt-4 bg-red-100 p-4 rounded-lg h-32 overflow-auto">
<h3 className="font-semibold mb-2">Response:</h3>
<p>{supportResponse}</p>
<div className="mt-4 bg-gray-50 border border-gray-200 p-4 rounded-lg h-32 overflow-auto">
<h3 className="font-semibold mb-2 text-gray-900">Response:</h3>
<p className="text-gray-700">{supportResponse}</p>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 4685512

Please sign in to comment.