add metrics

extensions/void/src/DisplayChangesProvider.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode';
 import { findDiffs } from './findDiffs';
-import { Diff, BaseDiffArea, BaseDiff, DiffArea } from './shared_types';
+import { Diff, BaseDiffArea, BaseDiff, DiffArea } from './common/shared_types';
 
 
 

extensions/void/src/common/shared_types.ts

@@ -1,6 +1,6 @@
 
 import * as vscode from 'vscode';
-import { PartialVoidConfig } from './sidebar/contextForConfig';
+import { PartialVoidConfig } from '../sidebar/contextForConfig';
 
 
 

extensions/void/src/extension.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode';
 import { DisplayChangesProvider } from './DisplayChangesProvider';
-import { BaseDiffArea, ChatThreads, MessageFromSidebar, MessageToSidebar } from './shared_types';
+import { BaseDiffArea, ChatThreads, MessageFromSidebar, MessageToSidebar } from './common/shared_types';
 import { SidebarWebviewProvider } from './SidebarWebviewProvider';
 import { v4 as uuidv4 } from 'uuid'
 

extensions/void/src/findDiffs.ts

@@ -1,7 +1,7 @@
 
 import * as vscode from 'vscode';
 // import { diffLines, Change } from 'diff';
-import { BaseDiff } from './shared_types';
+import { BaseDiff } from './common/shared_types';
 
 import { diff_match_patch } from 'diff-match-patch';
 

extensions/void/src/sidebar/Sidebar.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef, useCallback, FormEvent } from "react"
-import { CodeSelection, ChatMessage, MessageToSidebar } from "../shared_types"
+import { CodeSelection, ChatMessage, MessageToSidebar } from "../common/shared_types"
 import { awaitVSCodeResponse, getVSCodeAPI, onMessageFromVSCode, useOnVSCodeMessage } from "./getVscodeApi"
 
 import { SidebarThreadSelector } from "./SidebarThreadSelector";
 import { SidebarChat } from "./SidebarChat";
 import { SidebarSettings } from './SidebarSettings';
