Updated styles

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({

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;

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,9 +301,8 @@ const App = () => {
   };
 
   return (
-    <>
-      <div className="container">
-        <div style={{display: "flex", flexDirection: "column"}}>
+    <div className="container" style={{ display: "flex", flexDirection: "column" }}>
+
       <div className="conversation" ref={conversationRef}>
         {conversation.map((message, index) => {
           const formattedContent = message.content
@@ -313,23 +315,23 @@ const App = () => {
               {message.metadata ? (
                 <>
                   <div className="metadata">{message.metadata.title}</div>
-                    { message.user && (
+                  {message.user && (
                     <div>{message.user}</div>
-                    ) }
+                  )}
                   <div>{formattedContent}</div>
                 </>
               ) : (
                 <>
-                  { message.user && (
+                    {message.user && (
                     <div>{message.user}</div>
-                  ) }
+                    )}
                   <div>{formattedContent}</div>
                 </>
               )}
             </div>
           );
         })}
-            <div style={{justifyContent: "center", display: "flex", paddingBottom: "0.5rem"}}>
+        <div style={{ justifyContent: "center", display: "flex", paddingBottom: "0.5rem" }}>
           <PropagateLoader
             size="10px"
             loading={processing}
@@ -338,9 +340,8 @@ const App = () => {
           />
         </div>
       </div>
-        </div>
 
-        <div className="users" style={{display: "flex", flexDirection: "row"}}>
+      <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`}>
@@ -361,6 +362,7 @@ const App = () => {
         />
         <button onClick={sendQuery}>Send</button>
       </div>
+
       <div className="user-box">
         <input
           disabled={connection ? false : true}
@@ -374,7 +376,6 @@ const App = () => {
         <button onClick={sendUserChange}>Send</button>
       </div>
     </div>
-    </>
   );
 };
 

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 {