From 781271aa59fc86c3216a53e4bfa4a34c7e0df90f Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Thu, 20 Mar 2025 18:24:13 -0700
Subject: [PATCH] Updated styles

---
 jupyter/stock.py            |  19 +++--
 src/ketr-chat/src/App.css   |  53 ++++---------
 src/ketr-chat/src/App.tsx   | 153 ++++++++++++++++++------------------
 src/ketr-chat/src/index.css |   2 +
 4 files changed, 105 insertions(+), 122 deletions(-)

diff --git a/jupyter/stock.py b/jupyter/stock.py
index 9d0ac65..4a5482e 100644
--- a/jupyter/stock.py
+++ b/jupyter/stock.py
@@ -250,16 +250,21 @@ async def handle_tool_calls(message):
                     ret = None
                 else:
                     ret = get_ticker_price(ticker)
-                tools_used.append(tool)
+                tools_used.append(f"{tool}({ticker})")
             case 'summarize_site':
-                ret = await summarize_site(arguments.get('url'), arguments.get('question', 'what is the summary of this content?'))
-                tools_used.append(tool)
+                url = arguments.get('url');
+                question = arguments.get('question', 'what is the summary of this content?')
+                ret = await summarize_site(url, question)
+                tools_used.append(f"{tool}('{url}', '{question}')")
             case 'get_current_datetime':
-                ret = get_current_datetime(arguments.get('timezone'))
-                tools_used.append(tool)
+                tz = arguments.get('timezone')
+                ret = get_current_datetime(tz)
+                tools_used.append(f"{tool}('{tz}')")
             case 'get_weather_by_location':
