Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@acharneski
acharneski committed Dec 6, 2024
1 parent ded5602 commit 6128bc8
Show file tree
Hide file tree
Showing 289 changed files with 699 additions and 26,168 deletions.
13 changes: 4 additions & 9 deletions core/src/main/kotlin/com/simiacryptus/skyenet/core/util/Selenium.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,10 @@ interface Selenium : AutoCloseable {
saveRoot: String
)

abstract fun setScriptTimeout(timeout: Long)
abstract fun getBrowserInfo(): String
fun setScriptTimeout(timeout: Long)
fun getBrowserInfo(): String
fun forceQuit()
abstract fun isAlive(): Boolean
//
// open fun setCookies(
// driver: WebDriver,
// cookies: Array<out Cookie>?,
// domain: String? = null
// )
fun isAlive(): Boolean
fun getLogs() : String

}
17 changes: 10 additions & 7 deletions webapp/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@
flex-direction: column;
transition: all 0.3s ease;
}

/* List styles for dark mode */
@media (prefers-color-scheme: dark) {
ol li::before {
color: var(--primary-color);
}

ol ol li::before {
color: var(--hover-color);
}
Expand Down Expand Up @@ -69,7 +71,7 @@
white-space: nowrap;
user-select: none;
backdrop-filter: blur(8px);
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Active tab state */
Expand All @@ -82,8 +84,9 @@
z-index: 1;
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-wider);
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tab-button:hover {
transform: translateY(-.5em);
background-color: var(--color-primary-alpha);
Expand Down Expand Up @@ -240,12 +243,12 @@
--color-gradient-end: var(--color-secondary);
/* Semantic variables */
/* Shadows */
--shadow-text: 0 2px 4px rgba(0,0,0,0.15);
--shadow-heading: 0 4px 8px rgba(0,0,0,0.2);
--shadow-text: 0 2px 4px rgba(0, 0, 0, 0.15);
--shadow-heading: 0 4px 8px rgba(0, 0, 0, 0.2);
/* Typography */
/* Gradients */
--gradient-heading: linear-gradient(135deg,
var(--color-gradient-start),
var(--color-gradient-end)
--gradient-heading: linear-gradient(135deg,
var(--color-gradient-start),
var(--color-gradient-end)
);
}
6 changes: 5 additions & 1 deletion webapp/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,11 @@ const App: React.FC = () => {

React.useEffect(() => {
console.log(`${LOG_PREFIX} Setting up handlers`);
setupUIHandlers();
const cleanup = setupUIHandlers();
return () => {
console.log(`${LOG_PREFIX} Cleaning up UI handlers`);
cleanup();
};
}, []);

React.useEffect(() => {
Expand Down
39 changes: 22 additions & 17 deletions webapp/src/components/ChatInterface.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,22 +53,27 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
const ws = useWebSocket(sessionId);

useEffect(() => {
// Fetch app config when component mounts
if (sessionId) {
fetchAppConfig(sessionId).then(config => {
if (config) {
let mounted = true;
const loadAppConfig = async () => {
if (!sessionId) return;
try {
const config = await fetchAppConfig(sessionId);
if (mounted && config) {
console.info('App config loaded successfully');
} else {
console.warn('Could not load app config, using defaults');
}
});
}
// Fetch app config when component mounts
if (sessionId) {
fetchAppConfig(sessionId).catch(error => {
} catch (error) {
console.error('Failed to fetch app config:', error);
});
}
}
};
loadAppConfig();
return () => {
mounted = false;
};
}, [sessionId]); // Only depend on sessionId

useEffect(() => {
debugLog('Setting up message handler', {
sessionId,
isConnected,
Expand All @@ -91,7 +96,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
const newMessage = {
id: `${Date.now()}`,
content: data.data || '',
type: 'assistant' as MessageType, // Changed from 'response' to 'assistant'
type: 'assistant' as MessageType, // Changed from 'response' to 'assistant'
timestamp: data.timestamp,
isHtml: true,
rawHtml: data.data,
Expand Down Expand Up @@ -124,11 +129,11 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
id: `${id}-${timestamp}`,
content: content,
version: parseInt(version, 10) || timestamp,
type: id.startsWith('u') ? 'user' as MessageType : 'assistant' as MessageType,
type: id.startsWith('u') ? 'user' as MessageType : 'assistant' as MessageType,
timestamp,
isHtml: false,
rawHtml: null,
sanitized: false
isHtml: false,
rawHtml: null,
sanitized: false
};
console.log(`${LOG_PREFIX} Dispatching message:`, messageObject);
console.groupEnd();
Expand All @@ -145,7 +150,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
});
websocket.removeMessageHandler(handleMessage);
};
}, [dispatch, ws]);
}, [DEBUG, dispatch, isConnected, sessionId, websocket, ws.readyState]);

const handleSendMessage = (msg: string) => {
console.log(`${LOG_PREFIX} Sending message`, {
Expand Down
89 changes: 65 additions & 24 deletions webapp/src/components/Menu/Menu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,43 @@
import React from 'react';
import styled from 'styled-components';
import {useSelector} from 'react-redux';
import {useDispatch, useSelector} from 'react-redux';
import {useModal} from '../../hooks/useModal';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faCog, faHome, faSignInAlt, faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
import {ThemeMenu} from "./ThemeMenu";
import {WebSocketMenu} from "./WebSocketMenu";
import {RootState} from "../../store/index";
import {toggleVerbose} from "../../store/slices/uiSlice";
import {toggleVerbose} from '../../store/slices/uiSlice';

const isDevelopment = process.env.NODE_ENV === 'development';

function long64(): string {
const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);
view.setBigInt64(0, BigInt(Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)));
return btoa(String.fromCharCode(...new Uint8Array(buffer)))
.replace(/=/g, '')
.replace(/\//g, '.')
.replace(/\+/g, '-');
}

function id2() {
return Array.from(long64())
.filter((it) => {
if (it >= 'a' && it <= 'z') return true;
if (it >= 'A' && it <= 'Z') return true;
if (it >= '0' && it <= '9') return true;
return false;
})
.slice(0, 4)
.join('');
}

function newGlobalID(): string {
const yyyyMMdd = new Date().toISOString().slice(0, 10).replace(/-/g, '');
return (`G-${yyyyMMdd}-${id2()}`);
}

const MenuContainer = styled.div`
display: flex;
justify-content: space-between;
Expand All @@ -21,9 +48,8 @@ const MenuContainer = styled.div`
top: 0;
z-index: 100;
/* Use composite properties for better performance */
transform: translate3d(0,0,0);
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000;
background: ${({theme}) => `
linear-gradient(135deg,
${theme.colors.surface}f0,
Expand All @@ -36,8 +62,6 @@ const MenuContainer = styled.div`
transition: transform 0.3s ease, box-shadow 0.3s ease;
@media (max-width: 768px) {
padding: ${({theme}) => theme.sizing.spacing.xs};
gap: ${({theme}) => theme.sizing.spacing.xs};
Expand Down Expand Up @@ -85,6 +109,7 @@ const DropButton = styled.button`
justify-content: center;
text-decoration: none;
/* Styles for when used as a link */
&[href] {
appearance: none;
-webkit-appearance: none;
Expand All @@ -101,27 +126,32 @@ const DropButton = styled.button`
)`};
color: ${({theme}) => theme.colors.background};
transform: translateY(-2px);
box-shadow:
0 4px 16px ${({theme}) => `${theme.colors.primary}40`},
0 0 0 1px ${({theme}) => `${theme.colors.primary}40`};
box-shadow: 0 4px 16px ${({theme}) => `${theme.colors.primary}40`},
0 0 0 1px ${({theme}) => `${theme.colors.primary}40`};
&::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(255,255,255,0.2) 0%,
transparent 70%
circle,
rgba(255, 255, 255, 0.2) 0%,
transparent 70%
);
transform: rotate(45deg);
animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
&:after {
Expand All @@ -135,9 +165,11 @@ const DropButton = styled.button`
pointer-events: none;
}
}
&:active {
transform: translateY(0);
}
&:disabled {
cursor: not-allowed;
}
Expand All @@ -161,6 +193,7 @@ const DropdownContent = styled.div`
${Dropdown}:hover & {
display: block;
}
@keyframes dropdownSlide {
from {
opacity: 0;
Expand Down Expand Up @@ -220,24 +253,25 @@ const DropLink = styled.a`
)`};
color: ${({theme}) => theme.colors.background};
transform: translateY(-2px);
box-shadow:
0 4px 16px ${({theme}) => `${theme.colors.primary}40`},
0 0 0 1px ${({theme}) => `${theme.colors.primary}40`};
box-shadow: 0 4px 16px ${({theme}) => `${theme.colors.primary}40`},
0 0 0 1px ${({theme}) => `${theme.colors.primary}40`};
&::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(255,255,255,0.2) 0%,
transparent 70%
circle,
rgba(255, 255, 255, 0.2) 0%,
transparent 70%
);
transform: rotate(45deg);
animation: shimmer 2s linear infinite;
}
&:after {
content: '';
position: absolute;
Expand All @@ -249,9 +283,11 @@ const DropLink = styled.a`
pointer-events: none;
}
}
&:active {
transform: translateY(0);
}
&:disabled {
cursor: not-allowed;
}
Expand All @@ -260,7 +296,12 @@ const DropLink = styled.a`
export const Menu: React.FC = () => {
useSelector((state: RootState) => state.config.websocket);
const {openModal} = useModal();
const dispatch = useDispatch();
const verboseMode = useSelector((state: RootState) => state.ui.verboseMode);
const handleVerboseToggle = () => {
console.log('[Menu] Toggling verbose mode:', !verboseMode);
dispatch(toggleVerbose());
};

const handleMenuClick = (modalType: string) => {
console.log('[Menu] Opening modal:', modalType);
Expand Down Expand Up @@ -288,7 +329,7 @@ export const Menu: React.FC = () => {
<DropButton>App</DropButton>
<DropdownContent>
<DropdownItem onClick={() => openModal('sessions')}>Session List</DropdownItem>
<DropdownItem as="a" href="./#new">New</DropdownItem>
<DropdownItem as="a" href={"./#" + newGlobalID()}>New</DropdownItem>
</DropdownContent>
</Dropdown>

Expand All @@ -304,7 +345,7 @@ export const Menu: React.FC = () => {
<DropdownItem onClick={() => handleMenuClick('share')}>Share</DropdownItem>
<DropdownItem onClick={() => handleMenuClick('cancel')}>Cancel</DropdownItem>
<DropdownItem onClick={() => handleMenuClick('delete')}>Delete</DropdownItem>
<DropdownItem onClick={() => toggleVerbose()}>
<DropdownItem onClick={handleVerboseToggle}>
{verboseMode ? 'Hide Verbose' : 'Show Verbose'}
</DropdownItem>
</DropdownContent>
Expand Down
4 changes: 2 additions & 2 deletions webapp/src/components/Menu/ThemeMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ export const ThemeMenu: React.FC = () => {

return (
<ThemeMenuContainer ref={menuRef}>
<ThemeButton
<ThemeButton
onClick={handleMenuToggle}
aria-expanded={isOpen}
aria-haspopup="true"
Expand All @@ -245,7 +245,7 @@ export const ThemeMenu: React.FC = () => {
</ThemeButton>
{isOpen && (
<ThemeList role="menu">
{Object.keys(themes).map((themeName, index) => {
{Object.keys(themes).map((themeName, index) => {
logDebug('Rendering theme option', {
theme: themeName,
isCurrentTheme: themeName === currentTheme
Expand Down
Loading

0 comments on commit 6128bc8

Please sign in to comment.