PyPI - cmdbox - Versions diffs - 0.5.4__py3-none-any.whl → 0.6.0.1__py3-none-any.whl - Mend - Supply Chain Defender

cmdbox 0.5.4py3-none-any.whl → 0.6.0.1py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of cmdbox might be problematic. Click here for more details.

Files changed (148) hide show

cmdbox/web/agent.html ADDED Viewed

@@ -0,0 +1,263 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type="text/css">
+    .card-hover:hover {
+        box-shadow: 0 0 8px gray;
+    }
+    .filer-pane-divider {
+        border: 1px solid var(--bs-border-color-translucent) !important;
+        /**background-color: #F0F0F0 !important;*/
+        border-radius: 1px;
+        /*left: 50%;*/
+    }
+    .chat-container {
+        overflow-y: auto;
+        background-color: var(--bs-body-bg);
+    }
+    .message {
+        padding: 10px;
+        /**border: 1px solid var(--bs-border-color-translucent);*/
+        margin-bottom: 10px;
+        border-radius: 5px;
+        clear: both;
+    }
+    .user-message {
+        background-color: var(--bs-tertiary-bg);
+        color: var(--bs-body-color);
+        /**float: right;*/
+        border-bottom-left-radius: 24px;
+        border-bottom-right-radius: 24px;
+        border-top-left-radius: 24px;
+        border-top-right-radius: 4px;
+    }
+    .bot-message {
+        background-color: var(--bs-body-bg);
+        color: var(--bs-body-color);
+        float: left;
+    }
+    .chat-input {
+        border-radius: 16px;
+        border: 1px solid var(--bs-border-color);
+    }
+    :root {
+        --cmdbox-width: 800px;
+    }
+    pre {
+        width: var(--cmdbox-width);
+        overflow-wrap: break-all;
+    }
+    .btn_hover {
+        border-radius: 24px !important;
+    }
+    .btn_hover:hover {
+        background-color: var(--bs-tertiary-bg) !important;
+    }
+    </style>
+</head>
+<body lang="ja" class="overflow-hidden p-2" style="background-color:rgb(33, 37, 41)">
+    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+        <symbol id="svg_signin_ico" viewBox="0 0 16 16">
+            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
+            <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"></path>
+        </symbol>
+        <symbol id="svg_window_stack" viewBox="0 0 16 16">
+            <path d="M4.5 6a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM6 6a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"/>
+            <path d="M12 1a2 2 0 0 1 2 2 2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2 2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10ZM2 12V5a2 2 0 0 1 2-2h9a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1Zm1-4v5a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8H3Zm12-1V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v2h12Z"/>
+        </symbol>
+        <symbol id="svg_window" viewBox="0 0 16 16">
+            <path d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
+            <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm13 2v2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM2 14a1 1 0 0 1-1-1V6h14v7a1 1 0 0 1-1 1H2z"/>
+        </symbol>
+        <symbol id="btn_x" viewBox="0 0 16 16">
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+        </symbol>
+        <symbol id="btn_chat_text" viewBox="0 0 16 16">
+            <path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105"/>
+            <path d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8m0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5"/>
+        </symbol>
+        <symbol id="btn_plus" viewBox="0 0 16 16">
+            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+        </symbol>
+        <symbol id="btn_send" viewBox="0 0 16 16">
+            <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/>
+        </symbol>
+        <symbol id="svg_justify_left" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5"/>
+        </symbol>
+        <symbol id="btn_three_dots_vertical" viewBox="0 0 16 16">
+            <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+        </symbol>
+    </svg>
+    <!-- ナビゲーションバー -->
+    <nav class="navbar navbar-expand-sm fixed-top p-2">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">cmdbox</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav me-auto">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="viewMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            View
+                        </a>
+                        <ul class="dropdown-menu viewmenu">
+                            <li class="nav-item dropdown">
+                                <span class="dropdown-item">
+                                    Change Dark Mode
+                                    <select class="d-inline-block change_color_mode" onchange="cmdbox.change_color_mode($(this).val());">
+                                        <option value="dark" selected>Dark</option>
+                                        <option value="midnight">midnight</option>
+                                        <option value="deepsea">deepsea</option>
+                                        <option value="verdant">verdant</option>
+                                        <option value="bumblebee">bumblebee</option>
+                                        <option value="crimson">crimson</option>
+                                        <option value="light">light</option>
+                                    </select>
+                                </span>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="aboutMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            About
+                        </a>
+                        <ul class="dropdown-menu aboutmenu" aria-labelledby="aboutMenuLink">
+                            <li><a class="dropdown-item" href="#" onclick="$(`#versions_modal`).modal(`show`);">Versions</a></li>
+                        </ul>
+                    </li>
+                </ul>
+                <div class="d-none dropdown user_info">
+                    <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true" style="fill:gray;">
+                        <svg class="m-1" width="24" height="24" viewBox="0 0 16 16">
+                            <use href="#svg_signin_ico"></use>
+                        </svg>
+                        <span class="username">UserName</span>
+                    </a>
+                    <ul class="dropdown-menu text-small shadow" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end">
+                        <div class="user_info_note ps-3 pe-3"></div>
+                        <li><hr class="dropdown-divider"></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- メインコンテナ -->
+    <div id="main_container" class="container-fluid overflow-auto split-pane fixed-left" style="margin-top:66px;height:calc(100vh - 120px);">
+        <!-- 履歴側ペイン -->
+        <div id="left_container" class="split-pane-component filer-pane-left" style="width:15%;">
+            <div id="newchat_container" class="w-100 d-flex justify-content-center">
+                <button id="btn_newchat" class="btn_hover btn me-3 p-2" type="button" style="border:0px;">
+                    <svg class="bi bi-plus" width="24" height="24" fill="currentColor"><use href="#btn_plus"></use></svg>
+                    <span class="btn_text">New Chat&nbsp;</span>
+                </button>
+            </div>
+            <h6 style="float:left;">
+                Histories
+            </h6>
+            <div id="history_container" class="w-100 d-flex justify-content-center" style="height:calc(100% - 80px);overflow-y:auto;">
+                <div id="histories" class="w-100 p-2">
+                </div>
+            </div>
+        </div>
+        <!-- 左右のスプリッター -->
+        <div class="split-pane-divider filer-pane-divider" style="left:15%;"></div>
+        <!-- チャット側ペイン -->
+        <div id="right_container" class="split-pane-component chat-container " style="left:15%;">
+            <div id="message_container" class="w-100 d-flex justify-content-center" style="height:calc(100% - 80px);overflow-y:auto;">
+                <div id="messages" class="ps-2 pe-2" style="width:var(--cmdbox-width);">
+                </div>
+            </div>
+            <div class="w-100 d-flex justify-content-center">
+                <div class="chat-input mt-2" style="width:800px;">
+                    <div class="chat-group w-100 p-2">
+                        <textarea id="user_msg" class="form-control d-inline-block align-middle" rows="1" style="width:calc(100% - 60px);border:0px;box-shadow:none;resize:none;field-sizing:content;"></textarea>
+                        <button id="btn_user_msg" class="btn btn_hover" type="button" style="border:0px;" disabled="disabled">
+                            <svg class="bi bi-send" width="24" height="24" fill="currentColor"><use href="#btn_send"></use></svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <form id="filter_form" class="d-none filer_form">
+            <input name="filer_host" type="hidden" class="filer_host">
+            <input name="filer_port" type="hidden" class="filer_port">
+            <input name="filer_password" type="hidden" class="filer_password">
+            <input name="filer_svname" type="hidden" class="filer_svname">
+            <input name="filer_scope" type="hidden" class="filer_scope">
+            <input name="filer_client_data" type="hidden" class="filer_client_data">
+        </form>
+    </div>
+    <!-- versionsモーダル -->
+    <div id="versions_modal" class="modal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <form id="version_form" class="modal-content novalidate">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        Versions
+                    </h5>
+                    <button type="button" class="btn btn_window_stack">
+                        <svg width="16" height="16" fill="currentColor" class="bi bi-window-stack">
+                            <use href="#svg_window_stack"></use>
+                        </svg>
+                    </button>
+                    <button type="button" class="btn btn_window">
+                        <svg width="16" height="16" fill="currentColor" class="bi bi-window">
+                            <use href="#svg_window"></use>
+                        </svg>
+                    </button>
+                    <button type="button" class="btn btn_close p-0 m-0" data-bs-dismiss="modal" aria-label="Close" style="margin-left: 0px;">
+                        <svg class="bi bi-x" width="24" height="24" fill="currentColor"><use href="#btn_x"></use></svg>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <ul class="nav nav-tabs version-tabs" role="tablist"></ul>
+                    <div class="tab-content version-content"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <!-- ローディングマスク -->
+    <div id="loading" class="position-absolute top-0 start-0 w-100 h-100 d-none" style="background:rgba(0, 0, 0, 0.3);z-index:10000;">
+        <div class="text-center position-absolute top-50 start-50 w-100 translate-middle">
+            <div class="spinner-border text-light" role="status">
+                <span class="sr-only"></span>
+            </div>
+            <div>
+                <button type="button" class="btn btn-outline-danger mt-3 bbforce">Back by force</button>
+            </div>
+        </div>
+    </div>
+    <!-- フッター -->
+    <footer class="fixed-bottom text-center p-2 copyright"></footer>
+</body>
+<script type="text/javascript">
+    // jqueryの読込み完了までbodyの背景色を設定
+    document.querySelector(`body`).style.setProperty(`--bs-body-bg`, `#212529`);
+    document.querySelector(`body`).style.setProperty(`--bs-tertiary-bg`, `#2b3035`);
+    document.querySelector(`body`).style.setProperty(`--bs-tertiary-bg-rgb`, `43,48,53`);
+    document.querySelector(`body`).style.setProperty(`--bs-secondary-bg`, `#343a40`);
+    document.addEventListener('DOMContentLoaded', () => {
+        document.querySelector(`body`).style.setProperty(`--bs-body-bg`, null);
+        document.querySelector(`body`).style.setProperty(`--bs-tertiary-bg`, null);
+        document.querySelector(`body`).style.setProperty(`--bs-tertiary-bg-rgb`, null);
+        document.querySelector(`body`).style.setProperty(`--bs-secondary-bg`, null);
+    });
+</script>
+<link rel="stylesheet" href="assets/bootstrap/bootstrap.min.5.3.0.css">
+<link rel="stylesheet" href="assets/cmdbox/color_mode.css">
+<link rel="stylesheet" href="assets/split-pane/split-pane.css">
+<script type="text/javascript" src="assets/bootstrap/bootstrap.bundle.min.5.3.0.js"></script>
+<script type="text/javascript" src="assets/jquery/jquery.min.3.2.0.js"></script>
+<script type="text/javascript" src="assets/jquery-ui/jquery-ui.min.js"></script>
+<script type="text/javascript" src="assets/jquery-resizable/jquery-resizable.min.js"></script>
+<script type="text/javascript" src="assets/split-pane/split-pane.js"></script>
+<script type="text/javascript" src="assets/cmdbox/common.js"></script>
+<script type="text/javascript" src="assets/cmdbox/view_result.js"></script>
+<script type="text/javascript" src="assets/cmdbox/agent.js"></script>
+</html>

