control.js

/**

 * control.js - UIコントロールとイベント管理

 * 

 * 主な機能:

 * - サイドバーの制御（表示/非表示、リサイズ）

 * - キーボードショートカット

 * - ローカルストレージのクリア

 * - レイアウトの自動調整

 * - モデルリストの更新

 * 

 * 重要な関数:

 * - initSidebarResize(): サイドバーのリサイズ機能を初期化

 * - resizeMain(): メインコンテンツのサイズを調整

 * - updateModelList(): 利用可能なモデルリストを更新

 */

updateHistoryList();
loadFromUserStorage();
setInterval(() => {
    saveToUserStorage();
}, 60000);
// 入力フォームの内容を保存する
document.querySelectorAll('input, textarea').forEach(input => {
    input.addEventListener('input', () => {
        saveToUserStorage();
        if (input.id === "apiKey") {
            updateModelList();
        }
    });
});
// Ctrl+Enterでプロンプト生成を実行する
document.addEventListener('keydown', function (event) {
    if (event.ctrlKey && event.key === 'Enter') {
        event.preventDefault(); // デフォルトの動作を防ぐ
        generatePrompt(); // プロンプト生成関数を呼び出す
    }
});

// サイドバーの切り替え機能を修正
document.getElementById('sidebarToggle').addEventListener('click', function () {
    const sidebarContainer = document.getElementById('sidebar-container');
    const content = document.getElementById('content');
    const isActive = sidebarContainer.classList.toggle('active');
    
    if (isActive) {
        // サイドバーを開く
        sidebarContainer.style.width = '250px';
        content.style.marginLeft = '250px';
    } else {
        // サイドバーを閉じる
        sidebarContainer.style.width = '0';
        content.style.marginLeft = '0';
    }
});

// サイドバーのリサイズ機能を修正
function initSidebarResize() {
    const sidebarContainer = document.getElementById('sidebar-container');
    const content = document.getElementById('content');
    const resizer = document.getElementById('sidebar-resizer');
    let isResizing = false;

    resizer.addEventListener('mousedown', (e) => {
        isResizing = true;
        document.addEventListener('mousemove', resize);
        document.addEventListener('mouseup', stopResize);
    });

    function resize(e) {
        if (!isResizing) return;
        const newWidth = e.clientX;
        const minWidth = 250;
        const maxWidth = 500;
        const sidebarWidth = Math.min(Math.max(minWidth, newWidth), maxWidth);
        
        sidebarContainer.style.width = `${sidebarWidth}px`;
        content.style.marginLeft = `${sidebarWidth}px`;
        sidebarContainer.classList.add('active'); // サイドバーを開いた状態にする
    }

    function stopResize() {
        isResizing = false;
        document.removeEventListener('mousemove', resize);
        document.removeEventListener('mouseup', stopResize);
    }
}

// localStorageをクリアする機能を追加
function initClearStorageButton() {
    const clearStorageButton = document.getElementById('clearStorageButton');
    clearStorageButton.addEventListener('click', () => {
        const userInput = prompt('全てのデータを削除します。よろしければ「YES」と入力してください。');
        if (userInput === 'YES') {
            localStorage.clear();
            alert('全てのデータが削除されました。ページを再読み込みします。');
            location.reload();
        } else {
            alert('削除がキャンセルされました。');
        }
    });
}

function resizeMain() {
    if (window.innerWidth >= 768) {
        document.querySelector("main").style.height = `calc(100vh - ${document.querySelector("main").offsetTop}px)`
    }
}

// DOMContentLoadedイベントリスナーを更新
document.addEventListener('DOMContentLoaded', function () {
    resizeMain();
    initSidebarResize();
    initClearStorageButton();
    updateModelList();
    
    // APIキーの設定状態をチェック
    checkApiKeySettings();
});

window.addEventListener("resize", resizeMain);

async function updateModelList() {
    try {
        const models = await getModelList();
        const endpointSelect = document.getElementById('endpointSelect');
        const currentOptions = Array.from(endpointSelect.options).map(option => option.value);

        models.forEach(model => {
            const modelPath = `models/${model.name.split('/').pop()}`;
            if (!currentOptions.includes(modelPath)) {
                const option = document.createElement('option');
                option.value = modelPath;
                option.textContent = model.name.split('/').pop();
                endpointSelect.appendChild(option);
            }
        });
    } catch (error) {
        console.error('モデルリストの更新中にエラーが発生しました:', error);
    }
    loadFromUserStorage();
}

/**

 * APIキーの設定状態をチェックし、未設定の場合はユーザーに入力を促す

 */
function checkApiKeySettings() {
    const apiKeyInput = document.getElementById('apiKey');
    const sidebarContainer = document.getElementById('sidebar-container');
    const content = document.getElementById('content');
    
    if (!apiKeyInput.value) {
        // サイドバーを開く
        sidebarContainer.style.width = '250px';
        content.style.marginLeft = '250px';
        sidebarContainer.classList.add('active');
        
        // APIキー入力欄を強調表示
        apiKeyInput.classList.add('border', 'border-danger', 'border-3');
        apiKeyInput.focus();
        
        // APIキーが入力されたら強調表示を解除
        apiKeyInput.addEventListener('input', function removeHighlight() {
            if (apiKeyInput.value) {
                apiKeyInput.classList.remove('border', 'border-danger', 'border-3');
                apiKeyInput.removeEventListener('input', removeHighlight);
            }
        });
    }
}