### Install Update: JavaScript

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Installs a downloaded update by quitting the application and initiating the update process. This involves handling confirmation from the user in the renderer process and executing the quit and install command in the main process.

```javascript
// In renderer process
// Typically called after update is fully downloaded
window.ellieAPI.onUpdateDownloaded((event, info) => {
  console.log('Update downloaded:', info.version);

  // Prompt user to install
  const userConfirmed = confirm('Update ready. Restart to install?');
  if (userConfirmed) {
    window.ellieAPI.installUpdate();
  }
});

// Main process handler (src/main.js:286-288)
iacMain.handle('install-update', () => {
  autoUpdater.quitAndInstall();
});
```

--------------------------------

### Install and Run Elliechat-UI Development Dependencies

Source: https://github.com/hoiber/elliechat-ui/blob/main/CLAUDE.md

Commands to install project dependencies and run the application in development mode. This includes setting up the environment for local development and debugging.

```bash
npm install
npm run dev
```

--------------------------------

### Electron Builder Configuration (JSON)

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Configuration for Electron Builder in `package.json` to build installers for multiple platforms (Windows, macOS, Linux). It specifies application details, output directories, file inclusions, compression settings, and platform-specific targets and icons.

```json
// In package.json (lines 39-138)
{
  "build": {
    "appId": "com.elliechat.app",
    "productName": "EllieChat",
    "directories": {
      "output": "dist"
    },
    "files": [
      "src/**/*",
      "assets/**/*",
      "package.json"
    ],
    "compression": "maximum",
    "removePackageScripts": true,
    "asar": true,
    "publish": [
      {
        "provider": "github",
        "owner": "hoiber",
        "repo": "elliechat-ui"
      }
    ],
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": ["x64", "arm64"]
        }
      ],
      "icon": "assets/icon.ico",
      "publisherName": "EllieChat"
    },
    "mac": {
      "target": [
        {
          "target": "dmg",
          "arch": ["x64", "arm64"]
        },
        {
          "target": "zip",
          "arch": ["x64", "arm64"]
        }
      ],
      "icon": "assets/icon.icns",
      "category": "public.app-category.productivity",
      "hardenedRuntime": true,
      "gatekeeperAssess": false
    },
    "linux": {
      "target": [
        {
          "target": "AppImage",
          "arch": ["x64", "arm64"]
        },
        {
          "target": "deb",
          "arch": ["x64", "arm64"]
        }
      ],
      "icon": "assets/icon.png",
      "category": "Utility"
    }
  }
}
```

--------------------------------

### Development and Production Commands (Bash)

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Provides essential npm commands for managing the EllieChat UI project. Includes commands for installing dependencies, running the application in development mode with DevTools enabled, and running in production mode. It also references a flag used to open DevTools.

```bash
# Install dependencies
npm install

# Run in development mode with DevTools
npm run dev

# Run in production mode (no DevTools)
npm start

# The --dev flag is checked in main.js (line 77-79)
# if (process.argv.includes('--dev')) {
#   mainWindow.webContents.openDevTools();
# }
```

--------------------------------

### Regenerate Platform-Specific Icons with npm

Source: https://github.com/hoiber/elliechat-ui/blob/main/assets/README.md

This command regenerates platform-specific icons such as .ico for Windows and .icns for macOS. It is typically run after updating the base icon.png. The process requires Node.js and npm to be installed.

```bash
npm run generate-icons

```

--------------------------------

### Get LibreChat URL - JavaScript

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Retrieves the currently configured LibreChat URL from persistent storage. It defaults to a predefined URL if no custom URL has been set. This API is called from the renderer process and handled in the main process.

```javascript
// In renderer process (after preload.js loads)
const currentUrl = await window.ellieAPI.getLibreChatUrl();
console.log('Current LibreChat URL:', currentUrl);
// Output: "https://elliechat.elab.network" (or custom URL if configured)

// Main process handler (src/main.js:215-217)ipcMain.handle('get-librechat-url', () => {
  return store.get('librechatUrl', DEFAULT_LIBRECHAT_URL);
});
```

--------------------------------

### Release Versioning and Pushing (Bash)

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Commands for updating the project's version number using npm and creating git tags, which typically trigger a CI/CD pipeline for automated releases. It demonstrates how to increment the patch, minor, or major version and push the changes along with tags to the repository.

