fix: declare statements breaking query key parsing (#522)

* fix: declare statements breaking query key parsing

* improve assertion

* update explain prompt

Author: emrberk

e2e/tests/console/aiAssistant.spec.js

@@ -1206,16 +1206,34 @@ describe("ai assistant", () => {
 
     it("should move glyph icons when query position changes", () => {
       // Given - Type a query starting at line 1
-      cy.typeQuery("SELECT 1;")
+      cy.typeQuery("DECLARE @myVar := 'shift-this' select @myVar;")
 
       // Then - AI icon should be on line 1
-      cy.getAIIconInLine(1, "noChat").should("be.visible")
+      cy.getAIIconInLine(1, "noChat").should("be.visible").click()
+
+      cy.getByDataHook("ai-chat-window").should("be.visible")
+      cy.getByDataHook("chat-input-textarea").should("be.visible")
+      cy.getByDataHook("chat-context-badge").should("be.visible")
+
+      interceptAIChatRequest("openai")
+      cy.getByDataHook("chat-input-textarea").type("Explain this query", {
+        force: true,
+      })
+      cy.getByDataHook("chat-send-button").click()
+      cy.getAIIconInLine(1, "highlight").should("be.visible")
+
+      cy.wait("@openaiChatRequest")
+      cy.getByDataHook("chat-message-assistant").should("be.visible")
+      cy.getAIIconInLine(1, "active").should("be.visible")
+
+      cy.getByDataHook("chat-window-close").click()
+      cy.getByDataHook("ai-chat-window").should("not.exist")
 
       // When - Add empty lines before the query (press Home, then Enter twice)
-      cy.get(".monaco-editor textarea").type("{home}{enter}{enter}")
+      cy.typeQuery("{home}{enter}{enter}")
 
       // Then - AI icon should move to line 3
-      cy.getAIIconInLine(3, "noChat").should("be.visible")
+      cy.getAIIconInLine(3, "active").should("be.visible")
 
       // And - Line 1 should not have an AI icon
       cy.get(".glyph-widget-1 .glyph-ai-icon").should("not.exist")

src/components/ExplainQueryButton/index.tsx

@@ -66,7 +66,7 @@ export const ExplainQueryButton = ({
     const currentModel = currentModelValue!
     const apiKey = apiKeyValue!
     void (async () => {
-      const fullApiMessage = `Explain this SQL query with 2-4 sentences:\n\n\`\`\`sql\n${queryText}\n\`\`\``
+      const fullApiMessage = `Using your tools when necessary, explain this SQL query in detail.:\n\n\`\`\`sql\n${queryText}\n\`\`\``
 
       addMessage({
         role: "user",

src/scenes/Editor/Monaco/utils.ts

@@ -1118,7 +1118,11 @@ export const createQueryKey = (
 export const parseQueryKey = (
   queryKey: QueryKey,
 ): { queryText: string; startOffset: number; endOffset: number } => {
-  const [queryText, offsets] = queryKey.split("@")
+  const separatorIndex = queryKey.lastIndexOf("@")
+
+  const queryText = queryKey.slice(0, separatorIndex)
+  const offsets = queryKey.slice(separatorIndex + 1)
+
   const [startOffset, endOffset] = offsets.split("-")
   return {
     queryText,