f98919badfWith this change llama.vscode could provide models for VS Code Copilot: 1. Start tools model from llama-vscode (local or external) 2. In VS Code Copilot show the models list -> Other Models -> Manage Models 3. Make the models (all models available by the application serving the tools model are shown) you want to use visible (click on the left of the model name) 4. Select the desired model from Copilot and start using it Not needed tools from Copilot could be unchecked to reduce contex size if local model is used. |
||
|---|---|---|
| .. | ||
| src | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| webpack.config.js | ||
Llama VSCode UI
This is the React UI for the Llama VSCode extension. The application has been refactored to use separate components for different pages instead of having everything in a single App.tsx file.
Component Structure
Main Components
- App.tsx - Main application component that handles view switching and global state
- AgentView.tsx - Main chat interface with AI agent functionality
- AIRunnerView.tsx - Local AI runner interface for model management
- AddEnvView.tsx - Environment configuration interface
Shared Types
- types/vscode.ts - Shared VSCode API declarations and utilities
Architecture
State Management
The application uses React's useState and useEffect hooks for state management. Global state is persisted to VSCode's extension state and restored on application startup.
View Switching
The application uses a simple string-based view system:
agent- Default view showing the main chat interfaceairunner- Local AI runner interfaceaddenv- Environment configuration interface
Component Communication
Components communicate with the VSCode extension through the vscode.postMessage() API and receive messages through the window.addEventListener('message') event listener.
Development
Building
npm run build
Development Server
npm start
File Structure
ui/src/
├── components/
│ ├── AgentView.tsx
│ ├── AIRunnerView.tsx
│ ├── AddEnvView.tsx
│ └── index.ts
├── types/
│ └── vscode.ts
├── App.tsx
├── index.tsx
├── styles.css
└── index.html
Refactoring Notes
The original App.tsx file contained all the UI logic for three different views. This has been refactored into:
- App.tsx - Now serves as a simple view switcher and state manager
- AgentView.tsx - Contains all the chat interface logic including:
- File selection dialog
- Markdown rendering
- Context file management
- Input handling
- AIRunnerView.tsx - Contains the local AI runner interface
- AddEnvView.tsx - Contains the environment configuration interface
All functionality has been preserved and the user experience remains exactly the same.