Shifty/Mastermind
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

prettier fix

Browse Source
This commit is contained in:
Илья Глазунов
2026-01-15 23:26:09 +03:00
parent 528dfe01a1
commit 669c019fd8
21 changed files with 4857 additions and 4639 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/AssistantView.js
+54 -26
View File
@@ -9,7 +9,11 @@ export class AssistantView extends LitElement {
}
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
sans-serif;
cursor: default;
}
@@ -51,12 +55,24 @@ export class AssistantView extends LitElement {
font-weight: 600;
}
.response-container h1 { font-size: 1.6em; }
.response-container h2 { font-size: 1.4em; }
.response-container h3 { font-size: 1.2em; }
.response-container h4 { font-size: 1.1em; }
.response-container h5 { font-size: 1em; }
.response-container h6 { font-size: 0.9em; }
.response-container h1 {
font-size: 1.6em;
}
.response-container h2 {
font-size: 1.4em;
}
.response-container h3 {
font-size: 1.2em;
}
.response-container h4 {
font-size: 1.1em;
}
.response-container h5 {
font-size: 1em;
}
.response-container h6 {
font-size: 0.9em;
}
.response-container p {
margin: 0.6em 0;
@@ -268,9 +284,11 @@ export class AssistantView extends LitElement {
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
transition:
opacity 0.15s ease,
visibility 0.15s ease;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 100;
}
@@ -310,7 +328,7 @@ export class AssistantView extends LitElement {
.tooltip-note {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255,255,255,0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0.5;
font-size: 10px;
}
@@ -655,30 +673,40 @@ export class AssistantView extends LitElement {
<div class="capture-buttons">
<button class="region-select-btn" @click=${this.handleRegionSelect} title="Select region to analyze (like Win+Shift+S)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 0 0 2 4.25v2.5A.75.75 0 0 0 3.5 6.75v-2.5a.75.75 0 0 1 .75-.75h2.5A.75.75 0 0 0 6.75 2h-2.5Zm9.5 0a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A2.25 2.25 0 0 0 16.25 2h-2.5ZM3.5 13.25a.75.75 0 0 0-1.5 0v2.5A2.25 2.25 0 0 0 4.25 18h2.5a.75.75 0 0 0 0-1.5h-2.5a.75.75 0 0 1-.75-.75v-2.5Zm13.5 0a.75.75 0 0 0 1.5 0v2.5A2.25 2.25 0 0 1 16.25 18h-2.5a.75.75 0 0 1 0-1.5h2.5a.75.75 0 0 0 .75-.75v-2.5Z" clip-rule="evenodd" />
<path
fill-rule="evenodd"
d="M4.25 2A2.25 2.25 0 0 0 2 4.25v2.5A.75.75 0 0 0 3.5 6.75v-2.5a.75.75 0 0 1 .75-.75h2.5A.75.75 0 0 0 6.75 2h-2.5Zm9.5 0a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A2.25 2.25 0 0 0 16.25 2h-2.5ZM3.5 13.25a.75.75 0 0 0-1.5 0v2.5A2.25 2.25 0 0 0 4.25 18h2.5a.75.75 0 0 0 0-1.5h-2.5a.75.75 0 0 1-.75-.75v-2.5Zm13.5 0a.75.75 0 0 0 1.5 0v2.5A2.25 2.25 0 0 1 16.25 18h-2.5a.75.75 0 0 1 0-1.5h2.5a.75.75 0 0 0 .75-.75v-2.5Z"
clip-rule="evenodd"
/>
</svg>
<span>Select region</span>
</button>
<div class="screen-answer-btn-wrapper">
${this.aiProvider === 'gemini' ? html`
<div class="tooltip">
<div class="tooltip-row">
<span class="tooltip-label">Flash</span>
<span class="tooltip-value">${this.flashCount}/20</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">Flash Lite</span>
<span class="tooltip-value">${this.flashLiteCount}/20</span>
</div>
<div class="tooltip-note">Resets every 24 hours</div>
</div>
` : ''}
${this.aiProvider === 'gemini'
? html`
<div class="tooltip">
<div class="tooltip-row">
<span class="tooltip-label">Flash</span>
<span class="tooltip-value">${this.flashCount}/20</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">Flash Lite</span>
<span class="tooltip-value">${this.flashLiteCount}/20</span>
</div>
<div class="tooltip-note">Resets every 24 hours</div>
</div>
`
: ''}
<button class="screen-answer-btn" @click=${this.handleScreenAnswer}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
<path
d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"
/>
</svg>
<span>Full screen</span>
${this.aiProvider === 'gemini' ? html`<span class="usage-count">(${this.getTotalUsed()}/${this.getTotalAvailable()})</span>` : ''}
${this.aiProvider === 'gemini'
? html`<span class="usage-count">(${this.getTotalUsed()}/${this.getTotalAvailable()})</span>`
: ''}
</button>
</div>
</div>
src/components/views/CustomizeView.js
+258 -192
View File
@@ -4,7 +4,11 @@ import { resizeLayout } from '../../utils/windowResize.js';
export class CustomizeView extends LitElement {
static styles = css`
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
sans-serif;
cursor: default;
user-select: none;
}
@@ -634,31 +638,87 @@ export class CustomizeView extends LitElement {
renderSidebarIcon(icon) {
const icons = {
user: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21V19C19 17.9391 18.5786 16.9217 17.8284 16.1716C17.0783 15.4214 16.0609 15 15 15H9C7.93913 15 6.92172 15.4214 6.17157 16.1716C5.42143 16.9217 5 17.9391 5 19V21"></path>
user: html`<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M19 21V19C19 17.9391 18.5786 16.9217 17.8284 16.1716C17.0783 15.4214 16.0609 15 15 15H9C7.93913 15 6.92172 15.4214 6.17157 16.1716C5.42143 16.9217 5 17.9391 5 19V21"
></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>`,
mic: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
mic: html`<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
<line x1="12" y1="19" x2="12" y2="23"></line>
<line x1="8" y1="23" x2="16" y2="23"></line>
</svg>`,
globe: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
globe: html`<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>`,
display: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
display: html`<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>`,
camera: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
camera: html`<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
<circle cx="12" cy="13" r="4"></circle>
</svg>`,
keyboard: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
keyboard: html`<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
<path d="M6 8h.001"></path>
<path d="M10 8h.001"></path>
@@ -669,11 +729,29 @@ export class CustomizeView extends LitElement {
<path d="M16 12h.001"></path>
<path d="M7 16h10"></path>
</svg>`,
search: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
search: html`<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>`,
cpu: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
cpu: html`<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
<rect x="9" y="9" width="6" height="6"></rect>
<line x1="9" y1="1" x2="9" y2="4"></line>
@@ -685,7 +763,16 @@ export class CustomizeView extends LitElement {
<line x1="1" y1="9" x2="4" y2="9"></line>
<line x1="1" y1="14" x2="4" y2="14"></line>
</svg>`,
warning: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
warning: html`<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
@@ -701,7 +788,7 @@ export class CustomizeView extends LitElement {
cheatingDaddy.storage.getKeybinds(),
cheatingDaddy.storage.getCredentials(),
cheatingDaddy.storage.getOpenAICredentials(),
cheatingDaddy.storage.getOpenAISDKCredentials()
cheatingDaddy.storage.getOpenAISDKCredentials(),
]);
this.googleSearchEnabled = prefs.googleSearchEnabled ?? true;
@@ -711,15 +798,15 @@ export class CustomizeView extends LitElement {
this.customPrompt = prefs.customPrompt ?? '';
this.theme = prefs.theme ?? 'dark';
this.aiProvider = prefs.aiProvider ?? 'gemini';
// Load Gemini API key
this.geminiApiKey = credentials.apiKey ?? '';
// Load OpenAI Realtime credentials
this.openaiApiKey = openaiCreds.apiKey ?? '';
this.openaiBaseUrl = openaiCreds.baseUrl ?? '';
this.openaiModel = openaiCreds.model ?? 'gpt-4o-realtime-preview-2024-12-17';
// Load OpenAI SDK credentials
this.openaiSdkApiKey = openaiSdkCreds.apiKey ?? '';
this.openaiSdkBaseUrl = openaiSdkCreds.baseUrl ?? '';
@@ -1072,21 +1159,21 @@ export class CustomizeView extends LitElement {
async handleOpenAIApiKeyInput(e) {
this.openaiApiKey = e.target.value;
await cheatingDaddy.storage.setOpenAICredentials({
apiKey: e.target.value
apiKey: e.target.value,
});
}
async handleOpenAIBaseUrlInput(e) {
this.openaiBaseUrl = e.target.value;
await cheatingDaddy.storage.setOpenAICredentials({
baseUrl: e.target.value
baseUrl: e.target.value,
});
}
async handleOpenAIModelInput(e) {
this.openaiModel = e.target.value;
await cheatingDaddy.storage.setOpenAICredentials({
model: e.target.value
model: e.target.value,
});
}
@@ -1094,35 +1181,35 @@ export class CustomizeView extends LitElement {
async handleOpenAISdkApiKeyInput(e) {
this.openaiSdkApiKey = e.target.value;
await cheatingDaddy.storage.setOpenAISDKCredentials({
apiKey: e.target.value
apiKey: e.target.value,
});
}
async handleOpenAISdkBaseUrlInput(e) {
this.openaiSdkBaseUrl = e.target.value;
await cheatingDaddy.storage.setOpenAISDKCredentials({
baseUrl: e.target.value
baseUrl: e.target.value,
});
}
async handleOpenAISdkModelInput(e) {
this.openaiSdkModel = e.target.value;
await cheatingDaddy.storage.setOpenAISDKCredentials({
model: e.target.value
model: e.target.value,
});
}
async handleOpenAISdkVisionModelInput(e) {
this.openaiSdkVisionModel = e.target.value;
await cheatingDaddy.storage.setOpenAISDKCredentials({
visionModel: e.target.value
visionModel: e.target.value,
});
}
async handleOpenAISdkWhisperModelInput(e) {
this.openaiSdkWhisperModel = e.target.value;
await cheatingDaddy.storage.setOpenAISDKCredentials({
whisperModel: e.target.value
whisperModel: e.target.value,
});
}
@@ -1209,9 +1296,7 @@ export class CustomizeView extends LitElement {
<select class="form-control" .value=${this.selectedProfile} @change=${this.handleProfileSelect}>
${profiles.map(
profile => html`
<option value=${profile.value} ?selected=${this.selectedProfile === profile.value}>
${profile.name}
</option>
<option value=${profile.value} ?selected=${this.selectedProfile === profile.value}>${profile.name}</option>
`
)}
</select>
@@ -1221,15 +1306,12 @@ export class CustomizeView extends LitElement {
<label class="form-label">Custom AI Instructions</label>
<textarea
class="form-control"
placeholder="Add specific instructions for how you want the AI to behave during ${
profileNames[this.selectedProfile] || 'this interaction'
}..."
placeholder="Add specific instructions for how you want the AI to behave during ${profileNames[this.selectedProfile] ||
'this interaction'}..."
.value=${this.customPrompt}
@input=${this.handleCustomPromptInput}
></textarea>
<div class="form-description">
Personalize the AI's behavior with specific instructions
</div>
<div class="form-description">Personalize the AI's behavior with specific instructions</div>
</div>
</div>
</div>
@@ -1247,9 +1329,7 @@ export class CustomizeView extends LitElement {
<option value="mic_only">Microphone Only (Me)</option>
<option value="both">Both Speaker & Microphone</option>
</select>
<div class="form-description">
Choose which audio sources to capture for the AI.
</div>
<div class="form-description">Choose which audio sources to capture for the AI.</div>
</div>
</div>
`;
@@ -1270,9 +1350,7 @@ export class CustomizeView extends LitElement {
<select class="form-control" .value=${this.selectedLanguage} @change=${this.handleLanguageSelect}>
${languages.map(
language => html`
<option value=${language.value} ?selected=${this.selectedLanguage === language.value}>
${language.name}
</option>
<option value=${language.value} ?selected=${this.selectedLanguage === language.value}>${language.name}</option>
`
)}
</select>
@@ -1295,17 +1373,9 @@ export class CustomizeView extends LitElement {
<span class="current-selection">${currentTheme?.name || 'Dark'}</span>
</label>
<select class="form-control" .value=${this.theme} @change=${this.handleThemeChange}>
${themes.map(
theme => html`
<option value=${theme.value} ?selected=${this.theme === theme.value}>
${theme.name}
</option>
`
)}
${themes.map(theme => html` <option value=${theme.value} ?selected=${this.theme === theme.value}>${theme.name}</option> `)}
</select>
<div class="form-description">
Choose a color theme for the interface
</div>
<div class="form-description">Choose a color theme for the interface</div>
</div>
<div class="form-group">
@@ -1318,10 +1388,7 @@ export class CustomizeView extends LitElement {
<option value="compact" ?selected=${this.layoutMode === 'compact'}>Compact</option>
</select>
<div class="form-description">
${this.layoutMode === 'compact'
? 'Smaller window with reduced padding'
: 'Standard layout with comfortable spacing'
}
${this.layoutMode === 'compact' ? 'Smaller window with reduced padding' : 'Standard layout with comfortable spacing'}
</div>
</div>
@@ -1379,7 +1446,9 @@ export class CustomizeView extends LitElement {
<div class="form-group">
<label class="form-label">
Image Quality
<span class="current-selection">${this.selectedImageQuality.charAt(0).toUpperCase() + this.selectedImageQuality.slice(1)}</span>
<span class="current-selection"
>${this.selectedImageQuality.charAt(0).toUpperCase() + this.selectedImageQuality.slice(1)}</span
>
</label>
<select class="form-control" .value=${this.selectedImageQuality} @change=${this.handleImageQualitySelect}>
<option value="high" ?selected=${this.selectedImageQuality === 'high'}>High Quality</option>
@@ -1391,8 +1460,7 @@ export class CustomizeView extends LitElement {
? 'Best quality, uses more tokens'
: this.selectedImageQuality === 'medium'
? 'Balanced quality and token usage'
: 'Lower quality, uses fewer tokens'
}
: 'Lower quality, uses fewer tokens'}
</div>
</div>
</div>
@@ -1446,9 +1514,9 @@ export class CustomizeView extends LitElement {
renderAIProviderSection() {
const providerNames = {
'gemini': 'Google Gemini',
gemini: 'Google Gemini',
'openai-realtime': 'OpenAI Realtime',
'openai-sdk': 'OpenAI SDK (BotHub, etc.)'
'openai-sdk': 'OpenAI SDK (BotHub, etc.)',
};
return html`
@@ -1464,135 +1532,136 @@ export class CustomizeView extends LitElement {
<option value="openai-realtime" ?selected=${this.aiProvider === 'openai-realtime'}>OpenAI Realtime API</option>
<option value="openai-sdk" ?selected=${this.aiProvider === 'openai-sdk'}>OpenAI SDK (BotHub, Azure, etc.)</option>
</select>
<div class="form-description">
Choose which AI provider to use for conversations and screen analysis
</div>
<div class="form-description">Choose which AI provider to use for conversations and screen analysis</div>
</div>
${this.aiProvider === 'gemini' ? html`
<div class="form-group full-width">
<label class="form-label">Gemini API Key</label>
<input
type="password"
class="form-control"
placeholder="Enter your Gemini API key"
.value=${this.geminiApiKey}
@input=${this.handleGeminiApiKeyInput}
/>
<div class="form-description">
Get your API key from <a href="https://aistudio.google.com/app/apikey" target="_blank" style="color: var(--text-color);">Google AI Studio</a>
</div>
</div>
` : this.aiProvider === 'openai-realtime' ? html`
<div class="form-group full-width">
<label class="form-label">OpenAI API Key</label>
<input
type="password"
class="form-control"
placeholder="Enter your OpenAI API key"
.value=${this.openaiApiKey}
@input=${this.handleOpenAIApiKeyInput}
/>
<div class="form-description">
Get your API key from <a href="https://platform.openai.com/api-keys" target="_blank" style="color: var(--text-color);">OpenAI Platform</a>
</div>
</div>
${this.aiProvider === 'gemini'
? html`
<div class="form-group full-width">
<label class="form-label">Gemini API Key</label>
<input
type="password"
class="form-control"
placeholder="Enter your Gemini API key"
.value=${this.geminiApiKey}
@input=${this.handleGeminiApiKeyInput}
/>
<div class="form-description">
Get your API key from
<a href="https://aistudio.google.com/app/apikey" target="_blank" style="color: var(--text-color);"
>Google AI Studio</a
>
</div>
</div>
`
: this.aiProvider === 'openai-realtime'
? html`
<div class="form-group full-width">
<label class="form-label">OpenAI API Key</label>
<input
type="password"
class="form-control"
placeholder="Enter your OpenAI API key"
.value=${this.openaiApiKey}
@input=${this.handleOpenAIApiKeyInput}
/>
<div class="form-description">
Get your API key from
<a href="https://platform.openai.com/api-keys" target="_blank" style="color: var(--text-color);"
>OpenAI Platform</a
>
</div>
</div>
<div class="form-group full-width">
<label class="form-label">Base URL (Optional)</label>
<input
type="text"
class="form-control"
placeholder="wss://api.openai.com/v1/realtime (leave empty for default)"
.value=${this.openaiBaseUrl}
@input=${this.handleOpenAIBaseUrlInput}
/>
<div class="form-description">
Override the base URL for OpenAI-compatible APIs
</div>
</div>
<div class="form-group full-width">
<label class="form-label">Base URL (Optional)</label>
<input
type="text"
class="form-control"
placeholder="wss://api.openai.com/v1/realtime (leave empty for default)"
.value=${this.openaiBaseUrl}
@input=${this.handleOpenAIBaseUrlInput}
/>
<div class="form-description">Override the base URL for OpenAI-compatible APIs</div>
</div>
<div class="form-group full-width">
<label class="form-label">Model</label>
<input
type="text"
class="form-control"
placeholder="gpt-4o-realtime-preview-2024-12-17"
.value=${this.openaiModel}
@input=${this.handleOpenAIModelInput}
/>
<div class="form-description">
Realtime API model to use
</div>
</div>
` : html`
<div class="form-group full-width">
<label class="form-label">API Key</label>
<input
type="password"
class="form-control"
placeholder="Enter your API key"
.value=${this.openaiSdkApiKey}
@input=${this.handleOpenAISdkApiKeyInput}
/>
<div class="form-description">
API key for your provider (BotHub, Azure, OpenRouter, etc.)
</div>
</div>
<div class="form-group full-width">
<label class="form-label">Model</label>
<input
type="text"
class="form-control"
placeholder="gpt-4o-realtime-preview-2024-12-17"
.value=${this.openaiModel}
@input=${this.handleOpenAIModelInput}
/>
<div class="form-description">Realtime API model to use</div>
</div>
`
: html`
<div class="form-group full-width">
<label class="form-label">API Key</label>
<input
type="password"
class="form-control"
placeholder="Enter your API key"
.value=${this.openaiSdkApiKey}
@input=${this.handleOpenAISdkApiKeyInput}
/>
<div class="form-description">API key for your provider (BotHub, Azure, OpenRouter, etc.)</div>
</div>
<div class="form-group full-width">
<label class="form-label">Base URL</label>
<input
type="text"
class="form-control"
placeholder="https://bothub.chat/api/v2/openai/v1"
.value=${this.openaiSdkBaseUrl}
@input=${this.handleOpenAISdkBaseUrlInput}
/>
<div class="form-description">
API endpoint URL (e.g., https://bothub.chat/api/v2/openai/v1)
</div>
</div>
<div class="form-group full-width">
<label class="form-label">Base URL</label>
<input
type="text"
class="form-control"
placeholder="https://bothub.chat/api/v2/openai/v1"
.value=${this.openaiSdkBaseUrl}
@input=${this.handleOpenAISdkBaseUrlInput}
/>
<div class="form-description">API endpoint URL (e.g., https://bothub.chat/api/v2/openai/v1)</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Chat Model</label>
<input
type="text"
class="form-control"
placeholder="gpt-4o"
.value=${this.openaiSdkModel}
@input=${this.handleOpenAISdkModelInput}
/>
</div>
<div class="form-group">
<label class="form-label">Vision Model</label>
<input
type="text"
class="form-control"
placeholder="gpt-4o"
.value=${this.openaiSdkVisionModel}
@input=${this.handleOpenAISdkVisionModelInput}
/>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Chat Model</label>
<input
type="text"
class="form-control"
placeholder="gpt-4o"
.value=${this.openaiSdkModel}
@input=${this.handleOpenAISdkModelInput}
/>
</div>
<div class="form-group">
<label class="form-label">Vision Model</label>
<input
type="text"
class="form-control"
placeholder="gpt-4o"
.value=${this.openaiSdkVisionModel}
@input=${this.handleOpenAISdkVisionModelInput}
/>
</div>
</div>
<div class="form-group full-width">
<label class="form-label">Whisper Model (Transcription)</label>
<input
type="text"
class="form-control"
placeholder="whisper-1"
.value=${this.openaiSdkWhisperModel}
@input=${this.handleOpenAISdkWhisperModelInput}
/>
<div class="form-description">
Model for audio transcription
</div>
</div>
`}
<div class="form-group full-width">
<label class="form-label">Whisper Model (Transcription)</label>
<input
type="text"
class="form-control"
placeholder="whisper-1"
.value=${this.openaiSdkWhisperModel}
@input=${this.handleOpenAISdkWhisperModelInput}
/>
<div class="form-description">Model for audio transcription</div>
</div>
`}
<div class="form-description full-width" style="margin-top: 12px; padding: 12px; background: var(--bg-secondary); border-left: 2px solid var(--border-default); border-radius: 3px;">
<div
class="form-description full-width"
style="margin-top: 12px; padding: 12px; background: var(--bg-secondary); border-left: 2px solid var(--border-default); border-radius: 3px;"
>
<strong>Note:</strong> You must restart the AI session for provider changes to take effect.
</div>
</div>
@@ -1628,20 +1697,19 @@ export class CustomizeView extends LitElement {
<div class="form-group">
<label class="form-label" style="color: var(--error-color);">Data Management</label>
<div class="form-description" style="margin-bottom: 12px;">
<strong>Warning:</strong> This action will permanently delete all local data including API keys, preferences, and session history. This cannot be undone.
<strong>Warning:</strong> This action will permanently delete all local data including API keys, preferences, and session
history. This cannot be undone.
</div>
<button
class="danger-button"
@click=${this.clearLocalData}
?disabled=${this.isClearing}
>
<button class="danger-button" @click=${this.clearLocalData} ?disabled=${this.isClearing}>
${this.isClearing ? 'Clearing...' : 'Clear All Local Data'}
</button>
${this.clearStatusMessage ? html`
<div class="status-message ${this.clearStatusType === 'success' ? 'status-success' : 'status-error'}">
${this.clearStatusMessage}
</div>
` : ''}
${this.clearStatusMessage
? html`
<div class="status-message ${this.clearStatusType === 'success' ? 'status-success' : 'status-error'}">
${this.clearStatusMessage}
</div>
`
: ''}
</div>
</div>
`;
@@ -1690,9 +1758,7 @@ export class CustomizeView extends LitElement {
`
)}
</nav>
<div class="settings-content">
${this.renderSectionContent()}
</div>
<div class="settings-content">${this.renderSectionContent()}</div>
</div>
`;
}
src/components/views/HelpView.js
+52 -17
View File
@@ -4,7 +4,11 @@ import { resizeLayout } from '../../utils/windowResize.js';
export class HelpView extends LitElement {
static styles = css`
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
sans-serif;
cursor: default;
user-select: none;
}
@@ -292,26 +296,61 @@ export class HelpView extends LitElement {
</div>
<div class="community-links">
<div class="community-link" @click=${() => this.handleExternalLinkClick('https://cheatingdaddy.com')}>
<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
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/sohzm/cheating-daddy')}>
<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>
<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">
<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>
<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>
@@ -395,9 +434,7 @@ export class HelpView extends LitElement {
</div>
</div>
</div>
<div class="description" style="margin-top: 12px; text-align: center;">
You can customize these shortcuts in Settings.
</div>
<div class="description" style="margin-top: 12px; text-align: center;">You can customize these shortcuts in Settings.</div>
</div>
<div class="option-group">
@@ -469,9 +506,7 @@ export class HelpView extends LitElement {
<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>
<button class="open-logs-btn" @click=${this.openLogsFolder}>📁 Open Logs Folder</button>
</div>
</div>
`;
src/components/views/HistoryView.js
+35 -35
View File
@@ -4,7 +4,11 @@ import { resizeLayout } from '../../utils/windowResize.js';
export class HistoryView extends LitElement {
static styles = css`
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
sans-serif;
cursor: default;
user-select: none;
}
@@ -505,18 +509,22 @@ export class HistoryView extends LitElement {
return html`
<div class="session-context">
${profile ? html`
<div class="session-context-row">
<span class="context-label">Profile:</span>
<span class="context-value">${profileNames[profile] || profile}</span>
</div>
` : ''}
${customPrompt ? html`
<div class="session-context-row">
<span class="context-label">Custom Prompt:</span>
<span class="custom-prompt-value">${customPrompt}</span>
</div>
` : ''}
${profile
? html`
<div class="session-context-row">
<span class="context-label">Profile:</span>
<span class="context-value">${profileNames[profile] || profile}</span>
</div>
`
: ''}
${customPrompt
? html`
<div class="session-context-row">
<span class="context-label">Custom Prompt:</span>
<span class="custom-prompt-value">${customPrompt}</span>
</div>
`
: ''}
</div>
`;
}
@@ -559,9 +567,14 @@ export class HistoryView extends LitElement {
return html`<div class="empty-state">No screen analysis data available</div>`;
}
return screenAnalysisHistory.map(analysis => html`
<div class="message screen"><div class="analysis-meta">${this.formatTimestamp(analysis.timestamp)} • ${analysis.model || 'unknown model'}</div>${analysis.response}</div>
`);
return screenAnalysisHistory.map(
analysis => html`
<div class="message screen">
<div class="analysis-meta">${this.formatTimestamp(analysis.timestamp)} • ${analysis.model || 'unknown model'}</div>
${analysis.response}
</div>
`
);
}
renderConversationView() {
@@ -604,22 +617,13 @@ export class HistoryView extends LitElement {
</div>
</div>
<div class="view-tabs">
<button
class="view-tab ${this.activeTab === 'conversation' ? 'active' : ''}"
@click=${() => this.handleTabClick('conversation')}
>
<button class="view-tab ${this.activeTab === 'conversation' ? 'active' : ''}" @click=${() => this.handleTabClick('conversation')}>
Conversation ${hasConversation ? `(${conversationHistory.length})` : ''}
</button>
<button
class="view-tab ${this.activeTab === 'screen' ? 'active' : ''}"
@click=${() => this.handleTabClick('screen')}
>
<button class="view-tab ${this.activeTab === 'screen' ? 'active' : ''}" @click=${() => this.handleTabClick('screen')}>
Screen ${hasScreenAnalysis ? `(${screenAnalysisHistory.length})` : ''}
</button>
<button
class="view-tab ${this.activeTab === 'context' ? 'active' : ''}"
@click=${() => this.handleTabClick('context')}
>
<button class="view-tab ${this.activeTab === 'context' ? 'active' : ''}" @click=${() => this.handleTabClick('context')}>
Context ${hasContext ? '' : '(empty)'}
</button>
</div>
@@ -627,8 +631,8 @@ export class HistoryView extends LitElement {
${this.activeTab === 'conversation'
? this.renderConversationContent()
: this.activeTab === 'screen'
? this.renderScreenAnalysisContent()
: this.renderContextContent()}
? this.renderScreenAnalysisContent()
: this.renderContextContent()}
</div>
`;
}
@@ -638,11 +642,7 @@ export class HistoryView extends LitElement {
return html`<div class="history-container">${this.renderConversationView()}</div>`;
}
return html`
<div class="history-container">
${this.renderSessionsList()}
</div>
`;
return html` <div class="history-container">${this.renderSessionsList()}</div> `;
}
}
src/components/views/MainView.js
+7 -2
View File
@@ -4,7 +4,11 @@ import { resizeLayout } from '../../utils/windowResize.js';
export class MainView extends LitElement {
static styles = css`
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
sans-serif;
cursor: default;
user-select: none;
}
@@ -54,7 +58,8 @@ export class MainView extends LitElement {
}
@keyframes blink-red {
0%, 100% {
0%,
100% {
border-color: var(--border-color);
}
50% {
src/components/views/OnboardingView.js
+3 -1
View File
@@ -512,7 +512,9 @@ export class OnboardingView extends LitElement {
<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" />
<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>