1+ import * as vscode from 'vscode' ;
2+ import { callDeepSeekApi } from './deepseekApi' ;
3+
4+ export class ChatPanel {
5+ private static readonly viewType = 'chatPanel' ;
6+ private static currentPanel : ChatPanel | undefined ;
7+ private readonly _panel : vscode . WebviewPanel ;
8+ private _disposables : vscode . Disposable [ ] = [ ] ;
9+ private _conversation : { role : string , content : string } [ ] = [ ] ;
10+
11+ private constructor ( panel : vscode . WebviewPanel ) {
12+ this . _panel = panel ;
13+ this . _panel . onDidDispose ( ( ) => this . dispose ( ) , null , this . _disposables ) ;
14+ this . _panel . webview . html = this . _getHtmlForWebview ( ) ;
15+ this . _panel . webview . onDidReceiveMessage ( this . _handleMessage , this , this . _disposables ) ;
16+ }
17+
18+ public static createOrShow ( ) {
19+ const column = vscode . window . activeTextEditor
20+ ? vscode . window . activeTextEditor . viewColumn
21+ : undefined ;
22+
23+ if ( ChatPanel . currentPanel ) {
24+ ChatPanel . currentPanel . _panel . reveal ( column ) ;
25+ return ;
26+ }
27+
28+ const panel = vscode . window . createWebviewPanel (
29+ ChatPanel . viewType ,
30+ 'Chat with Model' ,
31+ column || vscode . ViewColumn . One ,
32+ {
33+ enableScripts : true ,
34+ retainContextWhenHidden : true ,
35+ }
36+ ) ;
37+
38+ ChatPanel . currentPanel = new ChatPanel ( panel ) ;
39+ }
40+
41+ private _getHtmlForWebview ( ) {
42+ return `
43+ <!DOCTYPE html>
44+ <html lang="en">
45+ <head>
46+ <meta charset="UTF-8">
47+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
48+ <title>Chat with Model</title>
49+ <style>
50+ .user { color: blue; }
51+ .model { color: green; }
52+ </style>
53+ </head>
54+ <body>
55+ <div id="chat"></div>
56+ <input type="text" id="input" placeholder="Type your message here..." />
57+ <button id="reset">Reset</button>
58+ <script>
59+ const vscode = acquireVsCodeApi();
60+ const chat = document.getElementById('chat');
61+ const input = document.getElementById('input');
62+ const reset = document.getElementById('reset');
63+
64+ input.addEventListener('keydown', (event) => {
65+ if (event.key === 'Enter') {
66+ vscode.postMessage({
67+ command: 'sendMessage',
68+ text: input.value
69+ });
70+ input.value = '';
71+ }
72+ });
73+
74+ reset.addEventListener('click', () => {
75+ vscode.postMessage({
76+ command: 'reset'
77+ });
78+ });
79+
80+ window.addEventListener('message', (event) => {
81+ const { role, content } = event.data;
82+ const div = document.createElement('div');
83+ div.className = role;
84+ div.textContent = content;
85+ chat.appendChild(div);
86+ });
87+ </script>
88+ </body>
89+ </html>
90+ ` ;
91+ }
92+
93+ private async _handleMessage ( message : any ) {
94+ switch ( message . command ) {
95+ case 'sendMessage' :
96+ this . _conversation . push ( { role : 'user' , content : message . text } ) ;
97+ this . _panel . webview . postMessage ( { role : 'user' , content : message . text } ) ;
98+ const response = await callDeepSeekApi ( message . text , 'You are a helpful assistant.' ) ;
99+ this . _conversation . push ( { role : 'model' , content : response || '' } ) ;
100+ this . _panel . webview . postMessage ( { role : 'model' , content : response || '' } ) ;
101+ break ;
102+ case 'reset' :
103+ this . _conversation = [ ] ;
104+ this . _panel . webview . html = this . _getHtmlForWebview ( ) ;
105+ break ;
106+ }
107+ }
108+
109+ public dispose ( ) {
110+ ChatPanel . currentPanel = undefined ;
111+ this . _panel . dispose ( ) ;
112+ while ( this . _disposables . length ) {
113+ const disposable = this . _disposables . pop ( ) ;
114+ if ( disposable ) {
115+ disposable . dispose ( ) ;
116+ }
117+ }
118+ }
119+ }
0 commit comments