```bash
# Update version number and create git tag
npm version patch   # 1.0.0 -> 1.0.1
npm version minor   # 1.0.0 -> 1.1.0
npm version major   # 1.0.0 -> 2.0.0

# Push changes and tags to trigger CI/CD
git push && git push --tags

# GitHub Actions will automatically:

```

--------------------------------

### Build and Package Elliechat-UI for Production

Source: https://github.com/hoiber/elliechat-ui/blob/main/CLAUDE.md

Commands for building the Elliechat-UI application for production and for specific platforms. These commands are used to create distributable application packages.

```bash
npm start
npm run build
npm run build:win
npm run build:mac
npm run build:linux
npm run pack
```

--------------------------------

### Manual Build Commands for EllieChat UI

Source: https://github.com/hoiber/elliechat-ui/blob/main/RELEASE.md

Commands to manually build the EllieChat UI project for the current platform or specific target platforms. These are used when the automated release process is not desired or needs to be bypassed.

```bash
# Build for your current platform
npm run build

# Or build for specific platforms
npm run build:win
npm run build:mac
npm run build:linux
```

--------------------------------

### Push Git Tag for Release

Source: https://github.com/hoiber/elliechat-ui/blob/main/RELEASE.md

Commands to push the current branch and all tags to the remote repository. This action typically triggers automated build and release pipelines on platforms like GitHub.

```bash
git push && git push --tags
```

--------------------------------

### Release New Version of Elliechat-UI

Source: https://github.com/hoiber/elliechat-ui/blob/main/CLAUDE.md

Steps to create a new release for the Elliechat-UI application. This involves updating the version number, creating a Git tag, and pushing to GitHub to trigger automated builds and releases.

```bash
# Update version and create tag
npm version patch  # or minor/major

# Push to GitHub (triggers CI build)
git push && git push --tags
```

--------------------------------

### Electron Window Bounds Persistence (JavaScript)

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Saves and restores window position and size using electron-store with debouncing. It retrieves saved bounds on creation, and saves them on resize/move events or before the application quits. The debouncing helps optimize performance by limiting save operations.

```javascript
// Window creation with saved bounds (src/main.js:24-50)
function createWindow() {
  // Retrieve saved window bounds or use defaults
  const windowBounds = store.get('windowBounds', {
    width: 1200,
    height: 800
  });

  mainWindow = new BrowserWindow({
    width: windowBounds.width,
    height: windowBounds.height,
    x: windowBounds.x,
    y: windowBounds.y,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
      webSecurity: true,
      sandbox: true,
      backgroundThrottling: false,
      spellcheck: false
    },
    icon: path.join(__dirname, '../assets/icon.png'),
    show: false,
    backgroundColor: '#ffffff'
  });

  // Save window bounds on resize/move with debouncing
  mainWindow.on('resize', saveWindowBounds);
  mainWindow.on('move', saveWindowBounds);
}

// Debounced save function (src/main.js:82-91)
function saveWindowBounds() {
  if (boundsTimeout) clearTimeout(boundsTimeout);

  boundsTimeout = setTimeout(() => {
    if (mainWindow && !mainWindow.isMaximized() && !mainWindow.isMinimized()) {
      store.set('windowBounds', mainWindow.getBounds());
    }
  }, 500); // Wait 500ms after last resize/move
}

// Save on quit (src/main.js:321-329)
app.on('before-quit', () => {
  if (boundsTimeout) clearTimeout(boundsTimeout);

  if (mainWindow && !mainWindow.isMaximized() && !mainWindow.isMinimized()) {
    store.set('windowBounds', mainWindow.getBounds());
  }
});
```

--------------------------------

### Download Update - JavaScript

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Initiates the background download of an available application update. It also provides a mechanism to listen for download progress updates, reporting percentage, speed, and transferred/total data.

```javascript
// In renderer process
const downloadResult = await window.ellieAPI.downloadUpdate();
console.log('Download started:', downloadResult.success);

// Listen for download progress
window.ellieAPI.onDownloadProgress((event, progressObj) => {
  console.log(`Progress: ${progressObj.percent}%`);
  console.log(`Speed: ${(progressObj.bytesPerSecond / 1024 / 1024).toFixed(2)} MB/s`);
  console.log(`Downloaded: ${(progressObj.transferred / 1024 / 1024).toFixed(2)} MB`);
  console.log(`Total: ${(progressObj.total / 1024 / 1024).toFixed(2)} MB`);
});

// Main process handler (src/main.js:280-283)ipcMain.handle('download-update', () => {
  autoUpdater.downloadUpdate();
  return { success: true };
});
```