-                ret = get_weather_by_location(arguments.get('city'), arguments.get('state'))
-                tools_used.append(tool)
+                city = arguments.get('city')
+                state = arguments.get('state')
+                ret = get_weather_by_location(city, state)
+                tools_used.append(f"{tool}('{city}', '{state}')")
             case _:
                 ret = None
         response.append({
diff --git a/src/ketr-chat/src/App.css b/src/ketr-chat/src/App.css
index e229962..dbfc41d 100644
--- a/src/ketr-chat/src/App.css
+++ b/src/ketr-chat/src/App.css
@@ -1,51 +1,23 @@
+div {
+  box-sizing: border-box
+}
+
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
+  text-align: center;
+    max-height: 100%;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
 
 .container {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   height: 100vh;
-  max-height: 100vh;
   overflow: auto;
   max-width: 800px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 1rem;
 }
 
 .query-box,
@@ -71,12 +43,14 @@
 }
 
 .conversation {
+  display: flex;
   background-color: #F5F5F5;
   border: 1px solid #E0E0E0;
   flex-grow: 1;
   overflow-y: auto;
   padding: 10px;
   margin-bottom: 20px;
+  flex-direction: column;
 }
 
 .user-message {
@@ -87,14 +61,16 @@
   margin-bottom: 0.75rem;
   margin-left: 1rem;
   border-radius: 0.25rem;
-  min-width: 70%;
-  max-width: 70%;
+  min-width: 80%;
+    max-width: 80%;
   justify-self: right;
   display: flex;
   white-space: pre-wrap;
   overflow-wrap: break-word;
   word-break: break-word;
   flex-direction: column;
+  align-items: self-end;
+    align-self: end;
 }
 
 .assistant-message {
@@ -105,7 +81,6 @@
   margin-bottom: 0.75rem;
   margin-right: 1rem;
   min-width: 70%;
-  max-width: 70%;
   border-radius: 0.25rem;
   justify-self: left;
   display: flex;
diff --git a/src/ketr-chat/src/App.tsx b/src/ketr-chat/src/App.tsx
index d8897fa..4022093 100644
--- a/src/ketr-chat/src/App.tsx
+++ b/src/ketr-chat/src/App.tsx
@@ -11,7 +11,7 @@ const url: string = "https://ai.ketrenos.com"
 const App = () => {
   const [query, setQuery] = useState('');
   const [conversation, setConversation] = useState<MessageList>([{"role": "assistant", "content": "Connecting to server..."}]);
-  const conversationRef = useRef(null);
+  const conversationRef = useRef<any>(null);
   const [processing, setProcessing] = useState(false);
   const [ws, setWs] = useState<WebSocket | undefined>(undefined);
   const [loaded, setLoaded] = useState<boolean>(false);
@@ -21,9 +21,12 @@ const App = () => {
   const [user, setUser] = useState<string>("");
   const [userChange, setUserChange] = useState<string>("");
 
-  const getApiUrl = (endpoint: string) => {
-    return `${url}/${endpoint}?sessionId=${sessionId}`;
-  };
+  // Scroll to bottom of conversation when conversation updates
+  useEffect(() => {
+    if (conversationRef.current) {
+      conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+    }
+  }, [conversation]);
 
   useEffect(() => {
     const url = new URL(window.location.href);
@@ -31,7 +34,7 @@ const App = () => {
 
     if (!pathParts.length) {
       console.log("No session id -- creating a new session")
-      fetch(getApiUrl('/api/session'))
+      fetch('/api/session')
         .then(response => response.json())
         .then(data => {
           console.log(`Session id: ${data.id} -- returned from server`)
@@ -261,7 +264,7 @@ const App = () => {
     try {
       setProcessing(true);
       // Send query to server
-      const response = await fetch(getApiUrl(`/api/chat/${sessionId}`), {
+      const response = await fetch(`/api/chat/${sessionId}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -298,83 +301,81 @@ const App = () => {
   };
 
   return (
-    <>
-      <div className="container">
-        <div style={{display: "flex", flexDirection: "column"}}>
-          <div className="conversation" ref={conversationRef}>
-          {conversation.map((message, index) => {
-            const formattedContent = message.content
-              .split("\n")
-              .map((line) => line.replace(/^[^\s:]+:\s*/, ''))
-              .join("\n");
+    <div className="container" style={{ display: "flex", flexDirection: "column" }}>
 
-            return (
-              <div key={index} className={message.role === 'user' ? 'user-message' : 'assistant-message'}>
-                {message.metadata ? (
-                  <>
-                    <div className="metadata">{message.metadata.title}</div>
-                    { message.user && (
-                      <div>{message.user}</div>
-                    ) }
-                    <div>{formattedContent}</div>
-                  </>
-                ) : (
-                  <>
-                  { message.user && (
+      <div className="conversation" ref={conversationRef}>
+        {conversation.map((message, index) => {
+          const formattedContent = message.content
+            .split("\n")
+            .map((line) => line.replace(/^[^\s:]+:\s*/, ''))
+            .join("\n");
+
+          return (
+            <div key={index} className={message.role === 'user' ? 'user-message' : 'assistant-message'}>
+              {message.metadata ? (
+                <>
+                  <div className="metadata">{message.metadata.title}</div>
+                  {message.user && (
                     <div>{message.user}</div>
-                  ) }
+                  )}
                   <div>{formattedContent}</div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-            <div style={{justifyContent: "center", display: "flex", paddingBottom: "0.5rem"}}>
-              <PropagateLoader 
-                size="10px"
-                loading={processing}
-                aria-label="Loading Spinner"
-                data-testid="loader"
-              />
+                </>
+              ) : (
+                <>
+                    {message.user && (
+                    <div>{message.user}</div>
+                    )}
+                  <div>{formattedContent}</div>
+                </>
+              )}
             </div>
-          </div>
-        </div>
-
-        <div className="users" style={{display: "flex", flexDirection: "row"}}>
-          <div>Users in this session: </div>
-          {users.map((name, index) => (
-              <div key={index} className={user === name ? `user-active` : `user`}>
-                {name}
-              </div>
-          ))}
-        </div>
-
-        <div className="query-box">
-          <input
-            disabled={connection ? false : true || processing}
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={handleKeyPress}
-            placeholder="Enter your query..."
-            id="query-input"
+          );
+        })}
+        <div style={{ justifyContent: "center", display: "flex", paddingBottom: "0.5rem" }}>
+          <PropagateLoader
+            size="10px"
+            loading={processing}
+            aria-label="Loading Spinner"
+            data-testid="loader"
           />
-          <button onClick={sendQuery}>Send</button>
-        </div>
-        <div className="user-box">
-          <input
-            disabled={connection ? false : true}
-            type="text"
-            value={userChange}
-            onChange={(e) => setUserChange(e.target.value)}
-            onKeyDown={handleKeyPress}
-            placeholder="Change your name..."
-            id="user-input"
-          />
-          <button onClick={sendUserChange}>Send</button>
         </div>
       </div>
-    </>
+
+      <div className="users" style={{ display: "flex", flexDirection: "row" }}>
+        <div>Users in this session: </div>
+        {users.map((name, index) => (
+          <div key={index} className={user === name ? `user-active` : `user`}>
+            {name}
+          </div>
+        ))}
+      </div>
+
+      <div className="query-box">
+        <input
+          disabled={connection ? false : true || processing}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyPress}
+          placeholder="Enter your query..."
+          id="query-input"
+        />
+        <button onClick={sendQuery}>Send</button>
+      </div>
+
+      <div className="user-box">
+        <input
+          disabled={connection ? false : true}
+          type="text"
+          value={userChange}
+          onChange={(e) => setUserChange(e.target.value)}
+          onKeyDown={handleKeyPress}
+          placeholder="Change your name..."
+          id="user-input"
+        />
+        <button onClick={sendUserChange}>Send</button>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/ketr-chat/src/index.css b/src/ketr-chat/src/index.css
index ec2585e..8910845 100644
--- a/src/ketr-chat/src/index.css
+++ b/src/ketr-chat/src/index.css
@@ -5,6 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+    padding: 0;
 }
 
 code {