cmdbox/web/assets/cmdbox/agent.js ADDED Viewed

@@ -0,0 +1,338 @@
+const agent = {};
+agent.chat_reconnectInterval_handler = null;
+agent.chat_callback_ping_handler = null;
+agent.create_user_message = (messages, msg) => {
+    const user_msg_row = $(`<div class="message" style="float:right;"></div>`).appendTo(messages);
+    const user_message = $(`<div class="message user-message d-inline-block" style="width:calc(100% - 48px);"></div>`).appendTo(user_msg_row);
+    $(`<div class="d-inline-block"></div>`).appendTo(user_message).text(msg);
+    $(`<a class="d-inline-block align-top" style="fill:gray;"><svg class="align-top ms-3" width="32" height="32" viewBox="0 0 16 16">`
+        +`<use href="#svg_signin_ico"></use></svg></a>`).appendTo(user_msg_row);
+};
+agent.create_agent_message = (messages, message_id) => {
+    const bot_message = $(`<div class="message bot-message"></div>`).appendTo(messages);
+    $(`<img class="icon-logo align-top me-3" src="${cmdbox.logoicon_src}" width="32" height="32"/>`).appendTo(bot_message);
+    const txt = $(`<div id="${message_id}" class="d-inline-block" style="width:calc(100% - 48px);"></div>`).appendTo(bot_message);
+    return txt;
+}
+agent.format_agent_message = (container, messages, txt, message) => {
+    // メッセージが空の場合は何もしない
+    if (!message || message.length <= 0) return;
+    txt.html('');
+    const regs_start = /```json/s;
+    const regs_json = /```json(?!```)+/s;
+    const regs_end = /```/s;
+    while (message && message.length > 0) {
+        try {
+            // JSON開始部分を探す
+            let start = message.match(regs_start);
+            if (!start || start.length < 0) {
+                // JSON開始部分が無い場合はそのまま表示
+                const msg = message.replace(/\n/g, '<br/>');
+                txt.append(msg);
+                break;
+            }
+            start = message.substring(0, start.index);
+            if (start) txt.append(start.replace(/\n/g, '<br/>'));
+            message = message.replace(start+regs_start.source, '');
+            // JSON内容部分を探す
+            let jbody = message.match(regs_end);
+            if (!jbody || jbody.length < 0) {
+                // JSON内容部分が無い場合はそのまま表示
+                const msg = message.replace(/\n/g, '<br/>');
+                txt.append(msg);
+                break;
+            }
+            jbody = message.substring(0, jbody.index);
+            jobj = eval(`(${jbody})`);
+            message = message.replace(jbody+regs_end.source, '');
+            const rand = cmdbox.random_string(16);
+            txt.append(`<span id="${rand}"/>`);
+            agent.recursive_json_parse(jobj);
+            render_result_func(txt.find(`#${rand}`), jobj, 100);
+        } catch (e) {
+            const msg = message.replace(/\n/g, '<br/>');
+            txt.append(msg);
+            break;
+        }
+    }
+    // メッセージ一覧を一番下までスクロール
+    container.scrollTop(container.prop('scrollHeight'));
+    const msg_width = messages.prop('scrollWidth');
+    if (msg_width > 800) {
+        // メッセージ一覧の幅が800pxを超えたら、メッセージ一覧の幅を調整
+        document.documentElement.style.setProperty('--cmdbox-width', `${msg_width}px`);
+    }
+};
+agent.recursive_json_parse = (jobj) => {
+    Object.keys(jobj).forEach((key) => {
+        if (!jobj[key]) return; // nullやundefinedは無視
+        if (typeof jobj[key] === 'function') {
+            delete jobj[key]; // 関数は削除
+            return;
+        }
+        if (typeof jobj[key] === 'string') {
+            try {
+                const val = eval(`(${jobj[key]})`);
+                if (val && typeof val === 'object' && !Array.isArray(val))
+                    for (const v of Object.values(val))
+                        if (v && typeof v === 'function') return; // 関数は無視
+                else if (val && Array.isArray(val))
+                    for (const v of val)
+                        if (v && typeof v === 'function') return; // 関数は無視
+                jobj[key] = val;
+                agent.recursive_json_parse(jobj[key]);
+            } catch (e) {
+                console.debug(`Fail parsing JSON string: ${jobj[key]}`, e);
+            }
+        }
+        if (typeof jobj[key] === 'object' && !Array.isArray(jobj[key])) {
+            // オブジェクトの場合は再帰的に処理
+            agent.recursive_json_parse(jobj[key]);
+        }
+    });
+};
+agent.init_form = async () => {
+    const container = $('#message_container');
+    const histories = $('#histories');
+    const messages = $('#messages');
+    const ping_interval = 5000; // pingの間隔
+    const max_reconnect_count = 60000/ping_interval*1; // 最大再接続回数
+    agent.chat_reconnect_count = 0;
+    agent.chat = (session_id) => {
+        // ws再接続のためのインターバル初期化
+        if (agent.chat_reconnectInterval_handler) {
+            clearInterval(agent.chat_reconnectInterval_handler);
+        }
+        // wsのpingのためのインターバル初期化
+        if (agent.chat_callback_ping_handler) {
+            clearInterval(agent.chat_callback_ping_handler);
+        }
+        messages.attr('data-session_id', session_id);
+        const btn_user_msg = $('#btn_user_msg');
+        const user_msg = $('#user_msg');
+        let message_id = null;
+        btn_user_msg.prop('disabled', true); // 初期状態で送信ボタンを無効化
+        // 送信ボタンのクリックイベント
+        btn_user_msg.off('click').on('click', async () => {
+            const msg = user_msg.val();
+            if (msg.length <= 0) return;
+            user_msg.val('');
+            // 入力内容をユーザーメッセージとして表示
+            agent.create_user_message(messages, msg);
+            agent.create_history(histories, session_id, msg);
+            // エージェント側のメッセージ読込中を表示
+            if (!message_id) {
+                message_id = cmdbox.random_string(16);
+                const txt = agent.create_agent_message(messages, message_id);
+                cmdbox.show_loading(txt);
+            }
+            // メッセージを送信
+            ws.send(msg);
+            // セッション一覧を再表示
+            agent.list_sessions();
+            // メッセージ一覧を一番下までスクロール
+            container.scrollTop(container.prop('scrollHeight'));
+        });
+        // ws接続
+        const protocol = window.location.protocol.endsWith('s:') ? 'wss' : 'ws';
+        const host = window.location.hostname;
+        const port = window.location.port;
+        const path = window.location.pathname;
+        const ws = new WebSocket(`${protocol}://${host}:${port}${path}/chat/ws/${session_id}`);
+        // エージェントからのメッセージ受信時の処理
+        ws.onmessage = (event) => {
+            const packet = JSON.parse(event.data);
+            console.log(packet);
+            if (packet.turn_complete && packet.turn_complete) {
+                return;
+            }
+            let txt;
+            if (!message_id) {
+                // エージェント側の表示枠が無かったら追加
+                message_id = cmdbox.random_string(16);
+                txt = agent.create_agent_message(messages, message_id);
+            } else {
+                txt = $(`#${message_id}`);
+            }
+            txt.html('');
+            message_id = null;
+            agent.format_agent_message(container, messages, txt, packet.message);
+        };
+        ws.onopen = () => {
+            const ping = () => {
+                ws.send('ping');
+                agent.chat_reconnect_count = 0; // pingが成功したら再接続回数をリセット
+            };
+            btn_user_msg.prop('disabled', false);
+            agent.chat_callback_ping_handler = setInterval(() => {ping();}, ping_interval);
+        };
+        ws.onerror = (e) => {
+            console.error(`Websocket error: ${e}`);
+            clearInterval(agent.chat_callback_ping_handler);
+        };
+        ws.onclose = () => {
+            clearInterval(agent.chat_callback_ping_handler);
+            if (agent.chat_reconnect_count >= max_reconnect_count) {
+                clearInterval(agent.chat_reconnectInterval_handler);
+                cmdbox.message({'error':'Connection to the agent has failed for several minutes. Please reload to resume reconnection.'});
+                const rand = cmdbox.random_string(8);
+                location.href = `../signin/agent?r=${rand}`;
+                return;
+            }
+            agent.chat_reconnect_count++;
+            agent.chat_reconnectInterval_handler = setInterval(() => {
+                agent.chat(session_id);
+            }, ping_interval);
+        };
+    };
+    const user_msg = $('#user_msg');
+    user_msg.off('keydown').on('keydown', (e) => {
+        // Ctrl+Enterで送信
+        if (e.key === 'Enter' && e.ctrlKey) {
+            e.preventDefault();
+            $('#btn_user_msg').click();
+            container.css('height', `calc(100% - ${user_msg.prop('scrollHeight')}px - 42px)`);
+            return
+        }
+    });
+    user_msg.off('input').on('input', (e) => {
+        // テキストエリアのリサイズに合わせてメッセージ一覧の高さを調整
+        container.css('height', `calc(100% - ${user_msg.prop('scrollHeight')}px - 42px)`);
+    });
+    const btn_newchat = $('#btn_newchat');
+    btn_newchat.off('click').on('click', async () => {
+        // メッセージ一覧をクリア
+        messages.html('');
+        // 新しいセッションを作成
+        const session_id = cmdbox.random_string(16);
+        agent.chat(session_id);
+    });
+    // テキストエリアのリサイズに合わせてメッセージ一覧の高さを調整
+    container.scrollTop(container.prop('scrollHeight'));
+    // セッション一覧を表示
+    agent.list_sessions();
+    // 新しいセッションでチャットを開始
+    const session_id = cmdbox.random_string(16);
+    agent.chat(session_id);
+};
+agent.list_sessions = async (session_id) => {
+    const formData = new FormData();
+    session_id && formData.append('session_id', session_id);
+    const histories = $('#histories');
+    const res = await fetch('agent/session/list', {method: 'POST', body: formData});
+    if (res.status != 200) cmdbox.message({'error':`${res.status}: ${res.statusText}`});
+    res.json().then((res) => {
+        if (!res['success']) return;
+        histories.html('');
+        res['success'].forEach(async (row) => {
+            if (!row['events'] || row['events'].length <= 0) return;
+            const msg = row['events'][0]['text'];
+            const history = agent.create_history(histories, row['id'], msg);
+        });
+    });
+}
+agent.create_history = (histories, session_id, msg) => {
+    if (histories.find(`#${session_id}`).length > 0) return;
+    msg = cell_chop(msg, 300);
+    const history = $(`<a id="${session_id}" href="#" class="history pt-2 pb-1 d-block btn_hover"></a>`).appendTo(histories);
+    $(`<span class="d-inline-block align-top ms-2 me-2" style="fill:gray;"><svg class="align-top" width="24" height="24" viewBox="0 0 16 16">`
+        +`<use href="#svg_justify_left"></use></svg></span>`).appendTo(history);
+    $(`<div class="d-inline-block mb-2" style="width:calc(100% - 88px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></div>`).appendTo(history).text(msg);
+    const btn = $(`<button class="btn d-inline-block align-top pt-1 btn_hover" style="fill:gray;"><svg class="align-top" width="16" height="16" viewBox="0 0 16 16">`
+        +`<use href="#btn_three_dots_vertical"></use></svg><ul class="dropdown-menu"/></button>`).appendTo(history);
+    btn.find('.dropdown-menu').append(`<li><a class="dropdown-item delete" href="#">Delete</a></li>`);
+    btn.off('click').on('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        histories.find('.dropdown-menu').hide();
+        btn.find('.dropdown-menu').css('left','calc(100% - 180px)').show();
+    });
+    btn.find('.dropdown-menu .delete').off('click').on('click',(e)=>{
+        if (!window.confirm('Are you sure you want to delete this session?')) return;
+        // セッション削除ボタンのクリックイベント
+        e.preventDefault();
+        e.stopPropagation();
+        agent.delete_session(session_id).then((res) => {
+            if (res['success']) {
+                history.remove();
+                const sid = messages.attr('data-session_id');
+                if (sid == session_id) {
+                    // 削除したセッションが現在のセッションだった場合は、メッセージ一覧をクリア
+                    messages.html('');
+                    agent.chat(cmdbox.random_string(16)); // 新しいセッションを開始
+                }
+                agent.list_sessions();
+            } else {
+                cmdbox.message({'error':res['error'] || 'Failed to delete session.'});
+            }
+        });
+    });
+    history.off('click').on('click', async (e) => {
+        // セッションを選択したときの処理
+        e.preventDefault();
+        agent.chat(session_id);
+        const formData = new FormData();
+        formData.append('session_id', session_id);
+        const res = await fetch('agent/session/list', {method: 'POST', body: formData});
+        if (res.status != 200) cmdbox.message({'error':`${res.status}: ${res.statusText}`});
+        res.json().then((res) => {
+            if (!res['success'] || res['success'].length<=0) {
+                cmdbox.message({'error':'No messages found for this session.'});
+                return;
+            }
+            const session = res['success'][0];
+            if (!session['events'] || session['events'].length <= 0) {
+                cmdbox.message({'error':'No messages found for this session.'});
+                return;
+            }
+            const container = $('#message_container');
+            const messages = $('#messages');
+            messages.html('');
+            session['events'].forEach((event) => {
+                if (!event['text'] || event['text'].length <= 0) return;
+                if (event['author'] == 'user') {
+                    // ユーザーメッセージ
+                    agent.create_user_message(messages, event['text']);
+                } else {
+                    // エージェントメッセージ
+                    txt = agent.create_agent_message(messages, cmdbox.random_string(16));
+                    agent.format_agent_message(container, messages, txt, event['text']);
+                }
+            });
+        });
+    });
+    return history;
+};
+agent.delete_session = async (session_id) => {
+    const formData = new FormData();
+    formData.append('session_id', session_id);
+    const res = await fetch('agent/session/delete', {method: 'POST', body: formData});
+    if (res.status != 200) cmdbox.message({'error':`${res.status}: ${res.statusText}`});
+    return await res.json();
+}
+$(() => {
+  // カラーモード対応
+  cmdbox.change_color_mode();
+  // スプリッター初期化
+  $('.split-pane').splitPane();
+  // アイコンを表示
+  cmdbox.set_logoicon('.navbar-brand');
+  // copyright表示
+  cmdbox.copyright();
+  // バージョン情報モーダル初期化
+  cmdbox.init_version_modal();
+  // モーダルボタン初期化
+  cmdbox.init_modal_button();
+  // コマンド実行用のオプション取得
+  cmdbox.get_server_opt(true, $('.filer_form')).then(async (opt) => {
+    agent.init_form();
+  });
+  // dropdownメニューを閉じる
+  const histories = $('#histories');
+  $(document).on('click', (e) => {
+    histories.find('.dropdown-menu').hide();
+  }).on('contextmenu', (e) => {
+    histories.find('.dropdown-menu').hide();
+  });
+});