--------------------------------

### Auto-Update API

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

APIs for checking and downloading application updates.

```APIDOC
## GET /api/elliechat/updates/check

### Description
Manually triggers an update check and returns information about available updates.

### Method
GET

### Endpoint
/api/elliechat/updates/check

### Parameters
None

### Request Example
```javascript
// In renderer process
const updateResult = await window.ellieAPI.checkForUpdates();

if (updateResult.success) {
  console.log('Available update:', updateResult.updateInfo.version);
  console.log('Release date:', updateResult.updateInfo.releaseDate);
  console.log('Release notes:', updateResult.updateInfo.releaseNotes);
} else {
  console.error('Update check failed:', updateResult.error);
}
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the update check was successful.
- **updateInfo** (object) - Information about the available update.
  - **version** (string) - The version number of the available update.
  - **releaseDate** (string) - The release date of the update.
  - **releaseNotes** (string) - The release notes for the update.

#### Response Example
```json
{
  "success": true,
  "updateInfo": {
    "version": "1.2.0",
    "releaseDate": "2023-10-27",
    "releaseNotes": "Fixed bugs and improved performance."
  }
}
```

#### Error Response (500)
- **success** (boolean) - Always false in case of an error.
- **error** (string) - A message describing the error.

#### Error Response Example
```json
{
  "success": false,
  "error": "Network error while checking for updates."
}
```
```

```APIDOC
## POST /api/elliechat/updates/download

### Description
Initiates the download of an available update in the background. You can listen for download progress events.

### Method
POST

### Endpoint
/api/elliechat/updates/download

### Parameters
None

### Request Example
```javascript
// In renderer process
const downloadResult = await window.ellieAPI.downloadUpdate();
console.log('Download started:', downloadResult.success);

// Listen for download progress
window.ellieAPI.onDownloadProgress((event, progressObj) => {
  console.log(`Progress: ${progressObj.percent}%`);
  console.log(`Speed: ${(progressObj.bytesPerSecond / 1024 / 1024).toFixed(2)} MB/s`);
});
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the download initiation was successful.

#### Response Example
```json
{
  "success": true
}
```

**Note:** This endpoint only initiates the download. Progress and completion events are handled via separate listeners (`window.ellieAPI.onDownloadProgress`).
```

--------------------------------

### URL Dialog Event: JavaScript

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Handles the event to display a URL configuration dialog from the application menu. In the renderer process, it creates and appends a dialog to the DOM. The main process listens for the 'show-url-dialog' event to trigger this display.

```javascript
// In renderer process
window.ellieAPI.onShowUrlDialog(() => {
  // Display custom URL input dialog
  const dialog = document.createElement('div');
  dialog.innerHTML = `
    <div class="url-dialog">
      <h2>Set LibreChat URL</h2>
      <input type="url" id="urlInput" placeholder="https://example.com" />
      <button onclick="saveUrl()">Save</button>
      <button onclick="closeDialog()">Cancel</button>
    </div>
  `;
  document.body.appendChild(dialog);
});

async function saveUrl() {
  const url = document.getElementById('urlInput').value;
  const result = await window.ellieAPI.setLibreChatUrl(url);
  if (result.success) {
    await window.ellieAPI.reloadApp();
  }
}

// Main process trigger (src/main.js:109-113)
{
  label: 'Set LibreChat URL',
  click: async () => {
    mainWindow.webContents.send('show-url-dialog');
  }
}
```

--------------------------------

### Check for Updates - JavaScript

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Manually initiates a check for application updates. It returns details about any available updates, including version, release date, and release notes, or an error message if the check fails.

```javascript
// In renderer process
const updateResult = await window.ellieAPI.checkForUpdates();

if (updateResult.success) {
  console.log('Available update:', updateResult.updateInfo.version);
  console.log('Release date:', updateResult.updateInfo.releaseDate);
  console.log('Release notes:', updateResult.updateInfo.releaseNotes);
} else {
  console.error('Update check failed:', updateResult.error);
}

// Main process handler (src/main.js:269-277)ipcMain.handle('check-for-updates', async () => {
  try {
    const result = await autoUpdater.checkForUpdates();
    hasCheckedForUpdates = true;
    return { success: true, updateInfo: result.updateInfo };
  } catch (error) {
    return { success: false, error: error.message };
  }
});
```