-import { identifyUser, useMetrics } from "../metrics/posthog";
+import { identifyUser, useMetrics } from "./metrics/posthog";
 
 
 const Sidebar = () => {
@@ -60,7 +60,7 @@ const Sidebar = () => {
 	return <>
 		<div className={`flex flex-col h-screen w-full`}>
 
-			<div className={`mb-2 max-h-[30vh] overflow-y-auto ${tab !== 'threadSelector' ? 'hidden' : ''}`}>
+			<div className={`mb-2 h-[30vh] ${tab !== 'threadSelector' ? 'hidden' : ''}`}>
 				<SidebarThreadSelector onClose={() => setTab('chat')} />
 			</div>
 

extensions/void/src/sidebar/SidebarChat.tsx

@@ -5,12 +5,13 @@ import { marked } from 'marked';
 import MarkdownRender from "./markdown/MarkdownRender";
 import BlockCode from "./markdown/BlockCode";
 import { SelectedFiles } from "./components/SelectedFiles";
-import { File, ChatMessage, CodeSelection } from "../shared_types";
+import { File, ChatMessage, CodeSelection } from "../common/shared_types";
 import * as vscode from 'vscode'
 import { awaitVSCodeResponse, getVSCodeAPI, onMessageFromVSCode, useOnVSCodeMessage } from "./getVscodeApi";
 import { useThreads } from "./contextForThreads";
 import { sendLLMMessage } from "../common/sendLLMMessage";
 import { useVoidConfig } from "./contextForConfig";
+import { captureEvent } from "./metrics/posthog";
 
 
 
@@ -93,6 +94,7 @@ const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
 }
 
 
+
 export const SidebarChat = () => {
 
 
@@ -112,6 +114,23 @@ export const SidebarChat = () => {
 	const { allThreads, currentThread, addMessageToHistory, startNewThread, switchToThread } = useThreads()
 	const { voidConfig } = useVoidConfig()
 
+
+
+	// only captures number of messages and message "shape", no actual code, instructions, prompts, etc
+	const captureChatEvent = useCallback((eventId: string, extras?: object) => {
+		const whichApi = voidConfig.default['whichApi']
+		const messages = currentThread?.messages
+
+		captureEvent(eventId, {
+			whichApi: whichApi,
+			numMessages: messages?.length,
+			messagesShape: messages?.map(msg => ({ role: msg.role, length: msg.displayContent.length })),
+			version: '2024-10-19',
+			...extras,
+		})
+	}, [currentThread?.messages, voidConfig.default])
+
+
 	// if they pressed the + to add a new chat
 	useOnVSCodeMessage('startNewThread', (m) => {
 		// find a thread with 0 messages and switch to it
@@ -163,17 +182,25 @@ export const SidebarChat = () => {
 		addMessageToHistory(newHistoryElt)
 
 		// send message to LLM
+
+		captureChatEvent('Chat - Sending Message', { messageLength: instructions.length })
+		const submit_time = new Date()
+
 		let { abort } = sendLLMMessage({
 			messages: [...(currentThread?.messages ?? []).map(m => ({ role: m.role, content: m.content })), { role: 'user', content: userContent }],
 			onText: (newText, fullText) => setMessageStream(fullText),
 			onFinalMessage: (content) => {
+				captureChatEvent('Chat - Received Full Message', { messageLength: content.length, duration: new Date().getMilliseconds() - submit_time.getMilliseconds() })
+
 				// add assistant's message to chat history, and clear selection
-				const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content, }
+				const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content }
 				addMessageToHistory(newHistoryElt)
 				setMessageStream('')
 				setIsLoading(false)
 			},
 			onError: (error) => {
+				captureChatEvent('Chat - Error', { error })
+
 				// add assistant's message to chat history, and clear selection
 				let content = messageStream; // just use the current content
 				const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content, }
@@ -189,7 +216,10 @@ export const SidebarChat = () => {
 
 	}
 
-	const onStop = useCallback(() => {
+	const onAbort = useCallback(() => {
+
+		captureChatEvent('Chat - Abort', { messageLengthSoFar: messageStream.length })
+
 		// abort claude
 		abortFnRef.current?.()
 
@@ -201,7 +231,7 @@ export const SidebarChat = () => {
 		setMessageStream('')
 		setIsLoading(false)
 
-	}, [addMessageToHistory, messageStream])
+	}, [captureChatEvent, messageStream, addMessageToHistory])
 
 	//Clear code selection
 	const clearSelection = () => {
@@ -263,10 +293,16 @@ export const SidebarChat = () => {
 							{isLoading ?
 								// stop button
 								<button
-									onClick={onStop}
-									className="btn btn-primary rounded-r-lg max-h-10 p-2"
+									onClick={onAbort}
 									type='button'
-								>Stop</button>
+									className="btn btn-primary font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
+								>
+									<svg
+										className='scale-50'
+										stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
+										<path d="M24 24H0V0h24v24z"></path>
+									</svg>
+								</button>
 								:
 								// submit button (up arrow)
 								<button
@@ -285,7 +321,11 @@ export const SidebarChat = () => {
 				</div>
 			</div>
 
-			{latestError}
+			<div>
+				{latestError}
+
+				{}
+			</div>
 		</div>
 	</>
 }

extensions/void/src/sidebar/SidebarSettings.tsx

@@ -9,10 +9,15 @@ const SettingOfFieldAndParam = ({ field, param }: { field: VoidConfigField, para
 
 	const updateState = (newValue: string) => { setConfigParam(field, param, newValue) }
 
-	const resetButton = <button className='btn btn-sm' onClick={() => updateState(defaultVal)}>
+	const resetButton = <button
+		disabled={val === defaultVal}
+		title={val === defaultVal ? 'This is already the default value.' : `Revert value to '${defaultVal}'?`}
+		className='group btn btn-sm disabled:opacity-75 disabled:cursor-default'
+		onClick={() => updateState(defaultVal)}
+	>
 		<svg
-			className='size-5'
-			stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 16 16" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M3.5 2v3.5L4 6h3.5V5H4.979l.941-.941a3.552 3.552 0 1 1 5.023 5.023L5.746 14.28l.72.72 5.198-5.198A4.57 4.57 0 0 0 5.2 3.339l-.7.7V2h-1z"></path>
+			className='size-5 group-disabled:stroke-current group-disabled:fill-current group-hover:stroke-red-600 group-hover:fill-red-600 duration-200'
+			fill="currentColor" strokeWidth="0" viewBox="0 0 16 16" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M3.5 2v3.5L4 6h3.5V5H4.979l.941-.941a3.552 3.552 0 1 1 5.023 5.023L5.746 14.28l.72.72 5.198-5.198A4.57 4.57 0 0 0 5.2 3.339l-.7.7V2h-1z"></path>
 		</svg>
 	</button>
 

extensions/void/src/sidebar/contextForThreads.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, createContext, useCallback, useContext, useEffect, useRef, useState, } from "react"
-import { ChatMessage, ChatThreads } from "../shared_types"
+import { ChatMessage, ChatThreads } from "../common/shared_types"
 import { awaitVSCodeResponse, getVSCodeAPI } from "./getVscodeApi"
 
 

extensions/void/src/sidebar/getVscodeApi.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { MessageFromSidebar, MessageToSidebar, } from "../shared_types";
+import { MessageFromSidebar, MessageToSidebar, } from "../common/shared_types";
 import { v4 as uuidv4 } from 'uuid';