huge refactor
This commit is contained in:
Илья Глазунов
+30
-258
@@ -3,11 +3,7 @@ import { html, css, LitElement } from '../../assets/lit-core-2.7.4.min.js';
|
||||
export class AppHeader extends LitElement {
|
||||
static styles = css`
|
||||
* {
|
||||
font-family:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
sans-serif;
|
||||
font-family: var(--font);
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -18,14 +14,14 @@ export class AppHeader extends LitElement {
|
||||
align-items: center;
|
||||
padding: var(--header-padding);
|
||||
background: var(--header-background);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
flex: 1;
|
||||
font-size: var(--header-font-size);
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
color: var(--text-primary);
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
@@ -43,8 +39,8 @@ export class AppHeader extends LitElement {
|
||||
|
||||
.button {
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
padding: var(--header-button-padding);
|
||||
border-radius: 3px;
|
||||
font-size: var(--header-font-size-small);
|
||||
@@ -77,7 +73,7 @@ export class AppHeader extends LitElement {
|
||||
|
||||
.icon-button:hover {
|
||||
background: var(--hover-background);
|
||||
color: var(--text-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
:host([isclickthrough]) .button:hover,
|
||||
@@ -90,7 +86,7 @@ export class AppHeader extends LitElement {
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.click-through-indicator {
|
||||
@@ -99,7 +95,7 @@ export class AppHeader extends LitElement {
|
||||
background: var(--key-background);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.update-button {
|
||||
@@ -124,152 +120,6 @@ export class AppHeader extends LitElement {
|
||||
.update-button:hover {
|
||||
background: rgba(241, 76, 76, 0.1);
|
||||
}
|
||||
|
||||
.status-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: var(--header-font-size-small);
|
||||
color: var(--text-secondary);
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-text.error {
|
||||
color: #f14c4c;
|
||||
}
|
||||
|
||||
.status-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
background: var(--tooltip-bg, #1a1a1a);
|
||||
color: var(--tooltip-text, #ffffff);
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
max-width: 300px;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition:
|
||||
opacity 0.15s ease,
|
||||
visibility 0.15s ease;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.status-tooltip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 16px;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: var(--tooltip-bg, #1a1a1a);
|
||||
}
|
||||
|
||||
.status-wrapper:hover .status-tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.status-tooltip .tooltip-label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.6;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.status-tooltip .tooltip-content {
|
||||
color: #f14c4c;
|
||||
}
|
||||
|
||||
.model-info {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.model-badge {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
background: var(--key-background);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.model-badge-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.model-badge-wrapper .model-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
background: var(--tooltip-bg, #1a1a1a);
|
||||
color: var(--tooltip-text, #ffffff);
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition:
|
||||
opacity 0.15s ease,
|
||||
visibility 0.15s ease;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.model-badge-wrapper .model-tooltip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 16px;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: var(--tooltip-bg, #1a1a1a);
|
||||
}
|
||||
|
||||
.model-badge-wrapper:hover .model-tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.model-tooltip-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.model-tooltip-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.model-tooltip-label {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.model-tooltip-value {
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
}
|
||||
`;
|
||||
|
||||
static properties = {
|
||||
@@ -284,8 +134,6 @@ export class AppHeader extends LitElement {
|
||||
onHideToggleClick: { type: Function },
|
||||
isClickThrough: { type: Boolean, reflect: true },
|
||||
updateAvailable: { type: Boolean },
|
||||
aiProvider: { type: String },
|
||||
modelInfo: { type: Object },
|
||||
};
|
||||
|
||||
constructor() {
|
||||
@@ -302,8 +150,6 @@ export class AppHeader extends LitElement {
|
||||
this.isClickThrough = false;
|
||||
this.updateAvailable = false;
|
||||
this._timerInterval = null;
|
||||
this.aiProvider = 'gemini';
|
||||
this.modelInfo = { model: '', visionModel: '', whisperModel: '' };
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
@@ -314,8 +160,8 @@ export class AppHeader extends LitElement {
|
||||
|
||||
async _checkForUpdates() {
|
||||
try {
|
||||
const currentVersion = await mastermind.getVersion();
|
||||
const response = await fetch('https://raw.githubusercontent.com/ShiftyX1/Mastermind/refs/heads/master/package.json');
|
||||
const currentVersion = await cheatingDaddy.getVersion();
|
||||
const response = await fetch('https://raw.githubusercontent.com/sohzm/cheating-daddy/refs/heads/master/package.json');
|
||||
if (!response.ok) return;
|
||||
|
||||
const remotePackage = await response.json();
|
||||
@@ -344,7 +190,7 @@ export class AppHeader extends LitElement {
|
||||
|
||||
async _openUpdatePage() {
|
||||
const { ipcRenderer } = require('electron');
|
||||
await ipcRenderer.invoke('open-external', 'https://github.com/ShiftyX1/Mastermind');
|
||||
await ipcRenderer.invoke('open-external', 'https://cheatingdaddy.com');
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
@@ -396,15 +242,15 @@ export class AppHeader extends LitElement {
|
||||
|
||||
getViewTitle() {
|
||||
const titles = {
|
||||
onboarding: 'Welcome to Mastermind',
|
||||
main: 'Mastermind',
|
||||
onboarding: 'Welcome to Cheating Daddy',
|
||||
main: 'Cheating Daddy',
|
||||
customize: 'Customize',
|
||||
help: 'Help & Shortcuts',
|
||||
history: 'Conversation History',
|
||||
advanced: 'Advanced Tools',
|
||||
assistant: 'Mastermind',
|
||||
assistant: 'Cheating Daddy',
|
||||
};
|
||||
return titles[this.currentView] || 'Mastermind';
|
||||
return titles[this.currentView] || 'Cheating Daddy';
|
||||
}
|
||||
|
||||
getElapsedTime() {
|
||||
@@ -425,49 +271,8 @@ export class AppHeader extends LitElement {
|
||||
return navigationViews.includes(this.currentView);
|
||||
}
|
||||
|
||||
getProviderDisplayName() {
|
||||
const names = {
|
||||
'gemini': 'Gemini',
|
||||
'openai-realtime': 'OpenAI Realtime',
|
||||
'openai-sdk': 'OpenAI SDK',
|
||||
};
|
||||
return names[this.aiProvider] || this.aiProvider;
|
||||
}
|
||||
|
||||
renderModelInfo() {
|
||||
// Only show model info for OpenAI SDK provider
|
||||
if (this.aiProvider !== 'openai-sdk' || !this.modelInfo) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const { model, visionModel, whisperModel } = this.modelInfo;
|
||||
|
||||
// Show a compact badge with tooltip for model details
|
||||
return html`
|
||||
<div class="model-badge-wrapper">
|
||||
<span class="model-badge" title="Models">${model || 'gpt-4o'}</span>
|
||||
<div class="model-tooltip">
|
||||
<div class="model-tooltip-row">
|
||||
<span class="model-tooltip-label">Text</span>
|
||||
<span class="model-tooltip-value">${model || 'gpt-4o'}</span>
|
||||
</div>
|
||||
<div class="model-tooltip-row">
|
||||
<span class="model-tooltip-label">Vision</span>
|
||||
<span class="model-tooltip-value">${visionModel || 'gpt-4o'}</span>
|
||||
</div>
|
||||
<div class="model-tooltip-row">
|
||||
<span class="model-tooltip-label">Speech</span>
|
||||
<span class="model-tooltip-value">${whisperModel || 'whisper-1'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
const elapsedTime = this.getElapsedTime();
|
||||
const isError = this.statusText && (this.statusText.toLowerCase().includes('error') || this.statusText.toLowerCase().includes('failed'));
|
||||
const shortStatus = isError ? 'Error' : this.statusText;
|
||||
|
||||
return html`
|
||||
<div class="header">
|
||||
@@ -475,63 +280,34 @@ export class AppHeader extends LitElement {
|
||||
<div class="header-actions">
|
||||
${this.currentView === 'assistant'
|
||||
? html`
|
||||
${this.renderModelInfo()}
|
||||
<span>${elapsedTime}</span>
|
||||
<div class="status-wrapper">
|
||||
<span class="status-text ${isError ? 'error' : ''}">${shortStatus}</span>
|
||||
${isError
|
||||
? html`
|
||||
<div class="status-tooltip">
|
||||
<div class="tooltip-label">Error Details</div>
|
||||
<div class="tooltip-content">${this.statusText}</div>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
</div>
|
||||
<span>${this.statusText}</span>
|
||||
${this.isClickThrough ? html`<span class="click-through-indicator">click-through</span>` : ''}
|
||||
`
|
||||
: ''}
|
||||
${this.currentView === 'main'
|
||||
? html`
|
||||
${this.updateAvailable
|
||||
? html`
|
||||
<button class="update-button" @click=${this._openUpdatePage}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Update available
|
||||
</button>
|
||||
`
|
||||
: ''}
|
||||
${this.updateAvailable ? html`
|
||||
<button class="update-button" @click=${this._openUpdatePage}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Update available
|
||||
</button>
|
||||
` : ''}
|
||||
<button class="icon-button" @click=${this.onHistoryClick}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="icon-button" @click=${this.onCustomizeClick}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="icon-button" @click=${this.onHelpClick}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
`
|
||||
@@ -539,23 +315,19 @@ export class AppHeader extends LitElement {
|
||||
${this.currentView === 'assistant'
|
||||
? html`
|
||||
<button @click=${this.onHideToggleClick} class="button">
|
||||
Hide <span class="key" style="pointer-events: none;">${mastermind.isMacOS ? 'Cmd' : 'Ctrl'}</span
|
||||
Hide <span class="key" style="pointer-events: none;">${cheatingDaddy.isMacOS ? 'Cmd' : 'Ctrl'}</span
|
||||
> <span class="key">\</span>
|
||||
</button>
|
||||
<button @click=${this.onCloseClick} class="icon-button window-close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
||||
/>
|
||||
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
|
||||
</svg>
|
||||
</button>
|
||||
`
|
||||
: html`
|
||||
<button @click=${this.isNavigationView() ? this.onBackClick : this.onCloseClick} class="icon-button window-close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
||||
/>
|
||||
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
|
||||
</svg>
|
||||
</button>
|
||||
`}
|
||||
|
||||
@@ -0,0 +1,881 @@
|
||||
import { html, css, LitElement } from '../../assets/lit-core-2.7.4.min.js';
|
||||
import { MainView } from '../views/MainView.js';
|
||||
import { CustomizeView } from '../views/CustomizeView.js';
|
||||
import { HelpView } from '../views/HelpView.js';
|
||||
import { HistoryView } from '../views/HistoryView.js';
|
||||
import { AssistantView } from '../views/AssistantView.js';
|
||||
import { OnboardingView } from '../views/OnboardingView.js';
|
||||
import { AICustomizeView } from '../views/AICustomizeView.js';
|
||||
import { FeedbackView } from '../views/FeedbackView.js';
|
||||
|
||||
export class CheatingDaddyApp extends LitElement {
|
||||
static styles = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: var(--bg-app);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Full app shell: top bar + sidebar/content ── */
|
||||
|
||||
.app-shell {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-drag-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.drag-region {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.top-drag-bar.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.traffic-lights {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 var(--space-md);
|
||||
height: 100%;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.traffic-light {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.traffic-light:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.traffic-light.close {
|
||||
background: #FF5F57;
|
||||
}
|
||||
|
||||
.traffic-light.minimize {
|
||||
background: #FEBC2E;
|
||||
}
|
||||
|
||||
.traffic-light.maximize {
|
||||
background: #28C840;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
min-width: var(--sidebar-width);
|
||||
background: var(--bg-surface);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 42px 0 var(--space-md) 0;
|
||||
transition: width var(--transition), min-width var(--transition), opacity var(--transition);
|
||||
}
|
||||
|
||||
.sidebar.hidden {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-right: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
padding-top: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.sidebar-brand h1 {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
padding: 0 var(--space-sm);
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition), background var(--transition);
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.nav-item svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: var(--space-sm);
|
||||
margin-top: var(--space-sm);
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.update-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
width: 100%;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: var(--danger);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background var(--transition), border-color var(--transition);
|
||||
animation: update-wobble 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.update-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.14);
|
||||
border-color: rgba(239, 68, 68, 0.35);
|
||||
}
|
||||
|
||||
@keyframes update-wobble {
|
||||
0%, 90%, 100% { transform: rotate(0deg); }
|
||||
92% { transform: rotate(-2deg); }
|
||||
94% { transform: rotate(2deg); }
|
||||
96% { transform: rotate(-1.5deg); }
|
||||
98% { transform: rotate(1.5deg); }
|
||||
}
|
||||
|
||||
.update-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.version-text {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-muted);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
}
|
||||
|
||||
/* ── Main content area ── */
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-app);
|
||||
}
|
||||
|
||||
/* Live mode top bar */
|
||||
.live-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--space-md);
|
||||
background: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
height: 36px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.live-bar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-app-region: no-drag;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.live-bar-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
.live-bar-back:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.live-bar-back svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.live-bar-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-muted);
|
||||
font-weight: var(--font-weight-medium);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.live-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
-webkit-app-region: no-drag;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.live-bar-text {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.live-bar-text.clickable {
|
||||
cursor: pointer;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
.live-bar-text.clickable:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Content inner */
|
||||
.content-inner {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.content-inner.live {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Onboarding fills everything */
|
||||
.fullscreen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: var(--bg-app);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-strong);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #444444;
|
||||
}
|
||||
`;
|
||||
|
||||
static properties = {
|
||||
currentView: { type: String },
|
||||
statusText: { type: String },
|
||||
startTime: { type: Number },
|
||||
isRecording: { type: Boolean },
|
||||
sessionActive: { type: Boolean },
|
||||
selectedProfile: { type: String },
|
||||
selectedLanguage: { type: String },
|
||||
responses: { type: Array },
|
||||
currentResponseIndex: { type: Number },
|
||||
selectedScreenshotInterval: { type: String },
|
||||
selectedImageQuality: { type: String },
|
||||
layoutMode: { type: String },
|
||||
_viewInstances: { type: Object, state: true },
|
||||
_isClickThrough: { state: true },
|
||||
_awaitingNewResponse: { state: true },
|
||||
shouldAnimateResponse: { type: Boolean },
|
||||
_storageLoaded: { state: true },
|
||||
_updateAvailable: { state: true },
|
||||
_whisperDownloading: { state: true },
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.currentView = 'main';
|
||||
this.statusText = '';
|
||||
this.startTime = null;
|
||||
this.isRecording = false;
|
||||
this.sessionActive = false;
|
||||
this.selectedProfile = 'interview';
|
||||
this.selectedLanguage = 'en-US';
|
||||
this.selectedScreenshotInterval = '5';
|
||||
this.selectedImageQuality = 'medium';
|
||||
this.layoutMode = 'normal';
|
||||
this.responses = [];
|
||||
this.currentResponseIndex = -1;
|
||||
this._viewInstances = new Map();
|
||||
this._isClickThrough = false;
|
||||
this._awaitingNewResponse = false;
|
||||
this._currentResponseIsComplete = true;
|
||||
this.shouldAnimateResponse = false;
|
||||
this._storageLoaded = false;
|
||||
this._timerInterval = null;
|
||||
this._updateAvailable = false;
|
||||
this._whisperDownloading = false;
|
||||
this._localVersion = '';
|
||||
|
||||
this._loadFromStorage();
|
||||
this._checkForUpdates();
|
||||
}
|
||||
|
||||
async _checkForUpdates() {
|
||||
try {
|
||||
this._localVersion = await cheatingDaddy.getVersion();
|
||||
this.requestUpdate();
|
||||
|
||||
const res = await fetch('https://raw.githubusercontent.com/sohzm/cheating-daddy/refs/heads/master/package.json');
|
||||
if (!res.ok) return;
|
||||
const remote = await res.json();
|
||||
const remoteVersion = remote.version;
|
||||
|
||||
const toNum = v => v.split('.').map(Number);
|
||||
const [rMaj, rMin, rPatch] = toNum(remoteVersion);
|
||||
const [lMaj, lMin, lPatch] = toNum(this._localVersion);
|
||||
|
||||
if (rMaj > lMaj || (rMaj === lMaj && rMin > lMin) || (rMaj === lMaj && rMin === lMin && rPatch > lPatch)) {
|
||||
this._updateAvailable = true;
|
||||
this.requestUpdate();
|
||||
}
|
||||
} catch (e) {
|
||||
// silently ignore
|
||||
}
|
||||
}
|
||||
|
||||
async _loadFromStorage() {
|
||||
try {
|
||||
const [config, prefs] = await Promise.all([
|
||||
cheatingDaddy.storage.getConfig(),
|
||||
cheatingDaddy.storage.getPreferences()
|
||||
]);
|
||||
|
||||
this.currentView = config.onboarded ? 'main' : 'onboarding';
|
||||
this.selectedProfile = prefs.selectedProfile || 'interview';
|
||||
this.selectedLanguage = prefs.selectedLanguage || 'en-US';
|
||||
this.selectedScreenshotInterval = prefs.selectedScreenshotInterval || '5';
|
||||
this.selectedImageQuality = prefs.selectedImageQuality || 'medium';
|
||||
this.layoutMode = config.layout || 'normal';
|
||||
|
||||
this._storageLoaded = true;
|
||||
this.requestUpdate();
|
||||
} catch (error) {
|
||||
console.error('Error loading from storage:', error);
|
||||
this._storageLoaded = true;
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
ipcRenderer.on('new-response', (_, response) => this.addNewResponse(response));
|
||||
ipcRenderer.on('update-response', (_, response) => this.updateCurrentResponse(response));
|
||||
ipcRenderer.on('update-status', (_, status) => this.setStatus(status));
|
||||
ipcRenderer.on('click-through-toggled', (_, isEnabled) => { this._isClickThrough = isEnabled; });
|
||||
ipcRenderer.on('reconnect-failed', (_, data) => this.addNewResponse(data.message));
|
||||
ipcRenderer.on('whisper-downloading', (_, downloading) => { this._whisperDownloading = downloading; });
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this._stopTimer();
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
ipcRenderer.removeAllListeners('new-response');
|
||||
ipcRenderer.removeAllListeners('update-response');
|
||||
ipcRenderer.removeAllListeners('update-status');
|
||||
ipcRenderer.removeAllListeners('click-through-toggled');
|
||||
ipcRenderer.removeAllListeners('reconnect-failed');
|
||||
ipcRenderer.removeAllListeners('whisper-downloading');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Timer ──
|
||||
|
||||
_startTimer() {
|
||||
this._stopTimer();
|
||||
if (this.startTime) {
|
||||
this._timerInterval = setInterval(() => this.requestUpdate(), 1000);
|
||||
}
|
||||
}
|
||||
|
||||
_stopTimer() {
|
||||
if (this._timerInterval) {
|
||||
clearInterval(this._timerInterval);
|
||||
this._timerInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
getElapsedTime() {
|
||||
if (!this.startTime) return '0:00';
|
||||
const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
|
||||
const h = Math.floor(elapsed / 3600);
|
||||
const m = Math.floor((elapsed % 3600) / 60);
|
||||
const s = elapsed % 60;
|
||||
const pad = n => String(n).padStart(2, '0');
|
||||
if (h > 0) return `${h}:${pad(m)}:${pad(s)}`;
|
||||
return `${m}:${pad(s)}`;
|
||||
}
|
||||
|
||||
// ── Status & Responses ──
|
||||
|
||||
setStatus(text) {
|
||||
this.statusText = text;
|
||||
if (text.includes('Ready') || text.includes('Listening') || text.includes('Error')) {
|
||||
this._currentResponseIsComplete = true;
|
||||
}
|
||||
}
|
||||
|
||||
addNewResponse(response) {
|
||||
const wasOnLatest = this.currentResponseIndex === this.responses.length - 1;
|
||||
this.responses = [...this.responses, response];
|
||||
if (wasOnLatest || this.currentResponseIndex === -1) {
|
||||
this.currentResponseIndex = this.responses.length - 1;
|
||||
}
|
||||
this._awaitingNewResponse = false;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
updateCurrentResponse(response) {
|
||||
if (this.responses.length > 0) {
|
||||
this.responses = [...this.responses.slice(0, -1), response];
|
||||
} else {
|
||||
this.addNewResponse(response);
|
||||
}
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
// ── Navigation ──
|
||||
|
||||
navigate(view) {
|
||||
this.currentView = view;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
async handleClose() {
|
||||
if (this.currentView === 'assistant') {
|
||||
cheatingDaddy.stopCapture();
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('close-session');
|
||||
}
|
||||
this.sessionActive = false;
|
||||
this._stopTimer();
|
||||
this.currentView = 'main';
|
||||
} else {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('quit-application');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async _handleMinimize() {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('window-minimize');
|
||||
}
|
||||
}
|
||||
|
||||
async handleHideToggle() {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('toggle-window-visibility');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Session start ──
|
||||
|
||||
async handleStart() {
|
||||
const prefs = await cheatingDaddy.storage.getPreferences();
|
||||
const providerMode = prefs.providerMode || 'byok';
|
||||
|
||||
if (providerMode === 'local') {
|
||||
const success = await cheatingDaddy.initializeLocal(this.selectedProfile);
|
||||
if (!success) {
|
||||
const mainView = this.shadowRoot.querySelector('main-view');
|
||||
if (mainView && mainView.triggerApiKeyError) {
|
||||
mainView.triggerApiKeyError();
|
||||
}
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
const apiKey = await cheatingDaddy.storage.getApiKey();
|
||||
if (!apiKey || apiKey === '') {
|
||||
const mainView = this.shadowRoot.querySelector('main-view');
|
||||
if (mainView && mainView.triggerApiKeyError) {
|
||||
mainView.triggerApiKeyError();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
await cheatingDaddy.initializeGemini(this.selectedProfile, this.selectedLanguage);
|
||||
}
|
||||
|
||||
cheatingDaddy.startCapture(this.selectedScreenshotInterval, this.selectedImageQuality);
|
||||
this.responses = [];
|
||||
this.currentResponseIndex = -1;
|
||||
this.startTime = Date.now();
|
||||
this.sessionActive = true;
|
||||
this.currentView = 'assistant';
|
||||
this._startTimer();
|
||||
}
|
||||
|
||||
async handleAPIKeyHelp() {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('open-external', 'https://cheatingdaddy.com/help/api-key');
|
||||
}
|
||||
}
|
||||
|
||||
async handleGroqAPIKeyHelp() {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('open-external', 'https://console.groq.com/keys');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Settings handlers ──
|
||||
|
||||
async handleProfileChange(profile) {
|
||||
this.selectedProfile = profile;
|
||||
await cheatingDaddy.storage.updatePreference('selectedProfile', profile);
|
||||
}
|
||||
|
||||
async handleLanguageChange(language) {
|
||||
this.selectedLanguage = language;
|
||||
await cheatingDaddy.storage.updatePreference('selectedLanguage', language);
|
||||
}
|
||||
|
||||
async handleScreenshotIntervalChange(interval) {
|
||||
this.selectedScreenshotInterval = interval;
|
||||
await cheatingDaddy.storage.updatePreference('selectedScreenshotInterval', interval);
|
||||
}
|
||||
|
||||
async handleImageQualityChange(quality) {
|
||||
this.selectedImageQuality = quality;
|
||||
await cheatingDaddy.storage.updatePreference('selectedImageQuality', quality);
|
||||
}
|
||||
|
||||
async handleLayoutModeChange(layoutMode) {
|
||||
this.layoutMode = layoutMode;
|
||||
await cheatingDaddy.storage.updateConfig('layout', layoutMode);
|
||||
if (window.require) {
|
||||
try {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('update-sizes');
|
||||
} catch (error) {
|
||||
console.error('Failed to update sizes:', error);
|
||||
}
|
||||
}
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
async handleExternalLinkClick(url) {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('open-external', url);
|
||||
}
|
||||
}
|
||||
|
||||
async handleSendText(message) {
|
||||
const result = await window.cheatingDaddy.sendTextMessage(message);
|
||||
if (!result.success) {
|
||||
this.setStatus('Error sending message: ' + result.error);
|
||||
} else {
|
||||
this.setStatus('Message sent...');
|
||||
this._awaitingNewResponse = true;
|
||||
}
|
||||
}
|
||||
|
||||
handleResponseIndexChanged(e) {
|
||||
this.currentResponseIndex = e.detail.index;
|
||||
this.shouldAnimateResponse = false;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
handleOnboardingComplete() {
|
||||
this.currentView = 'main';
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
if (changedProperties.has('currentView') && window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
ipcRenderer.send('view-changed', this.currentView);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
_isLiveMode() {
|
||||
return this.currentView === 'assistant';
|
||||
}
|
||||
|
||||
// ── Render ──
|
||||
|
||||
renderCurrentView() {
|
||||
switch (this.currentView) {
|
||||
case 'onboarding':
|
||||
return html`
|
||||
<onboarding-view
|
||||
.onComplete=${() => this.handleOnboardingComplete()}
|
||||
.onClose=${() => this.handleClose()}
|
||||
></onboarding-view>
|
||||
`;
|
||||
|
||||
case 'main':
|
||||
return html`
|
||||
<main-view
|
||||
.selectedProfile=${this.selectedProfile}
|
||||
.onProfileChange=${p => this.handleProfileChange(p)}
|
||||
.onStart=${() => this.handleStart()}
|
||||
.onExternalLink=${url => this.handleExternalLinkClick(url)}
|
||||
.whisperDownloading=${this._whisperDownloading}
|
||||
></main-view>
|
||||
`;
|
||||
|
||||
case 'ai-customize':
|
||||
return html`
|
||||
<ai-customize-view
|
||||
.selectedProfile=${this.selectedProfile}
|
||||
.onProfileChange=${p => this.handleProfileChange(p)}
|
||||
></ai-customize-view>
|
||||
`;
|
||||
|
||||
case 'customize':
|
||||
return html`
|
||||
<customize-view
|
||||
.selectedProfile=${this.selectedProfile}
|
||||
.selectedLanguage=${this.selectedLanguage}
|
||||
.selectedScreenshotInterval=${this.selectedScreenshotInterval}
|
||||
.selectedImageQuality=${this.selectedImageQuality}
|
||||
.layoutMode=${this.layoutMode}
|
||||
.onProfileChange=${p => this.handleProfileChange(p)}
|
||||
.onLanguageChange=${l => this.handleLanguageChange(l)}
|
||||
.onScreenshotIntervalChange=${i => this.handleScreenshotIntervalChange(i)}
|
||||
.onImageQualityChange=${q => this.handleImageQualityChange(q)}
|
||||
.onLayoutModeChange=${lm => this.handleLayoutModeChange(lm)}
|
||||
></customize-view>
|
||||
`;
|
||||
|
||||
case 'feedback':
|
||||
return html`<feedback-view></feedback-view>`;
|
||||
|
||||
case 'help':
|
||||
return html`<help-view .onExternalLinkClick=${url => this.handleExternalLinkClick(url)}></help-view>`;
|
||||
|
||||
case 'history':
|
||||
return html`<history-view></history-view>`;
|
||||
|
||||
case 'assistant':
|
||||
return html`
|
||||
<assistant-view
|
||||
.responses=${this.responses}
|
||||
.currentResponseIndex=${this.currentResponseIndex}
|
||||
.selectedProfile=${this.selectedProfile}
|
||||
.onSendText=${msg => this.handleSendText(msg)}
|
||||
.shouldAnimateResponse=${this.shouldAnimateResponse}
|
||||
@response-index-changed=${this.handleResponseIndexChanged}
|
||||
@response-animation-complete=${() => {
|
||||
this.shouldAnimateResponse = false;
|
||||
this._currentResponseIsComplete = true;
|
||||
this.requestUpdate();
|
||||
}}
|
||||
></assistant-view>
|
||||
`;
|
||||
|
||||
default:
|
||||
return html`<div>Unknown view: ${this.currentView}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
renderSidebar() {
|
||||
const items = [
|
||||
{ id: 'main', label: 'Home', icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m19 8.71l-5.333-4.148a2.666 2.666 0 0 0-3.274 0L5.059 8.71a2.67 2.67 0 0 0-1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.2c0-.823-.38-1.6-1.03-2.105"/><path d="M16 15c-2.21 1.333-5.792 1.333-8 0"/></g></svg>` },
|
||||
{ id: 'ai-customize', label: 'AI Customization', icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3v7h6l-8 11v-7H5z" /></svg>` },
|
||||
{ id: 'history', label: 'History', icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M10 20.777a9 9 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a9 9 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A9 9 0 0 1 10 3.223"/><path d="M12 8v4l3 3"/></g></svg>` },
|
||||
{ id: 'customize', label: 'Settings', icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19.875 6.27A2.23 2.23 0 0 1 21 8.218v7.284c0 .809-.443 1.555-1.158 1.948l-6.75 4.27a2.27 2.27 0 0 1-2.184 0l-6.75-4.27A2.23 2.23 0 0 1 3 15.502V8.217c0-.809.443-1.554 1.158-1.947l6.75-3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98z"/><path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0"/></g></svg>` },
|
||||
{ id: 'feedback', label: 'Feedback', icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM9.5 9h.01m4.99 0h.01"/><path d="M9.5 13a3.5 3.5 0 0 0 5 0"/></g></svg>` },
|
||||
{ id: 'help', label: 'Help', icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9s-9-1.8-9-9s1.8-9 9-9m0 13v.01"/><path d="M12 13a2 2 0 0 0 .914-3.782a1.98 1.98 0 0 0-2.414.483"/></g></svg>` },
|
||||
];
|
||||
|
||||
return html`
|
||||
<div class="sidebar ${this._isLiveMode() ? 'hidden' : ''}">
|
||||
<div class="sidebar-brand">
|
||||
<h1>Cheating Daddy</h1>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
${items.map(item => html`
|
||||
<button
|
||||
class="nav-item ${this.currentView === item.id ? 'active' : ''}"
|
||||
@click=${() => this.navigate(item.id)}
|
||||
title=${item.label}
|
||||
>
|
||||
${item.icon}
|
||||
${item.label}
|
||||
</button>
|
||||
`)}
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
${this._updateAvailable ? html`
|
||||
<button class="update-btn" @click=${() => this.handleExternalLinkClick('https://cheatingdaddy.com/download')}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5l5-5m-5-7v12" /></svg>
|
||||
Update available
|
||||
</button>
|
||||
` : html`
|
||||
<div class="version-text">v${this._localVersion}</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderLiveBar() {
|
||||
if (!this._isLiveMode()) return '';
|
||||
|
||||
const profileLabels = {
|
||||
interview: 'Interview',
|
||||
sales: 'Sales Call',
|
||||
meeting: 'Meeting',
|
||||
presentation: 'Presentation',
|
||||
negotiation: 'Negotiation',
|
||||
exam: 'Exam',
|
||||
};
|
||||
|
||||
return html`
|
||||
<div class="live-bar">
|
||||
<div class="live-bar-left">
|
||||
<button class="live-bar-back" @click=${() => this.handleClose()} title="End session">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 0 1-.02 1.06L8.832 10l3.938 3.71a.75.75 0 1 1-1.04 1.08l-4.5-4.25a.75.75 0 0 1 0-1.08l4.5-4.25a.75.75 0 0 1 1.06.02Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="live-bar-center">
|
||||
${profileLabels[this.selectedProfile] || 'Session'}
|
||||
</div>
|
||||
<div class="live-bar-right">
|
||||
${this.statusText ? html`<span class="live-bar-text">${this.statusText}</span>` : ''}
|
||||
<span class="live-bar-text">${this.getElapsedTime()}</span>
|
||||
${this._isClickThrough ? html`<span class="live-bar-text">[click through]</span>` : ''}
|
||||
<span class="live-bar-text clickable" @click=${() => this.handleHideToggle()}>[hide]</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
// Onboarding is fullscreen, no sidebar
|
||||
if (this.currentView === 'onboarding') {
|
||||
return html`
|
||||
<div class="fullscreen">
|
||||
${this.renderCurrentView()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const isLive = this._isLiveMode();
|
||||
|
||||
return html`
|
||||
<div class="app-shell">
|
||||
<div class="top-drag-bar ${isLive ? 'hidden' : ''}">
|
||||
<div class="traffic-lights">
|
||||
<button class="traffic-light close" @click=${() => this.handleClose()} title="Close"></button>
|
||||
<button class="traffic-light minimize" @click=${() => this._handleMinimize()} title="Minimize"></button>
|
||||
<button class="traffic-light maximize" title="Maximize"></button>
|
||||
</div>
|
||||
<div class="drag-region"></div>
|
||||
</div>
|
||||
${this.renderSidebar()}
|
||||
<div class="content">
|
||||
${isLive ? this.renderLiveBar() : ''}
|
||||
<div class="content-inner ${isLive ? 'live' : ''}">
|
||||
${this.renderCurrentView()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('cheating-daddy-app', CheatingDaddyApp);
|
||||
@@ -1,640 +0,0 @@
|
||||
import { html, css, LitElement } from '../../assets/lit-core-2.7.4.min.js';
|
||||
import { AppHeader } from './AppHeader.js';
|
||||
import { MainView } from '../views/MainView.js';
|
||||
import { CustomizeView } from '../views/CustomizeView.js';
|
||||
import { HelpView } from '../views/HelpView.js';
|
||||
import { HistoryView } from '../views/HistoryView.js';
|
||||
import { AssistantView } from '../views/AssistantView.js';
|
||||
import { OnboardingView } from '../views/OnboardingView.js';
|
||||
import { ScreenPickerDialog } from '../views/ScreenPickerDialog.js';
|
||||
|
||||
export class MastermindApp extends LitElement {
|
||||
static styles = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
sans-serif;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: var(--background-transparent);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.window-container {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: var(--main-content-padding);
|
||||
overflow-y: auto;
|
||||
background: var(--main-content-background);
|
||||
}
|
||||
|
||||
.main-content.with-border {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.main-content.assistant-view {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.main-content.onboarding-view {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.main-content.settings-view,
|
||||
.main-content.help-view,
|
||||
.main-content.history-view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.view-container {
|
||||
opacity: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.view-container.entering {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
`;
|
||||
|
||||
static properties = {
|
||||
currentView: { type: String },
|
||||
statusText: { type: String },
|
||||
startTime: { type: Number },
|
||||
isRecording: { type: Boolean },
|
||||
sessionActive: { type: Boolean },
|
||||
selectedProfile: { type: String },
|
||||
selectedLanguage: { type: String },
|
||||
responses: { type: Array },
|
||||
currentResponseIndex: { type: Number },
|
||||
selectedScreenshotInterval: { type: String },
|
||||
selectedImageQuality: { type: String },
|
||||
layoutMode: { type: String },
|
||||
_viewInstances: { type: Object, state: true },
|
||||
_isClickThrough: { state: true },
|
||||
_awaitingNewResponse: { state: true },
|
||||
shouldAnimateResponse: { type: Boolean },
|
||||
_storageLoaded: { state: true },
|
||||
aiProvider: { type: String },
|
||||
modelInfo: { type: Object },
|
||||
showScreenPicker: { type: Boolean },
|
||||
screenSources: { type: Array },
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
// Set defaults - will be overwritten by storage
|
||||
this.currentView = 'main'; // Will check onboarding after storage loads
|
||||
this.statusText = '';
|
||||
this.startTime = null;
|
||||
this.isRecording = false;
|
||||
this.sessionActive = false;
|
||||
this.selectedProfile = 'interview';
|
||||
this.selectedLanguage = 'en-US';
|
||||
this.selectedScreenshotInterval = '5';
|
||||
this.selectedImageQuality = 'medium';
|
||||
this.layoutMode = 'normal';
|
||||
this.responses = [];
|
||||
this.currentResponseIndex = -1;
|
||||
this._viewInstances = new Map();
|
||||
this._isClickThrough = false;
|
||||
this._awaitingNewResponse = false;
|
||||
this._currentResponseIsComplete = true;
|
||||
this.shouldAnimateResponse = false;
|
||||
this._storageLoaded = false;
|
||||
this.aiProvider = 'gemini';
|
||||
this.modelInfo = { model: '', visionModel: '', whisperModel: '' };
|
||||
this.showScreenPicker = false;
|
||||
this.screenSources = [];
|
||||
|
||||
// Load from storage
|
||||
this._loadFromStorage();
|
||||
}
|
||||
|
||||
async _loadFromStorage() {
|
||||
try {
|
||||
const [config, prefs, openaiSdkCreds] = await Promise.all([
|
||||
mastermind.storage.getConfig(),
|
||||
mastermind.storage.getPreferences(),
|
||||
mastermind.storage.getOpenAISDKCredentials(),
|
||||
]);
|
||||
|
||||
// Check onboarding status
|
||||
this.currentView = config.onboarded ? 'main' : 'onboarding';
|
||||
|
||||
// Apply background appearance (color + transparency)
|
||||
this.applyBackgroundAppearance(prefs.backgroundColor ?? '#1e1e1e', prefs.backgroundTransparency ?? 0.8);
|
||||
|
||||
// Load preferences
|
||||
this.selectedProfile = prefs.selectedProfile || 'interview';
|
||||
this.selectedLanguage = prefs.selectedLanguage || 'en-US';
|
||||
this.selectedScreenshotInterval = prefs.selectedScreenshotInterval || '5';
|
||||
this.selectedImageQuality = prefs.selectedImageQuality || 'medium';
|
||||
this.layoutMode = config.layout || 'normal';
|
||||
|
||||
// Load AI provider and model info
|
||||
this.aiProvider = prefs.aiProvider || 'gemini';
|
||||
this.modelInfo = {
|
||||
model: openaiSdkCreds.model || 'gpt-4o',
|
||||
visionModel: openaiSdkCreds.visionModel || 'gpt-4o',
|
||||
whisperModel: openaiSdkCreds.whisperModel || 'whisper-1',
|
||||
};
|
||||
|
||||
this._storageLoaded = true;
|
||||
this.updateLayoutMode();
|
||||
this.requestUpdate();
|
||||
} catch (error) {
|
||||
console.error('Error loading from storage:', error);
|
||||
this._storageLoaded = true;
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result
|
||||
? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
}
|
||||
: { r: 30, g: 30, b: 30 };
|
||||
}
|
||||
|
||||
lightenColor(rgb, amount) {
|
||||
return {
|
||||
r: Math.min(255, rgb.r + amount),
|
||||
g: Math.min(255, rgb.g + amount),
|
||||
b: Math.min(255, rgb.b + amount),
|
||||
};
|
||||
}
|
||||
|
||||
applyBackgroundAppearance(backgroundColor, alpha) {
|
||||
const root = document.documentElement;
|
||||
const baseRgb = this.hexToRgb(backgroundColor);
|
||||
|
||||
// Generate color variants based on the base color
|
||||
const secondary = this.lightenColor(baseRgb, 7);
|
||||
const tertiary = this.lightenColor(baseRgb, 15);
|
||||
const hover = this.lightenColor(baseRgb, 20);
|
||||
|
||||
root.style.setProperty('--header-background', `rgba(${baseRgb.r}, ${baseRgb.g}, ${baseRgb.b}, ${alpha})`);
|
||||
root.style.setProperty('--main-content-background', `rgba(${baseRgb.r}, ${baseRgb.g}, ${baseRgb.b}, ${alpha})`);
|
||||
root.style.setProperty('--bg-primary', `rgba(${baseRgb.r}, ${baseRgb.g}, ${baseRgb.b}, ${alpha})`);
|
||||
root.style.setProperty('--bg-secondary', `rgba(${secondary.r}, ${secondary.g}, ${secondary.b}, ${alpha})`);
|
||||
root.style.setProperty('--bg-tertiary', `rgba(${tertiary.r}, ${tertiary.g}, ${tertiary.b}, ${alpha})`);
|
||||
root.style.setProperty('--bg-hover', `rgba(${hover.r}, ${hover.g}, ${hover.b}, ${alpha})`);
|
||||
root.style.setProperty('--input-background', `rgba(${tertiary.r}, ${tertiary.g}, ${tertiary.b}, ${alpha})`);
|
||||
root.style.setProperty('--input-focus-background', `rgba(${tertiary.r}, ${tertiary.g}, ${tertiary.b}, ${alpha})`);
|
||||
root.style.setProperty('--hover-background', `rgba(${hover.r}, ${hover.g}, ${hover.b}, ${alpha})`);
|
||||
root.style.setProperty('--scrollbar-background', `rgba(${baseRgb.r}, ${baseRgb.g}, ${baseRgb.b}, ${alpha})`);
|
||||
}
|
||||
|
||||
// Keep old function name for backwards compatibility
|
||||
applyBackgroundTransparency(alpha) {
|
||||
this.applyBackgroundAppearance('#1e1e1e', alpha);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
// Apply layout mode to document root
|
||||
this.updateLayoutMode();
|
||||
|
||||
// Set up IPC listeners if needed
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
ipcRenderer.on('new-response', (_, response) => {
|
||||
this.addNewResponse(response);
|
||||
});
|
||||
ipcRenderer.on('update-response', (_, response) => {
|
||||
this.updateCurrentResponse(response);
|
||||
});
|
||||
ipcRenderer.on('update-status', (_, status) => {
|
||||
this.setStatus(status);
|
||||
});
|
||||
ipcRenderer.on('click-through-toggled', (_, isEnabled) => {
|
||||
this._isClickThrough = isEnabled;
|
||||
});
|
||||
ipcRenderer.on('reconnect-failed', (_, data) => {
|
||||
this.addNewResponse(data.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
ipcRenderer.removeAllListeners('new-response');
|
||||
ipcRenderer.removeAllListeners('update-response');
|
||||
ipcRenderer.removeAllListeners('update-status');
|
||||
ipcRenderer.removeAllListeners('click-through-toggled');
|
||||
ipcRenderer.removeAllListeners('reconnect-failed');
|
||||
}
|
||||
}
|
||||
|
||||
setStatus(text) {
|
||||
this.statusText = text;
|
||||
|
||||
// Mark response as complete when we get certain status messages
|
||||
if (text.includes('Ready') || text.includes('Listening') || text.includes('Error')) {
|
||||
this._currentResponseIsComplete = true;
|
||||
console.log('[setStatus] Marked current response as complete');
|
||||
}
|
||||
}
|
||||
|
||||
addNewResponse(response) {
|
||||
// Add a new response entry (first word of a new AI response)
|
||||
this.responses = [...this.responses, response];
|
||||
this.currentResponseIndex = this.responses.length - 1;
|
||||
this._awaitingNewResponse = false;
|
||||
console.log('[addNewResponse] Added:', response);
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
updateCurrentResponse(response) {
|
||||
// Update the current response in place (streaming subsequent words)
|
||||
if (this.responses.length > 0) {
|
||||
this.responses = [...this.responses.slice(0, -1), response];
|
||||
console.log('[updateCurrentResponse] Updated to:', response);
|
||||
} else {
|
||||
// Fallback: if no responses exist, add as new
|
||||
this.addNewResponse(response);
|
||||
}
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
// Header event handlers
|
||||
handleCustomizeClick() {
|
||||
this.currentView = 'customize';
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
handleHelpClick() {
|
||||
this.currentView = 'help';
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
handleHistoryClick() {
|
||||
this.currentView = 'history';
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
async handleClose() {
|
||||
if (this.currentView === 'customize' || this.currentView === 'help' || this.currentView === 'history') {
|
||||
this.currentView = 'main';
|
||||
} else if (this.currentView === 'assistant') {
|
||||
mastermind.stopCapture();
|
||||
|
||||
// Close the session
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('close-session');
|
||||
}
|
||||
this.sessionActive = false;
|
||||
this.currentView = 'main';
|
||||
console.log('Session closed');
|
||||
} else {
|
||||
// Quit the entire application
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('quit-application');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async handleHideToggle() {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('toggle-window-visibility');
|
||||
}
|
||||
}
|
||||
|
||||
// Main view event handlers
|
||||
async handleStart() {
|
||||
// check if api key is empty do nothing
|
||||
const apiKey = await mastermind.storage.getApiKey();
|
||||
if (!apiKey || apiKey === '') {
|
||||
// Trigger the red blink animation on the API key input
|
||||
const mainView = this.shadowRoot.querySelector('main-view');
|
||||
if (mainView && mainView.triggerApiKeyError) {
|
||||
mainView.triggerApiKeyError();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
await mastermind.initializeGemini(this.selectedProfile, this.selectedLanguage);
|
||||
// Pass the screenshot interval as string (including 'manual' option)
|
||||
mastermind.startCapture(this.selectedScreenshotInterval, this.selectedImageQuality);
|
||||
this.responses = [];
|
||||
this.currentResponseIndex = -1;
|
||||
this.startTime = Date.now();
|
||||
this.currentView = 'assistant';
|
||||
}
|
||||
|
||||
async handleAPIKeyHelp() {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('open-external', 'https://cheatingdaddy.com/help/api-key');
|
||||
}
|
||||
}
|
||||
|
||||
// Customize view event handlers
|
||||
async handleProfileChange(profile) {
|
||||
this.selectedProfile = profile;
|
||||
await mastermind.storage.updatePreference('selectedProfile', profile);
|
||||
}
|
||||
|
||||
async handleLanguageChange(language) {
|
||||
this.selectedLanguage = language;
|
||||
await mastermind.storage.updatePreference('selectedLanguage', language);
|
||||
}
|
||||
|
||||
async handleScreenshotIntervalChange(interval) {
|
||||
this.selectedScreenshotInterval = interval;
|
||||
await mastermind.storage.updatePreference('selectedScreenshotInterval', interval);
|
||||
}
|
||||
|
||||
async handleImageQualityChange(quality) {
|
||||
this.selectedImageQuality = quality;
|
||||
await mastermind.storage.updatePreference('selectedImageQuality', quality);
|
||||
}
|
||||
|
||||
handleBackClick() {
|
||||
this.currentView = 'main';
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
// Help view event handlers
|
||||
async handleExternalLinkClick(url) {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('open-external', url);
|
||||
}
|
||||
}
|
||||
|
||||
// Assistant view event handlers
|
||||
async handleSendText(message) {
|
||||
const result = await window.mastermind.sendTextMessage(message);
|
||||
|
||||
if (!result.success) {
|
||||
console.error('Failed to send message:', result.error);
|
||||
this.setStatus('Error sending message: ' + result.error);
|
||||
} else {
|
||||
this.setStatus('Message sent...');
|
||||
this._awaitingNewResponse = true;
|
||||
}
|
||||
}
|
||||
|
||||
handleResponseIndexChanged(e) {
|
||||
this.currentResponseIndex = e.detail.index;
|
||||
this.shouldAnimateResponse = false;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
// Onboarding event handlers
|
||||
handleOnboardingComplete() {
|
||||
this.currentView = 'main';
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
// Only notify main process of view change if the view actually changed
|
||||
if (changedProperties.has('currentView') && window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
ipcRenderer.send('view-changed', this.currentView);
|
||||
|
||||
// Add a small delay to smooth out the transition
|
||||
const viewContainer = this.shadowRoot?.querySelector('.view-container');
|
||||
if (viewContainer) {
|
||||
viewContainer.classList.add('entering');
|
||||
requestAnimationFrame(() => {
|
||||
viewContainer.classList.remove('entering');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (changedProperties.has('layoutMode')) {
|
||||
this.updateLayoutMode();
|
||||
}
|
||||
}
|
||||
|
||||
renderCurrentView() {
|
||||
// Only re-render the view if it hasn't been cached or if critical properties changed
|
||||
const viewKey = `${this.currentView}-${this.selectedProfile}-${this.selectedLanguage}`;
|
||||
|
||||
switch (this.currentView) {
|
||||
case 'onboarding':
|
||||
return html`
|
||||
<onboarding-view .onComplete=${() => this.handleOnboardingComplete()} .onClose=${() => this.handleClose()}></onboarding-view>
|
||||
`;
|
||||
|
||||
case 'main':
|
||||
return html`
|
||||
<main-view
|
||||
.onStart=${() => this.handleStart()}
|
||||
.onAPIKeyHelp=${() => this.handleAPIKeyHelp()}
|
||||
.onLayoutModeChange=${layoutMode => this.handleLayoutModeChange(layoutMode)}
|
||||
></main-view>
|
||||
`;
|
||||
|
||||
case 'customize':
|
||||
return html`
|
||||
<customize-view
|
||||
.selectedProfile=${this.selectedProfile}
|
||||
.selectedLanguage=${this.selectedLanguage}
|
||||
.selectedScreenshotInterval=${this.selectedScreenshotInterval}
|
||||
.selectedImageQuality=${this.selectedImageQuality}
|
||||
.layoutMode=${this.layoutMode}
|
||||
.onProfileChange=${profile => this.handleProfileChange(profile)}
|
||||
.onLanguageChange=${language => this.handleLanguageChange(language)}
|
||||
.onScreenshotIntervalChange=${interval => this.handleScreenshotIntervalChange(interval)}
|
||||
.onImageQualityChange=${quality => this.handleImageQualityChange(quality)}
|
||||
.onLayoutModeChange=${layoutMode => this.handleLayoutModeChange(layoutMode)}
|
||||
></customize-view>
|
||||
`;
|
||||
|
||||
case 'help':
|
||||
return html` <help-view .onExternalLinkClick=${url => this.handleExternalLinkClick(url)}></help-view> `;
|
||||
|
||||
case 'history':
|
||||
return html` <history-view></history-view> `;
|
||||
|
||||
case 'assistant':
|
||||
return html`
|
||||
<assistant-view
|
||||
.responses=${this.responses}
|
||||
.currentResponseIndex=${this.currentResponseIndex}
|
||||
.selectedProfile=${this.selectedProfile}
|
||||
.aiProvider=${this.aiProvider}
|
||||
.onSendText=${message => this.handleSendText(message)}
|
||||
.shouldAnimateResponse=${this.shouldAnimateResponse}
|
||||
@response-index-changed=${this.handleResponseIndexChanged}
|
||||
@response-animation-complete=${() => {
|
||||
this.shouldAnimateResponse = false;
|
||||
this._currentResponseIsComplete = true;
|
||||
console.log('[response-animation-complete] Marked current response as complete');
|
||||
this.requestUpdate();
|
||||
}}
|
||||
></assistant-view>
|
||||
`;
|
||||
|
||||
default:
|
||||
return html`<div>Unknown view: ${this.currentView}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const viewClassMap = {
|
||||
assistant: 'assistant-view',
|
||||
onboarding: 'onboarding-view',
|
||||
customize: 'settings-view',
|
||||
help: 'help-view',
|
||||
history: 'history-view',
|
||||
};
|
||||
const mainContentClass = `main-content ${viewClassMap[this.currentView] || 'with-border'}`;
|
||||
|
||||
return html`
|
||||
<div class="window-container">
|
||||
<div class="container">
|
||||
<app-header
|
||||
.currentView=${this.currentView}
|
||||
.statusText=${this.statusText}
|
||||
.startTime=${this.startTime}
|
||||
.aiProvider=${this.aiProvider}
|
||||
.modelInfo=${this.modelInfo}
|
||||
.onCustomizeClick=${() => this.handleCustomizeClick()}
|
||||
.onHelpClick=${() => this.handleHelpClick()}
|
||||
.onHistoryClick=${() => this.handleHistoryClick()}
|
||||
.onCloseClick=${() => this.handleClose()}
|
||||
.onBackClick=${() => this.handleBackClick()}
|
||||
.onHideToggleClick=${() => this.handleHideToggle()}
|
||||
?isClickThrough=${this._isClickThrough}
|
||||
></app-header>
|
||||
<div class="${mainContentClass}">
|
||||
<div class="view-container">${this.renderCurrentView()}</div>
|
||||
</div>
|
||||
</div>
|
||||
${this.showScreenPicker
|
||||
? html`
|
||||
<screen-picker-dialog
|
||||
?visible=${this.showScreenPicker}
|
||||
.sources=${this.screenSources}
|
||||
@source-selected=${this.handleSourceSelected}
|
||||
@cancelled=${this.handlePickerCancelled}
|
||||
></screen-picker-dialog>
|
||||
`
|
||||
: ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
updateLayoutMode() {
|
||||
// Apply or remove compact layout class to document root
|
||||
if (this.layoutMode === 'compact') {
|
||||
document.documentElement.classList.add('compact-layout');
|
||||
} else {
|
||||
document.documentElement.classList.remove('compact-layout');
|
||||
}
|
||||
}
|
||||
|
||||
async handleLayoutModeChange(layoutMode) {
|
||||
this.layoutMode = layoutMode;
|
||||
await mastermind.storage.updateConfig('layout', layoutMode);
|
||||
this.updateLayoutMode();
|
||||
|
||||
// Notify main process about layout change for window resizing
|
||||
if (window.require) {
|
||||
try {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('update-sizes');
|
||||
} catch (error) {
|
||||
console.error('Failed to update sizes in main process:', error);
|
||||
}
|
||||
}
|
||||
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
async showScreenPickerDialog() {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
const result = await ipcRenderer.invoke('get-screen-sources');
|
||||
|
||||
if (result.success) {
|
||||
this.screenSources = result.sources;
|
||||
this.showScreenPicker = true;
|
||||
return new Promise(resolve => {
|
||||
this._screenPickerResolve = resolve;
|
||||
});
|
||||
} else {
|
||||
console.error('Failed to get screen sources:', result.error);
|
||||
return { cancelled: true };
|
||||
}
|
||||
}
|
||||
|
||||
async handleSourceSelected(event) {
|
||||
const { source } = event.detail;
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
|
||||
// Tell main process which source was selected
|
||||
await ipcRenderer.invoke('set-selected-source', source.id);
|
||||
|
||||
this.showScreenPicker = false;
|
||||
if (this._screenPickerResolve) {
|
||||
this._screenPickerResolve({ source });
|
||||
this._screenPickerResolve = null;
|
||||
}
|
||||
}
|
||||
|
||||
handlePickerCancelled() {
|
||||
this.showScreenPicker = false;
|
||||
if (this._screenPickerResolve) {
|
||||
this._screenPickerResolve({ cancelled: true });
|
||||
this._screenPickerResolve = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mastermind-app', MastermindApp);
|
||||
@@ -1,5 +1,5 @@
|
||||
// Main app components
|
||||
export { MastermindApp } from './app/MastermindApp.js';
|
||||
export { CheatingDaddyApp } from './app/CheatingDaddyApp.js';
|
||||
export { AppHeader } from './app/AppHeader.js';
|
||||
|
||||
// View components
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
import { html, css, LitElement } from '../../assets/lit-core-2.7.4.min.js';
|
||||
import { unifiedPageStyles } from './sharedPageStyles.js';
|
||||
|
||||
export class AICustomizeView extends LitElement {
|
||||
static styles = [
|
||||
unifiedPageStyles,
|
||||
css`
|
||||
.unified-page {
|
||||
height: 100%;
|
||||
}
|
||||
.unified-wrap {
|
||||
height: 100%;
|
||||
}
|
||||
section.surface {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-grid {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-group.vertical {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
textarea.control {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
static properties = {
|
||||
selectedProfile: { type: String },
|
||||
onProfileChange: { type: Function },
|
||||
_context: { state: true },
|
||||
_providerMode: { state: true },
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.selectedProfile = 'interview';
|
||||
this.onProfileChange = () => {};
|
||||
this._context = '';
|
||||
this._providerMode = 'byok';
|
||||
this._loadFromStorage();
|
||||
}
|
||||
|
||||
async _loadFromStorage() {
|
||||
try {
|
||||
const prefs = await cheatingDaddy.storage.getPreferences();
|
||||
this._context = prefs.customPrompt || '';
|
||||
this._providerMode = prefs.providerMode || 'byok';
|
||||
this.requestUpdate();
|
||||
} catch (error) {
|
||||
console.error('Error loading AI customize storage:', error);
|
||||
}
|
||||
}
|
||||
|
||||
_handleProfileChange(e) {
|
||||
this.onProfileChange(e.target.value);
|
||||
}
|
||||
|
||||
async _handleProviderModeChange(e) {
|
||||
this._providerMode = e.target.value;
|
||||
await cheatingDaddy.storage.updatePreference('providerMode', this._providerMode);
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
async _saveContext(val) {
|
||||
this._context = val;
|
||||
await cheatingDaddy.storage.updatePreference('customPrompt', val);
|
||||
}
|
||||
|
||||
_getProfileName(profile) {
|
||||
const names = {
|
||||
interview: 'Job Interview',
|
||||
sales: 'Sales Call',
|
||||
meeting: 'Business Meeting',
|
||||
presentation: 'Presentation',
|
||||
negotiation: 'Negotiation',
|
||||
exam: 'Exam Assistant',
|
||||
};
|
||||
return names[profile] || profile;
|
||||
}
|
||||
|
||||
render() {
|
||||
const profiles = [
|
||||
{ value: 'interview', label: 'Job Interview' },
|
||||
{ value: 'sales', label: 'Sales Call' },
|
||||
{ value: 'meeting', label: 'Business Meeting' },
|
||||
{ value: 'presentation', label: 'Presentation' },
|
||||
{ value: 'negotiation', label: 'Negotiation' },
|
||||
{ value: 'exam', label: 'Exam Assistant' },
|
||||
];
|
||||
|
||||
return html`
|
||||
<div class="unified-page">
|
||||
<div class="unified-wrap">
|
||||
<div>
|
||||
<div class="page-title">AI Context</div>
|
||||
</div>
|
||||
|
||||
<section class="surface">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Regime</label>
|
||||
<select class="control" .value=${this._providerMode} @change=${this._handleProviderModeChange}>
|
||||
<option value="byok">BYOK (API Keys)</option>
|
||||
<option value="local">Local AI (Ollama)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Profile</label>
|
||||
<select class="control" .value=${this.selectedProfile} @change=${this._handleProfileChange}>
|
||||
${profiles.map(profile => html`<option value=${profile.value}>${profile.label}</option>`)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group vertical">
|
||||
<label class="form-label">Custom Instructions</label>
|
||||
<textarea
|
||||
class="control"
|
||||
placeholder="Resume details, role requirements, constraints..."
|
||||
.value=${this._context}
|
||||
@input=${e => this._saveContext(e.target.value)}
|
||||
></textarea>
|
||||
<div class="form-help">Sent as context at session start. Keep it short.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('ai-customize-view', AICustomizeView);
|
||||
File diff suppressed because it is too large
Load Diff
+408
-1489
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,237 @@
|
||||
import { html, css, LitElement } from '../../assets/lit-core-2.7.4.min.js';
|
||||
import { unifiedPageStyles } from './sharedPageStyles.js';
|
||||
|
||||
export class FeedbackView extends LitElement {
|
||||
static styles = [
|
||||
unifiedPageStyles,
|
||||
css`
|
||||
.feedback-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.feedback-input {
|
||||
width: 100%;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
.feedback-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.feedback-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
textarea.feedback-input {
|
||||
min-height: 140px;
|
||||
resize: vertical;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
input.feedback-input {
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.feedback-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.feedback-submit {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--accent);
|
||||
color: var(--btn-primary-text, #fff);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: opacity var(--transition);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.feedback-submit:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.feedback-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.feedback-status {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.feedback-status.success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.feedback-status.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.attach-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.attach-info input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
static properties = {
|
||||
_feedbackText: { state: true },
|
||||
_feedbackEmail: { state: true },
|
||||
_feedbackStatus: { state: true },
|
||||
_feedbackSending: { state: true },
|
||||
_attachInfo: { state: true },
|
||||
_version: { state: true },
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._feedbackText = '';
|
||||
this._feedbackEmail = '';
|
||||
this._feedbackStatus = '';
|
||||
this._feedbackSending = false;
|
||||
this._attachInfo = true;
|
||||
this._version = '';
|
||||
this._loadVersion();
|
||||
}
|
||||
|
||||
async _loadVersion() {
|
||||
try {
|
||||
this._version = await cheatingDaddy.getVersion();
|
||||
this.requestUpdate();
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
_getOS() {
|
||||
const p = navigator.platform || '';
|
||||
if (p.includes('Mac')) return 'macOS';
|
||||
if (p.includes('Win')) return 'Windows';
|
||||
if (p.includes('Linux')) return 'Linux';
|
||||
return p;
|
||||
}
|
||||
|
||||
async _submitFeedback() {
|
||||
const text = this._feedbackText.trim();
|
||||
if (!text || this._feedbackSending) return;
|
||||
|
||||
let content = text;
|
||||
if (this._attachInfo) {
|
||||
content += `\n\nsent from ${this._getOS()} version ${this._version}`;
|
||||
}
|
||||
|
||||
if (content.length > 2000) {
|
||||
this._feedbackStatus = 'error:Max 2000 characters';
|
||||
this.requestUpdate();
|
||||
return;
|
||||
}
|
||||
|
||||
this._feedbackSending = true;
|
||||
this._feedbackStatus = '';
|
||||
this.requestUpdate();
|
||||
|
||||
try {
|
||||
const body = { feedback: content };
|
||||
if (this._feedbackEmail.trim()) {
|
||||
body.email = this._feedbackEmail.trim();
|
||||
}
|
||||
|
||||
const res = await fetch('https://api.cheatingdaddy.com/api/feedback', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
this._feedbackText = '';
|
||||
this._feedbackEmail = '';
|
||||
this._feedbackStatus = 'success:Feedback sent, thank you!';
|
||||
} else if (res.status === 429) {
|
||||
this._feedbackStatus = 'error:Please wait a few minutes before sending again';
|
||||
} else {
|
||||
this._feedbackStatus = 'error:Failed to send feedback';
|
||||
}
|
||||
} catch (e) {
|
||||
this._feedbackStatus = 'error:Could not connect to server';
|
||||
}
|
||||
|
||||
this._feedbackSending = false;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="unified-page">
|
||||
<div class="unified-wrap">
|
||||
<div class="page-title">Feedback</div>
|
||||
|
||||
<section class="surface">
|
||||
<div class="feedback-form">
|
||||
<textarea
|
||||
class="feedback-input"
|
||||
placeholder="Bug reports, feature requests, anything..."
|
||||
.value=${this._feedbackText}
|
||||
@input=${e => { this._feedbackText = e.target.value; }}
|
||||
maxlength="2000"
|
||||
></textarea>
|
||||
<input
|
||||
class="feedback-input"
|
||||
type="email"
|
||||
placeholder="Email (optional)"
|
||||
.value=${this._feedbackEmail}
|
||||
@input=${e => { this._feedbackEmail = e.target.value; }}
|
||||
/>
|
||||
<label class="attach-info">
|
||||
<input
|
||||
type="checkbox"
|
||||
.checked=${this._attachInfo}
|
||||
@change=${e => { this._attachInfo = e.target.checked; }}
|
||||
/>
|
||||
Attach OS and app version
|
||||
</label>
|
||||
<div class="feedback-row">
|
||||
<button
|
||||
class="feedback-submit"
|
||||
@click=${() => this._submitFeedback()}
|
||||
?disabled=${!this._feedbackText.trim() || this._feedbackSending}
|
||||
>
|
||||
${this._feedbackSending ? 'Sending...' : 'Send Feedback'}
|
||||
</button>
|
||||
${this._feedbackStatus ? html`
|
||||
<span class="feedback-status ${this._feedbackStatus.split(':')[0]}">
|
||||
${this._feedbackStatus.split(':').slice(1).join(':')}
|
||||
</span>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('feedback-view', FeedbackView);
|
||||
+115
-454
@@ -1,233 +1,95 @@
|
||||
import { html, css, LitElement } from '../../assets/lit-core-2.7.4.min.js';
|
||||
import { resizeLayout } from '../../utils/windowResize.js';
|
||||
import { unifiedPageStyles } from './sharedPageStyles.js';
|
||||
|
||||
export class HelpView extends LitElement {
|
||||
static styles = css`
|
||||
* {
|
||||
font-family:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
sans-serif;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
static styles = [
|
||||
unifiedPageStyles,
|
||||
css`
|
||||
.shortcut-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.shortcut-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.help-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.shortcut-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.option-group {
|
||||
padding: 16px 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.shortcut-keys {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.option-group:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.key {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 2px 6px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-surface);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.option-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
user-select: text;
|
||||
cursor: text;
|
||||
}
|
||||
.list-item {
|
||||
padding: var(--space-sm);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.45;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.description strong {
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
.link-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--text-color);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-button {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 10px;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition), color var(--transition), background var(--transition);
|
||||
}
|
||||
|
||||
.key {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-weight: 500;
|
||||
margin: 0 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.link-button:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent);
|
||||
background: rgba(63, 125, 229, 0.14);
|
||||
}
|
||||
|
||||
.keyboard-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.shortcut-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.keyboard-group {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.keyboard-group:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.keyboard-group-title {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.shortcut-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.shortcut-description {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.shortcut-keys {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.profiles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.profile-item {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.profile-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.profile-description {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.community-links {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.community-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 3px;
|
||||
color: var(--text-color);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
transition: background 0.1s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.community-link:hover {
|
||||
background: var(--hover-background);
|
||||
}
|
||||
|
||||
.community-link svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.open-logs-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.open-logs-btn:hover {
|
||||
background: var(--hover-background);
|
||||
}
|
||||
|
||||
.usage-steps {
|
||||
counter-reset: step-counter;
|
||||
}
|
||||
|
||||
.usage-step {
|
||||
counter-increment: step-counter;
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.usage-step::before {
|
||||
content: counter(step-counter);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-color);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.usage-step strong {
|
||||
color: var(--text-color);
|
||||
}
|
||||
`;
|
||||
`,
|
||||
];
|
||||
|
||||
static properties = {
|
||||
onExternalLinkClick: { type: Function },
|
||||
@@ -243,7 +105,7 @@ export class HelpView extends LitElement {
|
||||
|
||||
async _loadKeybinds() {
|
||||
try {
|
||||
const keybinds = await mastermind.storage.getKeybinds();
|
||||
const keybinds = await cheatingDaddy.storage.getKeybinds();
|
||||
if (keybinds) {
|
||||
this.keybinds = { ...this.getDefaultKeybinds(), ...keybinds };
|
||||
this.requestUpdate();
|
||||
@@ -253,14 +115,8 @@ export class HelpView extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
// Resize window for this view
|
||||
resizeLayout();
|
||||
}
|
||||
|
||||
getDefaultKeybinds() {
|
||||
const isMac = mastermind.isMacOS || navigator.platform.includes('Mac');
|
||||
const isMac = cheatingDaddy.isMacOS || navigator.platform.includes('Mac');
|
||||
return {
|
||||
moveUp: isMac ? 'Alt+Up' : 'Ctrl+Up',
|
||||
moveDown: isMac ? 'Alt+Down' : 'Ctrl+Down',
|
||||
@@ -276,253 +132,58 @@ export class HelpView extends LitElement {
|
||||
};
|
||||
}
|
||||
|
||||
formatKeybind(keybind) {
|
||||
_formatKeybind(keybind) {
|
||||
return keybind.split('+').map(key => html`<span class="key">${key}</span>`);
|
||||
}
|
||||
|
||||
handleExternalLinkClick(url) {
|
||||
_open(url) {
|
||||
this.onExternalLinkClick(url);
|
||||
}
|
||||
|
||||
render() {
|
||||
const isMacOS = mastermind.isMacOS || false;
|
||||
const isLinux = mastermind.isLinux || false;
|
||||
const shortcutRows = [
|
||||
['Move Window Up', this.keybinds.moveUp],
|
||||
['Move Window Down', this.keybinds.moveDown],
|
||||
['Move Window Left', this.keybinds.moveLeft],
|
||||
['Move Window Right', this.keybinds.moveRight],
|
||||
['Toggle Visibility', this.keybinds.toggleVisibility],
|
||||
['Toggle Click-through', this.keybinds.toggleClickThrough],
|
||||
['Ask Next Step', this.keybinds.nextStep],
|
||||
['Previous Response', this.keybinds.previousResponse],
|
||||
['Next Response', this.keybinds.nextResponse],
|
||||
['Scroll Response Up', this.keybinds.scrollUp],
|
||||
['Scroll Response Down', this.keybinds.scrollDown],
|
||||
];
|
||||
|
||||
return html`
|
||||
<div class="help-container">
|
||||
<div class="option-group">
|
||||
<div class="option-label">
|
||||
<span>Community & Support</span>
|
||||
</div>
|
||||
<div class="community-links">
|
||||
<!-- <div class="community-link" @click=${() => this.handleExternalLinkClick('https://github.com/ShiftyX1/Mastermind')}>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M14 11.9976C14 9.5059 11.683 7 8.85714 7C8.52241 7 7.41904 7.00001 7.14286 7.00001C4.30254 7.00001 2 9.23752 2 11.9976C2 14.376 3.70973 16.3664 6 16.8714C6.36756 16.9525 6.75006 16.9952 7.14286 16.9952"
|
||||
></path>
|
||||
<path
|
||||
d="M10 11.9976C10 14.4893 12.317 16.9952 15.1429 16.9952C15.4776 16.9952 16.581 16.9952 16.8571 16.9952C19.6975 16.9952 22 14.7577 22 11.9976C22 9.6192 20.2903 7.62884 18 7.12383C17.6324 7.04278 17.2499 6.99999 16.8571 6.99999"
|
||||
></path>
|
||||
</svg>
|
||||
Website
|
||||
</div> -->
|
||||
<div class="community-link" @click=${() => this.handleExternalLinkClick('https://github.com/ShiftyX1/Mastermind')}>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268"
|
||||
></path>
|
||||
<path d="M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267"></path>
|
||||
</svg>
|
||||
GitHub
|
||||
</div>
|
||||
<!-- <div class="community-link" @click=${() => this.handleExternalLinkClick('https://discord.gg/GCBdubnXfJ')}>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5.5 16C10.5 18.5 13.5 18.5 18.5 16"></path>
|
||||
<path
|
||||
d="M15.5 17.5L16.5 19.5C16.5 19.5 20.6713 18.1717 22 16C22 15 22.5301 7.85339 19 5.5C17.5 4.5 15 4 15 4L14 6H12"
|
||||
></path>
|
||||
<path
|
||||
d="M8.52832 17.5L7.52832 19.5C7.52832 19.5 3.35699 18.1717 2.02832 16C2.02832 15 1.49823 7.85339 5.02832 5.5C6.52832 4.5 9.02832 4 9.02832 4L10.0283 6H12.0283"
|
||||
></path>
|
||||
<path
|
||||
d="M8.5 14C7.67157 14 7 13.1046 7 12C7 10.8954 7.67157 10 8.5 10C9.32843 10 10 10.8954 10 12C10 13.1046 9.32843 14 8.5 14Z"
|
||||
></path>
|
||||
<path
|
||||
d="M15.5 14C14.6716 14 14 13.1046 14 12C14 10.8954 14.6716 10 15.5 10C16.3284 10 17 10.8954 17 12C17 13.1046 16.3284 14 15.5 14Z"
|
||||
></path>
|
||||
</svg>
|
||||
Discord
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="unified-page">
|
||||
<div class="unified-wrap">
|
||||
<div class="page-title">Help</div>
|
||||
|
||||
<div class="option-group">
|
||||
<div class="option-label">
|
||||
<span>Keyboard Shortcuts</span>
|
||||
</div>
|
||||
<div class="keyboard-section">
|
||||
<div class="keyboard-group">
|
||||
<div class="keyboard-group-title">Window Movement</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Move window up</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.moveUp)}</div>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Move window down</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.moveDown)}</div>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Move window left</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.moveLeft)}</div>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Move window right</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.moveRight)}</div>
|
||||
</div>
|
||||
<section class="surface">
|
||||
<div class="surface-title">Support</div>
|
||||
<div class="link-row">
|
||||
<button class="link-button" @click=${() => this._open('https://cheatingdaddy.com')}>Website</button>
|
||||
<button class="link-button" @click=${() => this._open('https://github.com/sohzm/cheating-daddy')}>GitHub</button>
|
||||
<button class="link-button" @click=${() => this._open('https://discord.gg/GCBdubnXfJ')}>Discord</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="keyboard-group">
|
||||
<div class="keyboard-group-title">Window Control</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Toggle click-through mode</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.toggleClickThrough)}</div>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Toggle window visibility</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.toggleVisibility)}</div>
|
||||
</div>
|
||||
<section class="surface">
|
||||
<div class="surface-title">Keyboard Shortcuts</div>
|
||||
<div class="shortcut-grid">
|
||||
${shortcutRows.map(([label, keys]) => html`
|
||||
<div class="shortcut-row">
|
||||
<span class="shortcut-label">${label}</span>
|
||||
<span class="shortcut-keys">${this._formatKeybind(keys)}</span>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
<div class="keyboard-group">
|
||||
<div class="keyboard-group-title">AI Actions</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Take screenshot and ask for next step</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.nextStep)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-group">
|
||||
<div class="keyboard-group-title">Response Navigation</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Previous response</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.previousResponse)}</div>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Next response</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.nextResponse)}</div>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Scroll response up</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.scrollUp)}</div>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Scroll response down</span>
|
||||
<div class="shortcut-keys">${this.formatKeybind(this.keybinds.scrollDown)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-group">
|
||||
<div class="keyboard-group-title">Text Input</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">Send message to AI</span>
|
||||
<div class="shortcut-keys"><span class="key">Enter</span></div>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-description">New line in text input</span>
|
||||
<div class="shortcut-keys"><span class="key">Shift</span><span class="key">Enter</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description" style="margin-top: 12px; text-align: center;">You can customize these shortcuts in Settings.</div>
|
||||
</div>
|
||||
|
||||
<div class="option-group">
|
||||
<div class="option-label">
|
||||
<span>How to Use</span>
|
||||
</div>
|
||||
<div class="usage-steps">
|
||||
<div class="usage-step"><strong>Start a Session:</strong> Enter your AI Provider API key and click "Start Session"</div>
|
||||
<div class="usage-step"><strong>Customize:</strong> Choose your profile and language in the settings</div>
|
||||
<div class="usage-step">
|
||||
<strong>Position Window:</strong> Use keyboard shortcuts to move the window to your desired location
|
||||
</div>
|
||||
<div class="usage-step">
|
||||
<strong>Click-through Mode:</strong> Use ${this.formatKeybind(this.keybinds.toggleClickThrough)} to make the window
|
||||
click-through
|
||||
</div>
|
||||
<div class="usage-step"><strong>Get AI Help:</strong> The AI will analyze your screen and audio to provide assistance</div>
|
||||
<div class="usage-step"><strong>Text Messages:</strong> Type questions or requests to the AI using the text input</div>
|
||||
<div class="usage-step">
|
||||
<strong>Navigate Responses:</strong> Use ${this.formatKeybind(this.keybinds.previousResponse)} and
|
||||
${this.formatKeybind(this.keybinds.nextResponse)} to browse through AI responses
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option-group">
|
||||
<div class="option-label">
|
||||
<span>Supported Profiles</span>
|
||||
</div>
|
||||
<div class="profiles-grid">
|
||||
<div class="profile-item">
|
||||
<div class="profile-name">Job Interview</div>
|
||||
<div class="profile-description">Get help with interview questions and responses</div>
|
||||
</div>
|
||||
<div class="profile-item">
|
||||
<div class="profile-name">Sales Call</div>
|
||||
<div class="profile-description">Assistance with sales conversations and objection handling</div>
|
||||
</div>
|
||||
<div class="profile-item">
|
||||
<div class="profile-name">Business Meeting</div>
|
||||
<div class="profile-description">Support for professional meetings and discussions</div>
|
||||
</div>
|
||||
<div class="profile-item">
|
||||
<div class="profile-name">Presentation</div>
|
||||
<div class="profile-description">Help with presentations and public speaking</div>
|
||||
</div>
|
||||
<div class="profile-item">
|
||||
<div class="profile-name">Negotiation</div>
|
||||
<div class="profile-description">Guidance for business negotiations and deals</div>
|
||||
</div>
|
||||
<div class="profile-item">
|
||||
<div class="profile-name">Exam Assistant</div>
|
||||
<div class="profile-description">Academic assistance for test-taking and exam questions</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option-group">
|
||||
<div class="option-label">
|
||||
<span>Audio Input</span>
|
||||
</div>
|
||||
<div class="description">The AI listens to conversations and provides contextual assistance based on what it hears.</div>
|
||||
</div>
|
||||
|
||||
<div class="option-group">
|
||||
<div class="option-label">
|
||||
<span>Troubleshooting</span>
|
||||
</div>
|
||||
<div class="description" style="margin-bottom: 12px;">
|
||||
If you're experiencing issues with audio capture or other features, check the application logs for diagnostic information.
|
||||
</div>
|
||||
<button class="open-logs-btn" @click=${this.openLogsFolder}>📁 Open Logs Folder</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async openLogsFolder() {
|
||||
try {
|
||||
const { ipcRenderer } = require('electron');
|
||||
const result = await ipcRenderer.invoke('open-logs-folder');
|
||||
if (!result.success) {
|
||||
console.error('Failed to open logs folder:', result.error);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error opening logs folder:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('help-view', HelpView);
|
||||
|
||||
+382
-520
File diff suppressed because it is too large
Load Diff
+811
-178
File diff suppressed because it is too large
Load Diff
@@ -3,13 +3,7 @@ import { html, css, LitElement } from '../../assets/lit-core-2.7.4.min.js';
|
||||
export class OnboardingView extends LitElement {
|
||||
static styles = css`
|
||||
* {
|
||||
font-family:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif;
|
||||
font-family: var(--font);
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
@@ -27,44 +21,20 @@ export class OnboardingView extends LitElement {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.onboarding-container {
|
||||
position: relative;
|
||||
.onboarding {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0a0a0a;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 10;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.close-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.gradient-canvas {
|
||||
canvas.aurora {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -73,617 +43,308 @@ export class OnboardingView extends LitElement {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
canvas.dither {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 60px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 32px 48px;
|
||||
max-width: 500px;
|
||||
color: #e5e5e5;
|
||||
overflow: hidden;
|
||||
opacity: 0.12;
|
||||
mix-blend-mode: overlay;
|
||||
pointer-events: none;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.slide-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
.slide {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
padding: var(--space-xl);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.slide-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 1.3;
|
||||
color: #111111;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
font-size: 16px;
|
||||
.slide-text {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24px;
|
||||
color: #b8b8b8;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.context-textarea {
|
||||
.context-input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
min-height: 120px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #e5e5e5;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
color: #111111;
|
||||
font-size: 13px;
|
||||
font-family: var(--font);
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.context-textarea::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 14px;
|
||||
.context-input::placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.context-textarea:focus {
|
||||
.context-input:focus {
|
||||
outline: none;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
font-size: 15px;
|
||||
color: #b8b8b8;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 16px;
|
||||
margin-right: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.migration-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.migration-button {
|
||||
flex: 1;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.migration-button.primary {
|
||||
background: rgba(59, 130, 246, 0.8);
|
||||
.btn-primary {
|
||||
background: #111111;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
border-color: rgba(59, 130, 246, 0.9);
|
||||
}
|
||||
|
||||
.migration-button.primary:hover {
|
||||
background: rgba(59, 130, 246, 0.9);
|
||||
border-color: rgba(59, 130, 246, 1);
|
||||
}
|
||||
|
||||
.migration-button.secondary {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #e5e5e5;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.migration-button.secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.migration-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
height: 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #e5e5e5;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
padding: 10px 32px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 36px;
|
||||
min-height: 36px;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
.btn-primary:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.nav-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.nav-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.nav-button:disabled:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.progress-dots {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.2s ease;
|
||||
.btn-back {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888888;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.dot:hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transform: scale(1.2);
|
||||
.btn-back:hover {
|
||||
color: #555555;
|
||||
}
|
||||
`;
|
||||
|
||||
static properties = {
|
||||
currentSlide: { type: Number },
|
||||
contextText: { type: String },
|
||||
hasOldConfig: { type: Boolean },
|
||||
onComplete: { type: Function },
|
||||
onClose: { type: Function },
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.currentSlide = 0;
|
||||
this.contextText = '';
|
||||
this.hasOldConfig = false;
|
||||
this.onComplete = () => {};
|
||||
this.onClose = () => {};
|
||||
this.canvas = null;
|
||||
this.ctx = null;
|
||||
this.animationId = null;
|
||||
|
||||
// Transition properties
|
||||
this.isTransitioning = false;
|
||||
this.transitionStartTime = 0;
|
||||
this.transitionDuration = 800; // 800ms fade duration
|
||||
this.previousColorScheme = null;
|
||||
|
||||
// Subtle dark color schemes for each slide
|
||||
this.colorSchemes = [
|
||||
// Slide 1 - Welcome (Very dark purple/gray)
|
||||
[
|
||||
[25, 25, 35], // Dark gray-purple
|
||||
[20, 20, 30], // Darker gray
|
||||
[30, 25, 40], // Slightly purple
|
||||
[15, 15, 25], // Very dark
|
||||
[35, 30, 45], // Muted purple
|
||||
[10, 10, 20], // Almost black
|
||||
],
|
||||
// Slide 2 - Privacy (Dark blue-gray)
|
||||
[
|
||||
[20, 25, 35], // Dark blue-gray
|
||||
[15, 20, 30], // Darker blue-gray
|
||||
[25, 30, 40], // Slightly blue
|
||||
[10, 15, 25], // Very dark blue
|
||||
[30, 35, 45], // Muted blue
|
||||
[5, 10, 20], // Almost black
|
||||
],
|
||||
// Slide 3 - Context (Dark neutral)
|
||||
[
|
||||
[25, 25, 25], // Neutral dark
|
||||
[20, 20, 20], // Darker neutral
|
||||
[30, 30, 30], // Light dark
|
||||
[15, 15, 15], // Very dark
|
||||
[35, 35, 35], // Lighter dark
|
||||
[10, 10, 10], // Almost black
|
||||
],
|
||||
// Slide 4 - Features (Dark green-gray)
|
||||
[
|
||||
[20, 30, 25], // Dark green-gray
|
||||
[15, 25, 20], // Darker green-gray
|
||||
[25, 35, 30], // Slightly green
|
||||
[10, 20, 15], // Very dark green
|
||||
[30, 40, 35], // Muted green
|
||||
[5, 15, 10], // Almost black
|
||||
],
|
||||
// Slide 5 - Migration (Dark teal-gray)
|
||||
[
|
||||
[20, 30, 30], // Dark teal-gray
|
||||
[15, 25, 25], // Darker teal-gray
|
||||
[25, 35, 35], // Slightly teal
|
||||
[10, 20, 20], // Very dark teal
|
||||
[30, 40, 40], // Muted teal
|
||||
[5, 15, 15], // Almost black
|
||||
],
|
||||
// Slide 6 - Complete (Dark warm gray)
|
||||
[
|
||||
[30, 25, 20], // Dark warm gray
|
||||
[25, 20, 15], // Darker warm
|
||||
[35, 30, 25], // Slightly warm
|
||||
[20, 15, 10], // Very dark warm
|
||||
[40, 35, 30], // Muted warm
|
||||
[15, 10, 5], // Almost black
|
||||
],
|
||||
];
|
||||
this._animId = null;
|
||||
this._time = 0;
|
||||
}
|
||||
|
||||
async firstUpdated() {
|
||||
this.canvas = this.shadowRoot.querySelector('.gradient-canvas');
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.resizeCanvas();
|
||||
this.startGradientAnimation();
|
||||
|
||||
window.addEventListener('resize', () => this.resizeCanvas());
|
||||
|
||||
// Check if old config exists
|
||||
if (window.mastermind && window.mastermind.storage) {
|
||||
try {
|
||||
this.hasOldConfig = await window.mastermind.storage.hasOldConfig();
|
||||
console.log('Has old config:', this.hasOldConfig);
|
||||
this.requestUpdate(); // Force re-render with new hasOldConfig value
|
||||
} catch (error) {
|
||||
console.error('Error checking old config:', error);
|
||||
this.hasOldConfig = false;
|
||||
}
|
||||
}
|
||||
firstUpdated() {
|
||||
this._startAurora();
|
||||
this._drawDither();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
if (this.animationId) {
|
||||
cancelAnimationFrame(this.animationId);
|
||||
if (this._animId) cancelAnimationFrame(this._animId);
|
||||
}
|
||||
|
||||
_drawDither() {
|
||||
const canvas = this.shadowRoot.querySelector('canvas.dither');
|
||||
if (!canvas) return;
|
||||
const blockSize = 5;
|
||||
const cols = Math.ceil(canvas.offsetWidth / blockSize);
|
||||
const rows = Math.ceil(canvas.offsetHeight / blockSize);
|
||||
canvas.width = cols;
|
||||
canvas.height = rows;
|
||||
const ctx = canvas.getContext('2d');
|
||||
const img = ctx.createImageData(cols, rows);
|
||||
for (let i = 0; i < img.data.length; i += 4) {
|
||||
const v = Math.random() > 0.5 ? 255 : 0;
|
||||
img.data[i] = v;
|
||||
img.data[i + 1] = v;
|
||||
img.data[i + 2] = v;
|
||||
img.data[i + 3] = 255;
|
||||
}
|
||||
window.removeEventListener('resize', () => this.resizeCanvas());
|
||||
ctx.putImageData(img, 0, 0);
|
||||
}
|
||||
|
||||
resizeCanvas() {
|
||||
if (!this.canvas) return;
|
||||
_startAurora() {
|
||||
const canvas = this.shadowRoot.querySelector('canvas.aurora');
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const rect = this.getBoundingClientRect();
|
||||
this.canvas.width = rect.width;
|
||||
this.canvas.height = rect.height;
|
||||
}
|
||||
const scale = 0.35;
|
||||
const resize = () => {
|
||||
canvas.width = Math.floor(canvas.offsetWidth * scale);
|
||||
canvas.height = Math.floor(canvas.offsetHeight * scale);
|
||||
};
|
||||
resize();
|
||||
|
||||
startGradientAnimation() {
|
||||
if (!this.ctx) return;
|
||||
const blobs = [
|
||||
{ parts: [
|
||||
{ ox: 0, oy: 0, r: 1.0 },
|
||||
{ ox: 0.22, oy: 0.1, r: 0.85 },
|
||||
{ ox: 0.11, oy: 0.05, r: 0.5 },
|
||||
], color: [180, 200, 230], x: 0.15, y: 0.2, vx: 0.35, vy: 0.25, phase: 0 },
|
||||
|
||||
const animate = timestamp => {
|
||||
this.drawGradient(timestamp);
|
||||
this.animationId = requestAnimationFrame(animate);
|
||||
{ parts: [
|
||||
{ ox: 0, oy: 0, r: 0.95 },
|
||||
{ ox: 0.18, oy: -0.08, r: 0.75 },
|
||||
{ ox: 0.09, oy: -0.04, r: 0.4 },
|
||||
], color: [190, 180, 220], x: 0.75, y: 0.2, vx: -0.3, vy: 0.35, phase: 1.2 },
|
||||
|
||||
{ parts: [
|
||||
{ ox: 0, oy: 0, r: 0.9 },
|
||||
{ ox: 0.24, oy: 0.12, r: 0.9 },
|
||||
{ ox: 0.12, oy: 0.06, r: 0.35 },
|
||||
], color: [210, 195, 215], x: 0.5, y: 0.65, vx: 0.25, vy: -0.3, phase: 2.4 },
|
||||
|
||||
{ parts: [
|
||||
{ ox: 0, oy: 0, r: 0.8 },
|
||||
{ ox: -0.15, oy: 0.18, r: 0.7 },
|
||||
{ ox: -0.07, oy: 0.09, r: 0.45 },
|
||||
], color: [175, 210, 210], x: 0.1, y: 0.75, vx: 0.4, vy: 0.2, phase: 3.6 },
|
||||
|
||||
{ parts: [
|
||||
{ ox: 0, oy: 0, r: 0.75 },
|
||||
{ ox: 0.12, oy: -0.15, r: 0.65 },
|
||||
{ ox: 0.06, oy: -0.07, r: 0.35 },
|
||||
], color: [220, 210, 195], x: 0.85, y: 0.55, vx: -0.28, vy: -0.32, phase: 4.8 },
|
||||
|
||||
{ parts: [
|
||||
{ ox: 0, oy: 0, r: 0.95 },
|
||||
{ ox: -0.2, oy: -0.12, r: 0.75 },
|
||||
{ ox: -0.1, oy: -0.06, r: 0.4 },
|
||||
], color: [170, 190, 225], x: 0.6, y: 0.1, vx: -0.2, vy: 0.38, phase: 6.0 },
|
||||
|
||||
{ parts: [
|
||||
{ ox: 0, oy: 0, r: 0.85 },
|
||||
{ ox: 0.17, oy: 0.15, r: 0.75 },
|
||||
{ ox: 0.08, oy: 0.07, r: 0.35 },
|
||||
], color: [200, 190, 220], x: 0.35, y: 0.4, vx: 0.32, vy: -0.22, phase: 7.2 },
|
||||
|
||||
{ parts: [
|
||||
{ ox: 0, oy: 0, r: 0.75 },
|
||||
{ ox: -0.13, oy: 0.18, r: 0.65 },
|
||||
{ ox: -0.06, oy: 0.1, r: 0.4 },
|
||||
], color: [215, 205, 200], x: 0.9, y: 0.85, vx: -0.35, vy: -0.25, phase: 8.4 },
|
||||
|
||||
{ parts: [
|
||||
{ ox: 0, oy: 0, r: 0.7 },
|
||||
{ ox: 0.16, oy: -0.1, r: 0.6 },
|
||||
{ ox: 0.08, oy: -0.05, r: 0.35 },
|
||||
], color: [185, 210, 205], x: 0.45, y: 0.9, vx: 0.22, vy: -0.4, phase: 9.6 },
|
||||
];
|
||||
|
||||
const baseRadius = 0.32;
|
||||
|
||||
const draw = () => {
|
||||
this._time += 0.012;
|
||||
const w = canvas.width;
|
||||
const h = canvas.height;
|
||||
const dim = Math.min(w, h);
|
||||
|
||||
ctx.fillStyle = '#f0f0f0';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
for (const blob of blobs) {
|
||||
const t = this._time;
|
||||
const cx = (blob.x + Math.sin(t * blob.vx + blob.phase) * 0.22) * w;
|
||||
const cy = (blob.y + Math.cos(t * blob.vy + blob.phase * 0.7) * 0.22) * h;
|
||||
|
||||
for (const part of blob.parts) {
|
||||
const wobble = Math.sin(t * 2.5 + part.ox * 25 + blob.phase) * 0.02;
|
||||
const px = cx + (part.ox + wobble) * dim;
|
||||
const py = cy + (part.oy + wobble * 0.7) * dim;
|
||||
const pr = part.r * baseRadius * dim;
|
||||
|
||||
const grad = ctx.createRadialGradient(px, py, 0, px, py, pr);
|
||||
grad.addColorStop(0, `rgba(${blob.color[0]}, ${blob.color[1]}, ${blob.color[2]}, 0.55)`);
|
||||
grad.addColorStop(0.4, `rgba(${blob.color[0]}, ${blob.color[1]}, ${blob.color[2]}, 0.3)`);
|
||||
grad.addColorStop(0.7, `rgba(${blob.color[0]}, ${blob.color[1]}, ${blob.color[2]}, 0.1)`);
|
||||
grad.addColorStop(1, `rgba(${blob.color[0]}, ${blob.color[1]}, ${blob.color[2]}, 0)`);
|
||||
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
}
|
||||
}
|
||||
|
||||
this._animId = requestAnimationFrame(draw);
|
||||
};
|
||||
|
||||
animate(0);
|
||||
}
|
||||
|
||||
drawGradient(timestamp) {
|
||||
if (!this.ctx || !this.canvas) return;
|
||||
|
||||
const { width, height } = this.canvas;
|
||||
let colors = this.colorSchemes[this.currentSlide];
|
||||
|
||||
// Handle color scheme transitions
|
||||
if (this.isTransitioning && this.previousColorScheme) {
|
||||
const elapsed = timestamp - this.transitionStartTime;
|
||||
const progress = Math.min(elapsed / this.transitionDuration, 1);
|
||||
|
||||
// Use easing function for smoother transition
|
||||
const easedProgress = this.easeInOutCubic(progress);
|
||||
|
||||
colors = this.interpolateColorSchemes(this.previousColorScheme, this.colorSchemes[this.currentSlide], easedProgress);
|
||||
|
||||
// End transition when complete
|
||||
if (progress >= 1) {
|
||||
this.isTransitioning = false;
|
||||
this.previousColorScheme = null;
|
||||
}
|
||||
}
|
||||
|
||||
const time = timestamp * 0.0005; // Much slower animation
|
||||
|
||||
// Create moving gradient with subtle flow
|
||||
const flowX = Math.sin(time * 0.7) * width * 0.3;
|
||||
const flowY = Math.cos(time * 0.5) * height * 0.2;
|
||||
|
||||
const gradient = this.ctx.createLinearGradient(flowX, flowY, width + flowX * 0.5, height + flowY * 0.5);
|
||||
|
||||
// Very subtle color variations with movement
|
||||
colors.forEach((color, index) => {
|
||||
const offset = index / (colors.length - 1);
|
||||
const wave = Math.sin(time + index * 0.3) * 0.05; // Very subtle wave
|
||||
|
||||
const r = Math.max(0, Math.min(255, color[0] + wave * 5));
|
||||
const g = Math.max(0, Math.min(255, color[1] + wave * 5));
|
||||
const b = Math.max(0, Math.min(255, color[2] + wave * 5));
|
||||
|
||||
gradient.addColorStop(offset, `rgb(${r}, ${g}, ${b})`);
|
||||
});
|
||||
|
||||
// Fill with moving gradient
|
||||
this.ctx.fillStyle = gradient;
|
||||
this.ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// Add a second layer with radial gradient for more depth
|
||||
const centerX = width * 0.5 + Math.sin(time * 0.3) * width * 0.15;
|
||||
const centerY = height * 0.5 + Math.cos(time * 0.4) * height * 0.1;
|
||||
const radius = Math.max(width, height) * 0.8;
|
||||
|
||||
const radialGradient = this.ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
|
||||
|
||||
// Very subtle radial overlay
|
||||
radialGradient.addColorStop(0, `rgba(${colors[0][0] + 10}, ${colors[0][1] + 10}, ${colors[0][2] + 10}, 0.1)`);
|
||||
radialGradient.addColorStop(0.5, `rgba(${colors[2][0]}, ${colors[2][1]}, ${colors[2][2]}, 0.05)`);
|
||||
radialGradient.addColorStop(
|
||||
1,
|
||||
`rgba(${colors[colors.length - 1][0]}, ${colors[colors.length - 1][1]}, ${colors[colors.length - 1][2]}, 0.03)`
|
||||
);
|
||||
|
||||
this.ctx.globalCompositeOperation = 'overlay';
|
||||
this.ctx.fillStyle = radialGradient;
|
||||
this.ctx.fillRect(0, 0, width, height);
|
||||
this.ctx.globalCompositeOperation = 'source-over';
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
if (this.currentSlide < 5) {
|
||||
this.startColorTransition(this.currentSlide + 1);
|
||||
} else {
|
||||
this.completeOnboarding();
|
||||
}
|
||||
}
|
||||
|
||||
prevSlide() {
|
||||
if (this.currentSlide > 0) {
|
||||
this.startColorTransition(this.currentSlide - 1);
|
||||
}
|
||||
}
|
||||
|
||||
startColorTransition(newSlide) {
|
||||
this.previousColorScheme = [...this.colorSchemes[this.currentSlide]];
|
||||
this.currentSlide = newSlide;
|
||||
this.isTransitioning = true;
|
||||
this.transitionStartTime = performance.now();
|
||||
}
|
||||
|
||||
// Interpolate between two color schemes
|
||||
interpolateColorSchemes(scheme1, scheme2, progress) {
|
||||
return scheme1.map((color1, index) => {
|
||||
const color2 = scheme2[index];
|
||||
return [
|
||||
color1[0] + (color2[0] - color1[0]) * progress,
|
||||
color1[1] + (color2[1] - color1[1]) * progress,
|
||||
color1[2] + (color2[2] - color1[2]) * progress,
|
||||
];
|
||||
});
|
||||
}
|
||||
|
||||
// Easing function for smooth transitions
|
||||
easeInOutCubic(t) {
|
||||
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
||||
draw();
|
||||
}
|
||||
|
||||
handleContextInput(e) {
|
||||
this.contextText = e.target.value;
|
||||
}
|
||||
|
||||
async handleClose() {
|
||||
if (window.require) {
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
await ipcRenderer.invoke('quit-application');
|
||||
}
|
||||
}
|
||||
|
||||
async handleMigrate() {
|
||||
const success = await window.mastermind.storage.migrateFromOldConfig();
|
||||
if (success) {
|
||||
console.log('Migration completed successfully');
|
||||
}
|
||||
this.nextSlide();
|
||||
}
|
||||
|
||||
async handleSkipMigration() {
|
||||
this.nextSlide();
|
||||
}
|
||||
|
||||
async completeOnboarding() {
|
||||
if (this.contextText.trim()) {
|
||||
await mastermind.storage.updatePreference('customPrompt', this.contextText.trim());
|
||||
await cheatingDaddy.storage.updatePreference('customPrompt', this.contextText.trim());
|
||||
}
|
||||
await mastermind.storage.updateConfig('onboarded', true);
|
||||
await cheatingDaddy.storage.updateConfig('onboarded', true);
|
||||
this.onComplete();
|
||||
}
|
||||
|
||||
getSlideContent() {
|
||||
const slides = [
|
||||
{
|
||||
icon: 'assets/onboarding/welcome.svg',
|
||||
title: 'Welcome to Mastermind',
|
||||
content:
|
||||
'Your AI assistant that listens and watches, then provides intelligent suggestions automatically during interviews, meetings, and presentations.',
|
||||
},
|
||||
{
|
||||
icon: 'assets/onboarding/security.svg',
|
||||
title: 'Completely Private',
|
||||
content: 'Invisible to screen sharing apps and recording software. Your secret advantage stays completely hidden from others.',
|
||||
},
|
||||
{
|
||||
icon: 'assets/onboarding/context.svg',
|
||||
title: 'Add Your Context',
|
||||
content: 'Share relevant information to help the AI provide better, more personalized assistance.',
|
||||
showTextarea: true,
|
||||
},
|
||||
{
|
||||
icon: 'assets/onboarding/customize.svg',
|
||||
title: 'Additional Features',
|
||||
content: '',
|
||||
showFeatures: true,
|
||||
},
|
||||
{
|
||||
icon: 'assets/onboarding/context.svg',
|
||||
title: 'Migrate Settings?',
|
||||
content: this.hasOldConfig
|
||||
? 'Mastermind is a fork of Cheating Daddy. We detected existing Cheating Daddy settings on your system. Would you like to automatically migrate your settings, API keys, and history?'
|
||||
: 'Mastermind is a fork of Cheating Daddy. No previous settings were detected.',
|
||||
showMigration: this.hasOldConfig,
|
||||
},
|
||||
{
|
||||
icon: 'assets/onboarding/ready.svg',
|
||||
title: 'Ready to Go',
|
||||
content: 'Choose your AI Provider and start getting AI-powered assistance in real-time.',
|
||||
},
|
||||
];
|
||||
renderSlide() {
|
||||
if (this.currentSlide === 0) {
|
||||
return html`
|
||||
<div class="slide">
|
||||
<div class="slide-title">Cheating Daddy</div>
|
||||
<div class="slide-text">Real-time AI that listens, watches, and helps during interviews, meetings, and exams.</div>
|
||||
<div class="actions">
|
||||
<button class="btn-primary" @click=${() => { this.currentSlide = 1; }}>Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return slides[this.currentSlide];
|
||||
return html`
|
||||
<div class="slide">
|
||||
<div class="slide-title">Add context</div>
|
||||
<div class="slide-text">Paste your resume or any info the AI should know. You can skip this and add it later.</div>
|
||||
<textarea
|
||||
class="context-input"
|
||||
placeholder="Resume, job description, notes..."
|
||||
.value=${this.contextText}
|
||||
@input=${this.handleContextInput}
|
||||
></textarea>
|
||||
<div class="actions">
|
||||
<button class="btn-primary" @click=${this.completeOnboarding}>Get Started</button>
|
||||
<button class="btn-back" @click=${() => { this.currentSlide = 0; }}>Back</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
const slide = this.getSlideContent();
|
||||
|
||||
return html`
|
||||
<div class="onboarding-container">
|
||||
<button class="close-button" @click=${this.handleClose} title="Close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<canvas class="gradient-canvas"></canvas>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<img class="slide-icon" src="${slide.icon}" alt="${slide.title} icon" />
|
||||
<div class="slide-title">${slide.title}</div>
|
||||
<div class="slide-content">${slide.content}</div>
|
||||
|
||||
${slide.showTextarea
|
||||
? html`
|
||||
<textarea
|
||||
class="context-textarea"
|
||||
placeholder="Paste your resume, job description, or any relevant context here..."
|
||||
.value=${this.contextText}
|
||||
@input=${this.handleContextInput}
|
||||
></textarea>
|
||||
`
|
||||
: ''}
|
||||
${slide.showFeatures
|
||||
? html`
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">-</span>
|
||||
Customize AI behavior and responses
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">-</span>
|
||||
Review conversation history
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">-</span>
|
||||
Adjust capture settings and intervals
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${slide.showMigration
|
||||
? html`
|
||||
<div class="migration-buttons">
|
||||
<button class="migration-button primary" @click=${this.handleMigrate}>
|
||||
Migrate Settings
|
||||
</button>
|
||||
<button class="migration-button secondary" @click=${this.handleSkipMigration}>
|
||||
Start Fresh
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<button class="nav-button" @click=${this.prevSlide} ?disabled=${this.currentSlide === 0}>
|
||||
<svg width="16px" height="16px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 6L9 12L15 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="progress-dots">
|
||||
${[0, 1, 2, 3, 4, 5].map(
|
||||
index => html`
|
||||
<div
|
||||
class="dot ${index === this.currentSlide ? 'active' : ''}"
|
||||
@click=${() => {
|
||||
if (index !== this.currentSlide) {
|
||||
this.startColorTransition(index);
|
||||
}
|
||||
}}
|
||||
></div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button class="nav-button" @click=${this.nextSlide}>
|
||||
${this.currentSlide === 5
|
||||
? 'Get Started'
|
||||
: html`
|
||||
<svg width="16px" height="16px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 6L15 12L9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
`}
|
||||
</button>
|
||||
</div>
|
||||
<div class="onboarding">
|
||||
<canvas class="aurora"></canvas>
|
||||
<canvas class="dither"></canvas>
|
||||
${this.renderSlide()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -1,175 +0,0 @@
|
||||
import { html, css, LitElement } from '../../assets/lit-core-2.7.4.min.js';
|
||||
|
||||
export class ScreenPickerDialog extends LitElement {
|
||||
static properties = {
|
||||
sources: { type: Array },
|
||||
visible: { type: Boolean },
|
||||
};
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 10000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:host([visible]) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
max-width: 800px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 16px 0;
|
||||
color: var(--text-color);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sources-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.source-item {
|
||||
background: var(--input-background);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.source-item:hover {
|
||||
border-color: var(--border-default);
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
.source-item.selected {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
.source-thumbnail {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
background: #1a1a1a;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.source-name {
|
||||
color: var(--text-color);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--button-background);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 8px 16px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
button.primary:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.sources = [];
|
||||
this.visible = false;
|
||||
this.selectedSource = null;
|
||||
}
|
||||
|
||||
selectSource(source) {
|
||||
this.selectedSource = source;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
confirm() {
|
||||
if (this.selectedSource) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('source-selected', {
|
||||
detail: { source: this.selectedSource },
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.dispatchEvent(new CustomEvent('cancelled'));
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="dialog">
|
||||
<h2>Choose screen or window to share</h2>
|
||||
<div class="sources-grid">
|
||||
${this.sources.map(
|
||||
source => html`
|
||||
<div
|
||||
class="source-item ${this.selectedSource?.id === source.id ? 'selected' : ''}"
|
||||
@click=${() => this.selectSource(source)}
|
||||
>
|
||||
<img class="source-thumbnail" src="${source.thumbnail}" alt="${source.name}" />
|
||||
<div class="source-name">${source.name}</div>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button @click=${this.cancel}>Cancel</button>
|
||||
<button class="primary" @click=${this.confirm} ?disabled=${!this.selectedSource}>Share</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('screen-picker-dialog', ScreenPickerDialog);
|
||||
@@ -0,0 +1,172 @@
|
||||
import { css } from '../../assets/lit-core-2.7.4.min.js';
|
||||
|
||||
export const unifiedPageStyles = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font);
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.unified-page {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-lg);
|
||||
background: var(--bg-app);
|
||||
}
|
||||
|
||||
.unified-wrap {
|
||||
width: 100%;
|
||||
max-width: 1160px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.surface {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-surface);
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.surface-title {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.surface-subtitle {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.form-group.vertical {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.control {
|
||||
width: 200px;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 12px;
|
||||
font-size: var(--font-size-sm);
|
||||
transition: border-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.control:hover:not(:focus) {
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.control:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 1px var(--accent);
|
||||
}
|
||||
|
||||
select.control {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b6b6b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 8px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 12px;
|
||||
padding-right: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea.control {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-secondary);
|
||||
padding: 2px 8px;
|
||||
font-size: var(--font-size-xs);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.pill {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 2px 8px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.unified-page {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user