--------------------------------

### Lint and Regenerate Icons for Elliechat-UI

Source: https://github.com/hoiber/elliechat-ui/blob/main/CLAUDE.md

Utilities for maintaining code quality and updating application icons. Linting helps enforce coding standards, while icon regeneration ensures visual assets are up-to-date.

```bash
npm run lint
npm run generate-icons
```

--------------------------------

### Update Project Version using npm

Source: https://github.com/hoiber/elliechat-ui/blob/main/RELEASE.md

Commands to update the version number in package.json for different types of releases (patch, minor, major). These commands are essential for version control and triggering release workflows.

```bash
npm version patch  # For bug fixes (1.0.0 -> 1.0.1)
npm version minor  # For new features (1.0.0 -> 1.1.0)
npm version major  # For breaking changes (1.0.0 -> 2.0.0)
```

--------------------------------

### Keyboard Shortcut Events: JavaScript

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Listens for keyboard shortcuts defined in the application menu to perform specific actions within LibreChat. This includes creating new chats, toggling the sidebar, and scrolling the view to the top or bottom. Event listeners are set up in the renderer process, triggered by commands sent from the main process.

```javascript
// In renderer process
// New Chat shortcut (Cmd/Ctrl+N)
window.ellieAPI.onNewChat(() => {
  // Trigger LibreChat's new chat functionality
  const newChatButton = document.querySelector('[data-testid="new-chat"]');
  if (newChatButton) newChatButton.click();
});

// Toggle Sidebar shortcut (Cmd/Ctrl+Shift+S)
window.ellieAPI.onToggleSidebar(() => {
  const sidebar = document.querySelector('.sidebar');
  if (sidebar) sidebar.classList.toggle('hidden');
});

// Scroll to Top shortcut (Ctrl+U)
window.ellieAPI.onScrollTop(() => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

// Scroll to Bottom shortcut (Ctrl+D)
window.ellieAPI.onScrollBottom(() => {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
});

// Main process menu configuration (src/main.js:140-163)
{
  label: 'Chat',
  submenu: [
    {
      label: 'Toggle Sidebar',
      accelerator: 'CmdOrCtrl+Shift+S',
      click: () => {
        mainWindow.webContents.send('toggle-sidebar');
      }
    },
    {
      label: 'Scroll to Top',
      accelerator: 'Ctrl+U',
      click: () => {
        mainWindow.webContents.send('scroll-top');
      }
    },
    {
      label: 'Scroll to Bottom',
      accelerator: 'Ctrl+D',
      click: () => {
        mainWindow.webContents.send('scroll-bottom');
      }
    }
  ]
}
```

--------------------------------

### Electron External Link Handling (JavaScript)

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Configures the application to open external links in the system's default browser. This prevents external URLs from being opened within the Electron window, enhancing security and user experience. It uses the `shell.openExternal` method.

```javascript
// External link handler (src/main.js:68-71)
mainWindow.webContents.setWindowOpenHandler(({ url }) => {
  shell.openExternal(url);
  return { action: 'deny' };
});

// Example: When LibreChat contains a link to documentation
// <a href="https://docs.librechat.ai" target="_blank">Documentation</a>
// This link will open in the user's default browser, not in the Electron window
```

--------------------------------

### Reload Application - JavaScript

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Reloads the main application window, loading the URL specified in the current configuration. This is typically used after settings such as the LibreChat URL have been modified.

```javascript
// In renderer process
await window.ellieAPI.reloadApp();
console.log('Application reloading...');

// Main process handler (src/main.js:229-232)ipcMain.handle('reload-app', () => {
  const librechatUrl = store.get('librechatUrl', DEFAULT_LIBRECHAT_URL);
  mainWindow.loadURL(librechatUrl);
});
```

--------------------------------

### IPC Communication API

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

APIs for managing the LibreChat URL and reloading the application via Inter-Process Communication (IPC).

