Updated styles
This commit is contained in:
parent
96cd404f5f
commit
781271aa59
@ -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({
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -5,6 +5,8 @@ body {
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user