chore: create message_sent event to track model provider and id model

web-app/src/containers/ChatInput.tsx

@@ -40,6 +40,8 @@ import { useShallow } from 'zustand/react/shallow'
 import { McpExtensionToolLoader } from './McpExtensionToolLoader'
 import { ExtensionTypeEnum, MCPExtension } from '@janhq/core'
 import { ExtensionManager } from '@/lib/extension'
+import { useAnalytic } from '@/hooks/useAnalytic'
+import posthog from 'posthog-js'
 
 type ChatInputProps = {
   className?: string
@@ -88,6 +90,7 @@ const ChatInput = ({
   const selectedModel = useModelProvider((state) => state.selectedModel)
   const selectedProvider = useModelProvider((state) => state.selectedProvider)
   const sendMessage = useChat()
+  const { productAnalytic } = useAnalytic()
   const [message, setMessage] = useState('')
   const [dropdownToolsAvailable, setDropdownToolsAvailable] = useState(false)
   const [tooltipToolsAvailable, setTooltipToolsAvailable] = useState(false)
@@ -176,7 +179,6 @@ const ChatInput = ({
   const mcpExtension = extensionManager.get<MCPExtension>(ExtensionTypeEnum.MCP)
   const MCPToolComponent = mcpExtension?.getToolComponent?.()
 
-
   const handleSendMesage = async (prompt: string) => {
     if (!selectedModel) {
       setMessage('Please select a model to start chatting.')
@@ -186,6 +188,19 @@ const ChatInput = ({
       return
     }
     setMessage('')
+
+    // Track message send event with PostHog (only if product analytics is enabled)
+    if (productAnalytic && selectedModel && selectedProvider) {
+      try {
+        posthog.capture('message_sent', {
+          model_provider: selectedProvider,
+          model_id: selectedModel.id,
+        })
+      } catch (error) {
+        console.debug('Failed to track message send event:', error)
+      }
+    }
+
     sendMessage(
       prompt,
       true,
@@ -703,13 +718,15 @@ const ChatInput = ({
                 )}
 
                 {selectedModel?.capabilities?.includes('tools') &&
-                  hasActiveMCPServers && (
+                  hasActiveMCPServers &&
-                    MCPToolComponent ? (
+                  (MCPToolComponent ? (
                     // Use custom MCP component
                     <McpExtensionToolLoader
                       tools={tools}
                       hasActiveMCPServers={hasActiveMCPServers}
-                        selectedModelHasTools={selectedModel?.capabilities?.includes('tools') ?? false}
+                      selectedModelHasTools={
+                        selectedModel?.capabilities?.includes('tools') ?? false
+                      }
                       initialMessage={initialMessage}
                       MCPToolComponent={MCPToolComponent}
                     />
@@ -769,8 +786,7 @@ const ChatInput = ({
                         </TooltipContent>
                       </Tooltip>
                     </TooltipProvider>
-                    )
+                  ))}
-                  )}
                 {selectedModel?.capabilities?.includes('web_search') && (
                   <TooltipProvider>
                     <Tooltip>