```APIDOC
## GET /api/elliechat/url

### Description
Retrieves the currently configured LibreChat URL from persistent storage. Returns the default URL if none has been set.

### Method
GET

### Endpoint
/api/elliechat/url

### Parameters
#### Path Parameters
None

#### Query Parameters
None

### Request Example
```javascript
// In renderer process (after preload.js loads)
const currentUrl = await window.ellieAPI.getLibreChatUrl();
console.log('Current LibreChat URL:', currentUrl);
```

### Response
#### Success Response (200)
- **url** (string) - The configured LibreChat URL.

#### Response Example
```json
{
  "url": "https://elliechat.elab.network"
}
```
```

```APIDOC
## POST /api/elliechat/url

### Description
Updates the LibreChat URL with validation, persisting the new value. Returns an object with success status and an error message if validation fails.

### Method
POST

### Endpoint
/api/elliechat/url

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **url** (string) - Required - The new LibreChat URL to set.

### Request Example
```javascript
// In renderer process
const newUrl = 'http://localhost:3080';
const result = await window.ellieAPI.setLibreChatUrl(newUrl);

if (result.success) {
  console.log('URL updated successfully');
  await window.ellieAPI.reloadApp();
} else {
  console.error('Failed to update URL:', result.error);
}
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the URL was updated successfully.
- **error** (string) - Optional - An error message if the update failed (e.g., 'Invalid URL').

#### Response Example
```json
{
  "success": true
}
```

```json
{
  "success": false,
  "error": "Invalid URL"
}
```
```

```APIDOC
## POST /api/elliechat/reload

### Description
Reloads the main window with the currently configured LibreChat URL. This is useful after changing settings like the server URL.

### Method
POST

### Endpoint
/api/elliechat/reload

### Parameters
None

### Request Example
```javascript
// In renderer process
await window.ellieAPI.reloadApp();
console.log('Application reloading...');
```

### Response
#### Success Response (200)
Indicates the reload command was successfully issued. The actual reload happens asynchronously.

#### Response Example
```json
{
  "message": "Reload command issued."
}
```
```

--------------------------------

### Update Event Listeners: JavaScript

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Listens for various auto-update events to provide feedback to the user. This includes notifications for update availability, progress updates during download, and confirmation of download completion, with corresponding handlers in both renderer and main processes.

```javascript
// In renderer process
// Listen for update availability
window.ellieAPI.onUpdateAvailable((event, info) => {
  console.log('New version available:', info.version);
  console.log('Current version:', info.currentVersion);
  // Show notification to user
  showNotification('Update Available', `Version ${info.version} is ready to download`);
});

// Listen for download progress
window.ellieAPI.onDownloadProgress((event, progressObj) => {
  updateProgressBar(progressObj.percent);
});

// Listen for download completion
window.ellieAPI.onUpdateDownloaded((event, info) => {
  console.log('Update downloaded and ready to install:', info.version);
  showInstallPrompt(info);
});

// Main process events (src/main.js:239-266)
autoUpdater.on('update-available', (info) => {
  console.log('Update available:', info.version);
  if (mainWindow) {
    mainWindow.webContents.send('update-available', info);
  }
});

autoUpdater.on('download-progress', (progressObj) => {
  console.log(`Download progress: ${progressObj.percent}%`);
  if (mainWindow) {
    mainWindow.webContents.send('download-progress', progressObj);
  }
});

autoUpdater.on('update-downloaded', (info) => {
  console.log('Update downloaded:', info.version);
  if (mainWindow) {
    mainWindow.webContents.send('update-downloaded', info);
  }
});
```

--------------------------------

### Set LibreChat URL - JavaScript

Source: https://context7.com/hoiber/elliechat-ui/llms.txt

Updates the LibreChat URL in persistent storage after validating its format. It returns a success status and an error message if validation fails. The application can be reloaded after a successful update.

```javascript
// In renderer process
const newUrl = 'http://localhost:3080';
const result = await window.ellieAPI.setLibreChatUrl(newUrl);

if (result.success) {
  console.log('URL updated successfully');
  await window.ellieAPI.reloadApp();
} else {
  console.error('Failed to update URL:', result.error);
  // Output: "Invalid URL" if URL format is incorrect
}

// Main process handler (src/main.js:219-227)ipcMain.handle('set-librechat-url', (_event, url) => {
  try {
    new URL(url); // Validate URL format
    store.set('librechatUrl', url);
    return { success: true };
  } catch (error) {
    return { success: false, error: 'Invalid URL' };
  }
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.