example/my-app: introduce Chat UI

example/my-app/src/Chat.css

@@ -0,0 +1,60 @@
+/* Chat Window Styles */
+.chat-window {
+    display: block;
+    height: 100%;
+    max-height: 600px; /* Adjust the max-height as needed */
+    border: 1px solid #e4e4e4;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    width: 350px; /* Set a fixed width or use percentage */
+    margin: 0 auto; /* Center the chat window */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Chat History Styles */
+.chat-history {
+    overflow-y: scroll;
+    height: 400px;
+    padding: 20px;
+    background-color: #fff;
+    border-bottom: 2px solid #e4e4e4;
+}
+
+/* Chat Input Styles */
+.chat-input {
+    padding: 10px;
+    border-top: 2px solid #e4e4e4;
+    background-color: #f4f7f6;
+}
+
+/* Input field within .chat-input */
+.chat-input input {
+    width: calc(100% - 20px); /* Full width minus padding */
+    padding: 10px;
+    border: 1px solid #d4d4d4;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+/* Chat Message Styles */
+.chat-message {
+    background-color: #e7e7e7;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    padding: 10px;
+    color: #333;
+    line-height: 1.5;
+    font-size: 14px;
+}
+
+/* Style for the sender's messages */
+.chat-message.sent {
+    background-color: #daf8cb;
+    align-self: flex-end; /* Aligns the message to the right if a flex container is used */
+}
+
+/* Style for the receiver's messages */
+.chat-message.received {
+    background-color: #e7e7e7;
+    align-self: flex-start; /* Aligns the message to the left if a flex container is used */
+}

example/my-app/src/Chat.tsx

@@ -0,0 +1,72 @@
+import {useEffect, useState} from "react";
+import './Chat.css';
+import {ChatCMD, ChatResult, dediscriminateChatCMD} from "./workflow/main";
+
+type Message = {
+    text: string,
+    type: "user" | "system"
+}
+
+export function Chat(props: { name: string }) {
+    const [messages, setMessages] = useState<Message[]>([]);
+
+    useEffect(() => {
+        let lastMessage = messages[messages.length - 1];
+        if (lastMessage && lastMessage.type === "user") {
+            let cmd: ChatCMD = {
+                "main.UserMessage": {
+                    "Message": lastMessage.text,
+                },
+            };
+            fetch('http://localhost:8080/message', {
+                method: 'POST',
+                body: JSON.stringify(dediscriminateChatCMD(cmd)),
+            }).then(res => res.json() as Promise<ChatResult>)
+                .then(data => {
+                    if ( "main.SystemResponse" in data) {
+                        if (data["main.SystemResponse"]["Message"] as string !== "") {
+                            setMessages([...messages, {
+                                type: "system",
+                                text: data["main.SystemResponse"]["Message"] as string
+                            }])
+                        }
+
+                        let toolCalls = data["main.SystemResponse"]["ToolCalls"] || [];
+                        toolCalls.forEach((toolCall: any) => {
+                            switch (toolCall.Function.Name) {
+                                case "list_workflows":
+
+                            }
+                        })
+                    }
+                });
+        }
+
+    }, [messages]);
+
+    return <div className="chat-window">
+        <ChatHistory messages={messages}/>
+        <ChatInput onSubmit={(message) => setMessages([...messages, {type: "user", text: message}])}/>
+    </div>;
+}
+
+export function ChatHistory(props: { messages: Message[] }) {
+    return <div className="chat-history">
+        {props.messages.map((message, index) =>
+            <div key={index} className={"chat-message " + message.type}>
+                {message.text}
+            </div>
+        )}
+    </div>;
+}
+
+export function ChatInput(props: { onSubmit: (message: string) => void }) {
+    return <form className="chat-input" onSubmit={event => {
+        event.preventDefault();
+        const input = event.currentTarget.querySelector("input") as HTMLInputElement;
+        props.onSubmit(input.value);
+        input.value = "";
+    }}>
+        <input type="text"/>
+    </form>;
+}