From 2393c7489011b1b7d2ad546bb5cfe02ce43237c9 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Fri, 28 Mar 2025 12:51:50 -0700 Subject: [PATCH] Switching to CRUD instead of ws:// --- .dockerignore | 1 + jupyter/{stock.py => irc.py} | 0 src/ketr-chat/src/App.css | 20 +++- src/ketr-chat/src/App.tsx | 176 +++++++++++++++-------------------- src/ketr-chat/src/index.css | 4 +- 5 files changed, 95 insertions(+), 106 deletions(-) rename jupyter/{stock.py => irc.py} (100%) diff --git a/.dockerignore b/.dockerignore index 7a1eba3..fcd4a75 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,2 +1,3 @@ * !src +**/node_modules diff --git a/jupyter/stock.py b/jupyter/irc.py similarity index 100% rename from jupyter/stock.py rename to jupyter/irc.py diff --git a/src/ketr-chat/src/App.css b/src/ketr-chat/src/App.css index aa66d20..f7654fd 100644 --- a/src/ketr-chat/src/App.css +++ b/src/ketr-chat/src/App.css @@ -9,6 +9,23 @@ div { flex-direction: column; } +.ChatBox { + display: flex; + flex-direction: "row"; + flex-grow: 1; +} + +.Controls { + display: flex; + background-color: #F5F5F5; + border: 1px solid #E0E0E0; + overflow-y: auto; + padding: 10px; + flex-direction: column; + margin-left: 10px; + box-sizing: border-box; + overflow-x: visible; +} .container { display: flex; flex-grow: 1; @@ -42,14 +59,13 @@ div { cursor: pointer; } -.conversation { +.Conversation { display: flex; background-color: #F5F5F5; border: 1px solid #E0E0E0; flex-grow: 1; overflow-y: auto; padding: 10px; - margin-bottom: 20px; flex-direction: column; } diff --git a/src/ketr-chat/src/App.tsx b/src/ketr-chat/src/App.tsx index 3bd2b9e..3adf37a 100644 --- a/src/ketr-chat/src/App.tsx +++ b/src/ketr-chat/src/App.tsx @@ -2,14 +2,31 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'; import PropagateLoader from "react-spinners/PropagateLoader"; import Markdown from 'react-markdown'; import './App.css'; -import remarkGfm from 'remark-gfm' import rehypeKatex from 'rehype-katex' import remarkMath from 'remark-math' import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you const welcome_message = "Welcome to Ketr-Chat. I have real-time access to a lot of information. Ask things like 'What are the headlines from cnn.com?' or 'What is the weather in Portland, OR?'"; -const url: string = "https://ai.ketrenos.com" +//const url: string = "https://ai.ketrenos.com" + +const getConnectionBase = (url: string): string => { + console.log(url); + if (!url.match(/.*battle-linux.*/)) { + return url; + } else { + return 'battle-linux.ketrenos.com:5000'; + } +} + +const Controls = () => { + const tools = ["get_stock_price", "get_weather", "site_summary", "RAG JPK", "RAG LKML"] + return (
{ + tools.map((tool, index) => { + return (
{tool}
); + }) + }
); +} const App = () => { const [query, setQuery] = useState(''); @@ -20,9 +37,7 @@ const App = () => { const [loaded, setLoaded] = useState(false); const [connection, setConnection] = useState(undefined); const [sessionId, setSessionId] = useState(undefined); - const [users, setUsers] = useState([]); - const [user, setUser] = useState(""); - const [userChange, setUserChange] = useState(""); + const [loc,] = useState(window.location) // Scroll to bottom of conversation when conversation updates useEffect(() => { @@ -37,7 +52,12 @@ const App = () => { if (!pathParts.length) { console.log("No session id -- creating a new session") - fetch('/api/session') + fetch(loc.protocol + "//" + getConnectionBase(loc.host) + `/api/context`, { + method: 'CREATE', + headers: { + 'Content-Type': 'application/json', + }, + }) .then(response => response.json()) .then(data => { console.log(`Session id: ${data.id} -- returned from server`) @@ -50,7 +70,7 @@ const App = () => { setSessionId(pathParts[0]); } - }, [setSessionId]); + }, [setSessionId, loc.host, loc.protocol]); const onWsOpen = (event: any) => { console.log(`ws: open`); @@ -101,22 +121,6 @@ const App = () => { } break; - case 'user': - if (!loaded) { - setLoaded(true); - } - setUser(data.update); - console.log(`user = ${data.update}`) - break; - - case 'users': - if (!loaded) { - setLoaded(true); - } - setUsers(data.update); - console.log(`users = ${data.update}`) - break; - case 'processing': console.log(`processing = ${data.value}`) setProcessing(data.value); @@ -185,14 +189,14 @@ const App = () => { let socket = ws; if (!socket && !connection) { - let loc = window.location, new_uri; + let new_uri; if (loc.protocol === "https:") { new_uri = "wss://"; } else { new_uri = "ws://"; } - new_uri += loc.host + `/api/ws/${sessionId}`; - //new_uri += `battle-linux.ketrenos.com:5000/api/ws/${sessionId}`; + let host = getConnectionBase(loc.host) + new_uri += host + `/api/ws/${sessionId}`; console.log(`Attempting WebSocket connection to ${new_uri}`); socket = new WebSocket(new_uri) setWs(socket); @@ -223,7 +227,7 @@ const App = () => { ws.removeEventListener('message', cbMessage); } } - }, [ setWs, connection, setConnection, sessionId, ws, refWsOpen, refWsMessage, refWsClose, refWsError ]); + }, [setWs, connection, setConnection, sessionId, ws, refWsOpen, refWsMessage, refWsClose, refWsError, loc.host, loc.protocol]); const handleKeyPress = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { @@ -231,9 +235,6 @@ const App = () => { case 'query-input': sendQuery(); break; - case 'user-input': - sendUserChange(); - break; } } }; @@ -267,7 +268,7 @@ const App = () => { try { setProcessing(true); // Send query to server - const response = await fetch(`/api/chat/${sessionId}`, { + const response = await fetch(loc.protocol + "//" + getConnectionBase(loc.host) + `/api/chat/${sessionId}`, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -291,78 +292,60 @@ const App = () => { } }; - const sendUserChange = async () => { - if (!userChange.trim()) return; - - setUserChange(''); - - connection.send(JSON.stringify({ - session: sessionId, - type: 'user-change', - value: userChange - })); - }; - return (
-
- {conversation.map((message, index) => { - const formattedContent = message.content - .split("\n") - .map((line) => line.replace(/^[^\s:]+:\s*/, '')) - .join("\n"); +
+
+ {conversation.map((message, index) => { + const formattedContent = message.content + .split("\n") + .map((line) => line.replace(/^[^\s:]+:\s*/, '')) + .join("\n"); - return ( -
- {message.metadata ? ( - <> -
{message.metadata.title}
- {message.user && ( -
{message.user}
- )} - {message.role === 'assistant' ? ( -
- -
- ) : ( -
{formattedContent}
- )} - - ) : ( - <> + return ( +
+ {message.metadata ? ( + <> +
{message.metadata.title}
{message.user && ( -
{message.user}
+
{message.user}
)} {message.role === 'assistant' ? (
) : ( -
{formattedContent}
+
{formattedContent}
)} - - )} -
- ); - })} -
- -
-
- -
-
Users in this session:
- {users.map((name, index) => ( -
- {name} + + ) : ( + <> + {message.user && ( +
{message.user}
+ )} + {message.role === 'assistant' ? ( +
+ +
+ ) : ( +
{formattedContent}
+ )} + + )} +
+ ); + })} +
+
- ))} +
+
@@ -377,19 +360,6 @@ const App = () => { />
- -
- setUserChange(e.target.value)} - onKeyDown={handleKeyPress} - placeholder="Change your name..." - id="user-input" - /> - -
); }; diff --git a/src/ketr-chat/src/index.css b/src/ketr-chat/src/index.css index 8910845..b6e7de4 100644 --- a/src/ketr-chat/src/index.css +++ b/src/ketr-chat/src/index.css @@ -6,7 +6,9 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; - padding: 0; + padding: 0; + height: 100%; + width: 100%; } code {