npm - @genexus/genexus-ide-ui - Versions diffs - 1.1.56 → 1.1.57 - Mend

@genexus/genexus-ide-ui 1.1.56 → 1.1.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (392) hide show

package/dist/collection/showcase/chat-container/models.js CHANGED Viewed

@@ -18,7 +18,7 @@ export const assistantMessageChatModel = [
         status: "complete",
         content: "I’ve created the basic structure for the registration form, but I need a bit more info: Should the address include city, state, and ZIP? Do you want a separate confirmation page or just a message on the same screen? Any specific format or validation for the phone number?",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     }
@@ -30,7 +30,7 @@ export const assistantMessageWarningChatModel = [
         status: "complete",
         content: "The CustomerRegistration panel was created with warnings: The “Phone” field uses a generic character format—consider a phone mask. No address validation rules applied.The data is still saved correctly, and the panel works as expected.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         },
         parts: "warning"
@@ -43,7 +43,7 @@ export const assistantMessageSuccessChatModel = [
         status: "complete",
         content: "The CustomerRegistration web panel was created successfully. Fields: Name, Email, Phone, Address. Validations applied (required, email format). Data saved to “Customer” transaction. Confirmation message shown after submit. Let me know if you'd like to add styles or link it to another object.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         },
         parts: "success"
@@ -55,7 +55,7 @@ export const errorMessageChatModel = [
         role: "error",
         content: "Sorry, I couldn't generate the requested form. Reason: The “Customer” transaction does not exist in the current Knowledge Base. Please create the “Customer” object or check if it’s named differently.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     }
@@ -67,7 +67,7 @@ export const assistantWaitingChatModel = [
         status: "waiting",
         content: "Creating CustomerRegistration panel",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     }
@@ -79,7 +79,7 @@ export const chatTranslations = {
         downloadCodeButton: "Download code",
         sendButton: "Send",
         sendInput: "Message",
-        stopGeneratingAnswerButton: "Stop generating answer"
+        stopResponseButton: "Stop generating answer"
     },
     placeholder: {
         sendInput: "Ask me a question..."
@@ -90,7 +90,7 @@ export const chatTranslations = {
         downloadCodeButton: "Download",
         processing: `Processing...`,
         sourceFiles: "Source files:",
-        stopGeneratingAnswerButton: "Stop generating answer"
+        stopResponseButton: "Stop generating answer"
     }
 };
 // All messages
@@ -107,7 +107,7 @@ export const allMessagesModel = [
         status: "complete",
         content: "I’ve created the basic structure for the registration form, but I need a bit more info: Should the address include city, state, and ZIP? Do you want a separate confirmation page or just a message on the same screen? Any specific format or validation for the phone number?",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -117,7 +117,7 @@ export const allMessagesModel = [
         status: "complete",
         content: "The CustomerRegistration panel was created with warnings: The “Phone” field uses a generic character format—consider a phone mask. No address validation rules applied.The data is still saved correctly, and the panel works as expected.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         },
         parts: "warning"
@@ -127,7 +127,7 @@ export const allMessagesModel = [
         role: "error",
         content: "Sorry, I couldn't generate the requested form. Reason: The “Customer” transaction does not exist in the current Knowledge Base. Please create the “Customer” object or check if it’s named differently.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -137,7 +137,7 @@ export const allMessagesModel = [
         status: "complete",
         content: "Your information has been saved successfully, and all changes are now reflected in your account. You can continue with the next steps or return to the dashboard at any time.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "15:00"
         },
         parts: "success"
@@ -246,7 +246,7 @@ export const codeFixerRecord = [
         status: "complete",
         content: "Action required example. Action required example. Action required example.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -256,7 +256,7 @@ export const codeFixerRecord = [
         status: "complete",
         content: "Some fields contain missing or invalid data, which may prevent the process from completing correctly. Review your input carefully and make any necessary corrections before continuing.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         },
         parts: "warning"
@@ -266,7 +266,7 @@ export const codeFixerRecord = [
         role: "error",
         content: "An unexpected error occurred while processing your request, and the operation couldn’t be completed.Please check your internet connection or try again later. If the problem persists, contact support.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -276,7 +276,7 @@ export const codeFixerRecord = [
         status: "complete",
         content: "Your information has been saved successfully, and all changes are now reflected in your account. You can continue with the next steps or return to the dashboard at any time.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         },
         parts: "success"
@@ -293,7 +293,7 @@ export const codeFixerRecord = [
         status: "complete",
         content: "You can provide further details or updates regarding your support ticket and its associated code. Your input here helps us better understand and address your issue effectively.",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -303,7 +303,7 @@ export const codeFixerRecord = [
         status: "waiting",
         content: "You can provide further details or updates",
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     },
@@ -313,7 +313,7 @@ export const codeFixerRecord = [
         status: "complete",
         content: ASSISTANT_RESPONSE_SHORT_MARKDOWN,
         metadata: {
-            assistantName: ASSISTANT_NAME,
+            agentName: ASSISTANT_NAME,
             time: "14:25"
         }
     }

package/dist/collection/showcase/chat-container/models.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/showcase/chat-container/models.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n ChatMessage,\n ChatTranslations\n} from \"@genexus/chameleon-controls-library\";\n\nimport { MercuryChatMessageMetadata } from \"../../components/chat/lit-custom-render/types\";\n\nexport const ASSISTANT_RESPONSE_SHORT_MARKDOWN =\n '\\n### Code block {#code-block}\\nTo create code blocks, you’ll use three backticks (` ``` `) or three tildes (`~~~`) on the lines before and after the code block.\\n\\n```json\\n{\\n \"firstName\": \"John\",\\n \"lastName\": \"Smith\",\\n \"age\": 25\\n}';\n\nexport const ASSISTANT_NAME = \"Nexa\";\n\n// - - - - - - - - - - - - - -\n// Types of messages\n// - - - - - - - - - - - - - -\n\nexport const userMessageChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n content:\n \"Generate a web form for customer registration with fields for name, email, phone, and address. Include validation, save the data to the database, and show a confirmation message after submission.\",\n metadata: null\n }\n];\n\nexport const assistantMessageChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"I’ve created the basic structure for the registration form, but I need a bit more info: Should the address include city, state, and ZIP? Do you want a separate confirmation page or just a message on the same screen? Any specific format or validation for the phone number?\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n }\n];\n\nexport const assistantMessageWarningChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"The CustomerRegistration panel was created with warnings: The “Phone” field uses a generic character format—consider a phone mask. No address validation rules applied.The data is still saved correctly, and the panel works as expected.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"warning\"\n }\n];\n\nexport const assistantMessageSuccessChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"The CustomerRegistration web panel was created successfully. Fields: Name, Email, Phone, Address. Validations applied (required, email format). Data saved to “Customer” transaction. Confirmation message shown after submit. Let me know if you'd like to add styles or link it to another object.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"success\"\n }\n];\n\nexport const errorMessageChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"error\",\n content:\n \"Sorry, I couldn't generate the requested form. Reason: The “Customer” transaction does not exist in the current Knowledge Base. Please create the “Customer” object or check if it’s named differently.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n }\n];\n\nexport const assistantWaitingChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"waiting\",\n content: \"Creating CustomerRegistration panel\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n }\n];\n\nexport const chatTranslations: ChatTranslations = {\n accessibleName: {\n clearChat: \"Clear chat\",\n copyMessageContent: \"Copy assistant content\",\n downloadCodeButton: \"Download code\",\n sendButton: \"Send\",\n sendInput: \"Message\",\n stopGeneratingAnswerButton: \"Stop generating answer\"\n },\n placeholder: {\n sendInput: \"Ask me a question...\"\n },\n text: {\n copyCodeButton: \"Copy code\",\n copyMessageContent: \"Copy\",\n downloadCodeButton: \"Download\",\n processing: `Processing...`,\n sourceFiles: \"Source files:\",\n stopGeneratingAnswerButton: \"Stop generating answer\"\n }\n};\n\n// All messages\n\nexport const allMessagesModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n content:\n \"Generate a web form for customer registration with fields for name, email, phone, and address. Include validation, save the data to the database, and show a confirmation message after submission.\",\n metadata: null\n },\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"I’ve created the basic structure for the registration form, but I need a bit more info: Should the address include city, state, and ZIP? Do you want a separate confirmation page or just a message on the same screen? Any specific format or validation for the phone number?\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"The CustomerRegistration panel was created with warnings: The “Phone” field uses a generic character format—consider a phone mask. No address validation rules applied.The data is still saved correctly, and the panel works as expected.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"warning\"\n },\n {\n id: \"1\",\n role: \"error\",\n content:\n \"Sorry, I couldn't generate the requested form. Reason: The “Customer” transaction does not exist in the current Knowledge Base. Please create the “Customer” object or check if it’s named differently.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"5\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Your information has been saved successfully, and all changes are now reflected in your account. You can continue with the next steps or return to the dashboard at any time.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"15:00\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"success\"\n }\n];\n\n// - - - - - - - - - - - - - -\n// Other messages\n// - - - - - - - - - - - - - -\n\nexport const ASSISTANT_RESPONSE_MARKDOWN = `\n###### Code block {#code-block}\nTo create code blocks, you’ll use three backticks (\\` \\`\\`\\` \\`) or three tildes (\\`~~~\\`) on the lines before and after the code block.\n\n\\`\\`\\`\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n\nAnother way to create code blocks is to indent every line of the block by at least four spaces or one tab.\n\n <html>\n <head>\n </head>\n </html>\n\n\n###### Syntax Highlighting {#syntax-highlighting}\nThis feature allows you to add color highlighting for whatever language your code was written in.\nTo add syntax highlighting, specify a language next to the backticks before the fenced code block.\n\n\\`\\`\\`json\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n\n\\`\\`\\`javascript\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Markdown from 'react-markdown'\nimport rehypeHighlight from 'rehype-highlight'\n\nconst markdown = \\`\n# Your markdown here\n\\`\n\nReactDOM.render(\n <Markdown rehypePlugins={[rehypeHighlight]}>{markdown}</Markdown>,\n document.querySelector('#content')\n)\n\\`\\`\\`\n\n###### Horizontal Rules {#horizontal-rules}\nTo create a horizontal rule, use three or more asterisks (\\`***\\`), dashes (\\`---\\`), or underscores (\\`___\\`) on a line by themselves.\n`;\n\nexport const chatRecord: ChatMessage[] = [\n { id: \"1\", role: \"user\", content: \"Hello world\" },\n { id: \"2\", role: \"assistant\", content: ASSISTANT_RESPONSE_MARKDOWN },\n { id: \"3\", role: \"user\", content: \"Hello world 1\" },\n { id: \"4\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"5\", role: \"user\", content: \"Hello world 2\" },\n { id: \"6\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"7\", role: \"user\", content: \"Hello world 3\" },\n { id: \"8\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"9\", role: \"user\", content: \"Hello world 4\" },\n { id: \"10\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN }\n];\n\nexport const longChatRecord: ChatMessage[] = Array.from(\n { length: 40 },\n (_, index) =>\n index % 2 === 0\n ? {\n id: `index: ${index}`,\n role: \"user\",\n content:\n `index: ${index}` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n`\n }\n : {\n id: `index: ${index}`,\n role: \"assistant\",\n content:\n ASSISTANT_RESPONSE_SHORT_MARKDOWN +\n `\\nindex: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n`\n }\n);\n\nexport const codeFixerRecord: ChatMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n content: \"Please give me an example about...\",\n metadata: \"14:55\"\n },\n {\n id: \"2\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Action required example. Action required example. Action required example.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"3\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Some fields contain missing or invalid data, which may prevent the process from completing correctly. Review your input carefully and make any necessary corrections before continuing.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"warning\"\n },\n {\n id: \"4\",\n role: \"error\",\n content:\n \"An unexpected error occurred while processing your request, and the operation couldn’t be completed.Please check your internet connection or try again later. If the problem persists, contact support.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"5\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Your information has been saved successfully, and all changes are now reflected in your account. You can continue with the next steps or return to the dashboard at any time.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"success\"\n },\n {\n id: \"6\",\n role: \"user\",\n content:\n \"Implement the function calculate_average_grade in grades.py that takes a list of grades as input and returns the average grade as a floating-point number\",\n metadata: \"15:00\"\n },\n {\n id: \"7\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"You can provide further details or updates regarding your support ticket and its associated code. Your input here helps us better understand and address your issue effectively.\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"8\",\n role: \"assistant\",\n status: \"waiting\",\n content: \"You can provide further details or updates\",\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"9\",\n role: \"assistant\",\n status: \"complete\",\n content: ASSISTANT_RESPONSE_SHORT_MARKDOWN,\n metadata: {\n assistantName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n }\n];\n"]}
1	+ {"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/showcase/chat-container/models.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n ChatMessage,\n ChatTranslations\n} from \"@genexus/chameleon-controls-library\";\n\nimport { MercuryChatMessageMetadata } from \"@genexus/mercury\";\n\nexport const ASSISTANT_RESPONSE_SHORT_MARKDOWN =\n '\\n### Code block {#code-block}\\nTo create code blocks, you’ll use three backticks (` ``` `) or three tildes (`~~~`) on the lines before and after the code block.\\n\\n```json\\n{\\n \"firstName\": \"John\",\\n \"lastName\": \"Smith\",\\n \"age\": 25\\n}';\n\nexport const ASSISTANT_NAME = \"Nexa\";\n\n// - - - - - - - - - - - - - -\n// Types of messages\n// - - - - - - - - - - - - - -\n\nexport const userMessageChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n content:\n \"Generate a web form for customer registration with fields for name, email, phone, and address. Include validation, save the data to the database, and show a confirmation message after submission.\",\n metadata: null\n }\n];\n\nexport const assistantMessageChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"I’ve created the basic structure for the registration form, but I need a bit more info: Should the address include city, state, and ZIP? Do you want a separate confirmation page or just a message on the same screen? Any specific format or validation for the phone number?\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n }\n];\n\nexport const assistantMessageWarningChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"The CustomerRegistration panel was created with warnings: The “Phone” field uses a generic character format—consider a phone mask. No address validation rules applied.The data is still saved correctly, and the panel works as expected.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"warning\"\n }\n];\n\nexport const assistantMessageSuccessChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"The CustomerRegistration web panel was created successfully. Fields: Name, Email, Phone, Address. Validations applied (required, email format). Data saved to “Customer” transaction. Confirmation message shown after submit. Let me know if you'd like to add styles or link it to another object.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"success\"\n }\n];\n\nexport const errorMessageChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"error\",\n content:\n \"Sorry, I couldn't generate the requested form. Reason: The “Customer” transaction does not exist in the current Knowledge Base. Please create the “Customer” object or check if it’s named differently.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n }\n];\n\nexport const assistantWaitingChatModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"waiting\",\n content: \"Creating CustomerRegistration panel\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n }\n];\n\nexport const chatTranslations: ChatTranslations = {\n accessibleName: {\n clearChat: \"Clear chat\",\n copyMessageContent: \"Copy assistant content\",\n downloadCodeButton: \"Download code\",\n sendButton: \"Send\",\n sendInput: \"Message\",\n stopResponseButton: \"Stop generating answer\"\n },\n placeholder: {\n sendInput: \"Ask me a question...\"\n },\n text: {\n copyCodeButton: \"Copy code\",\n copyMessageContent: \"Copy\",\n downloadCodeButton: \"Download\",\n processing: `Processing...`,\n sourceFiles: \"Source files:\",\n stopResponseButton: \"Stop generating answer\"\n }\n};\n\n// All messages\n\nexport const allMessagesModel: ChatMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n content:\n \"Generate a web form for customer registration with fields for name, email, phone, and address. Include validation, save the data to the database, and show a confirmation message after submission.\",\n metadata: null\n },\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"I’ve created the basic structure for the registration form, but I need a bit more info: Should the address include city, state, and ZIP? Do you want a separate confirmation page or just a message on the same screen? Any specific format or validation for the phone number?\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"The CustomerRegistration panel was created with warnings: The “Phone” field uses a generic character format—consider a phone mask. No address validation rules applied.The data is still saved correctly, and the panel works as expected.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"warning\"\n },\n {\n id: \"1\",\n role: \"error\",\n content:\n \"Sorry, I couldn't generate the requested form. Reason: The “Customer” transaction does not exist in the current Knowledge Base. Please create the “Customer” object or check if it’s named differently.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"5\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Your information has been saved successfully, and all changes are now reflected in your account. You can continue with the next steps or return to the dashboard at any time.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"15:00\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"success\"\n }\n];\n\n// - - - - - - - - - - - - - -\n// Other messages\n// - - - - - - - - - - - - - -\n\nexport const ASSISTANT_RESPONSE_MARKDOWN = `\n###### Code block {#code-block}\nTo create code blocks, you’ll use three backticks (\\` \\`\\`\\` \\`) or three tildes (\\`~~~\\`) on the lines before and after the code block.\n\n\\`\\`\\`\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n\nAnother way to create code blocks is to indent every line of the block by at least four spaces or one tab.\n\n <html>\n <head>\n </head>\n </html>\n\n\n###### Syntax Highlighting {#syntax-highlighting}\nThis feature allows you to add color highlighting for whatever language your code was written in.\nTo add syntax highlighting, specify a language next to the backticks before the fenced code block.\n\n\\`\\`\\`json\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n\n\\`\\`\\`javascript\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Markdown from 'react-markdown'\nimport rehypeHighlight from 'rehype-highlight'\n\nconst markdown = \\`\n# Your markdown here\n\\`\n\nReactDOM.render(\n <Markdown rehypePlugins={[rehypeHighlight]}>{markdown}</Markdown>,\n document.querySelector('#content')\n)\n\\`\\`\\`\n\n###### Horizontal Rules {#horizontal-rules}\nTo create a horizontal rule, use three or more asterisks (\\`***\\`), dashes (\\`---\\`), or underscores (\\`___\\`) on a line by themselves.\n`;\n\nexport const chatRecord: ChatMessage[] = [\n { id: \"1\", role: \"user\", content: \"Hello world\" },\n { id: \"2\", role: \"assistant\", content: ASSISTANT_RESPONSE_MARKDOWN },\n { id: \"3\", role: \"user\", content: \"Hello world 1\" },\n { id: \"4\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"5\", role: \"user\", content: \"Hello world 2\" },\n { id: \"6\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"7\", role: \"user\", content: \"Hello world 3\" },\n { id: \"8\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"9\", role: \"user\", content: \"Hello world 4\" },\n { id: \"10\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN }\n];\n\nexport const longChatRecord: ChatMessage[] = Array.from(\n { length: 40 },\n (_, index) =>\n index % 2 === 0\n ? {\n id: `index: ${index}`,\n role: \"user\",\n content:\n `index: ${index}` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n`\n }\n : {\n id: `index: ${index}`,\n role: \"assistant\",\n content:\n ASSISTANT_RESPONSE_SHORT_MARKDOWN +\n `\\nindex: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n`\n }\n);\n\nexport const codeFixerRecord: ChatMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n content: \"Please give me an example about...\",\n metadata: \"14:55\"\n },\n {\n id: \"2\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Action required example. Action required example. Action required example.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"3\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Some fields contain missing or invalid data, which may prevent the process from completing correctly. Review your input carefully and make any necessary corrections before continuing.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"warning\"\n },\n {\n id: \"4\",\n role: \"error\",\n content:\n \"An unexpected error occurred while processing your request, and the operation couldn’t be completed.Please check your internet connection or try again later. If the problem persists, contact support.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"5\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Your information has been saved successfully, and all changes are now reflected in your account. You can continue with the next steps or return to the dashboard at any time.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata,\n parts: \"success\"\n },\n {\n id: \"6\",\n role: \"user\",\n content:\n \"Implement the function calculate_average_grade in grades.py that takes a list of grades as input and returns the average grade as a floating-point number\",\n metadata: \"15:00\"\n },\n {\n id: \"7\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"You can provide further details or updates regarding your support ticket and its associated code. Your input here helps us better understand and address your issue effectively.\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"8\",\n role: \"assistant\",\n status: \"waiting\",\n content: \"You can provide further details or updates\",\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n },\n {\n id: \"9\",\n role: \"assistant\",\n status: \"complete\",\n content: ASSISTANT_RESPONSE_SHORT_MARKDOWN,\n metadata: {\n agentName: ASSISTANT_NAME,\n time: \"14:25\"\n } satisfies MercuryChatMessageMetadata\n }\n];\n"]}

package/dist/components/chat-container.js CHANGED Viewed

@@ -1,5 +1,8 @@
-import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getIconPath } from './MERCURY_ASSETS.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './mer-animated-dots.js';
+import 'lit';
+import 'lit/directives/when.js';
+import 'lit/directives/if-defined.js';
 import { L as Locale } from './locale.js';
 const chatContainerCss = ".chat-container{background-color:var(--elevation-background-color, --mer-surface__elevation--01);display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr;position:relative;--chat-common-border-radius:var(--mer-spacing--2xs)}.chat-container.with-header{grid-template-rows:max-content 1fr}.section{display:contents}.header{padding:var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--sm);display:flex;align-items:center;justify-content:space-between;gap:var(--mer-spacing--sm);color:var(--mer-text__bright);border-block-end:var(--mer-border__width--sm) solid var(--color-border-surface-on-elevation-01, #333d47)}.header .button-copy-chat,.header .button-delete-chat{--control__border-color:transparent !important}.header .button-delete-chat:hover{filter:brightness(1.3)}.header .button-delete-chat:active{filter:brightness(0.8)}.ch-chat-container{overflow:auto;position:relative;display:grid}.chat-container__conversation-copied{position:absolute;z-index:1;inline-size:100%;block-size:100%;background:rgba(22, 22, 23, 0.75);backdrop-filter:saturate(180%) blur(20px);display:grid;align-items:center;justify-content:center;text-align:center;padding:32px;--mer-icon__box--md:18px;pointer-events:none;overflow:hidden;animation:fadeIn 100ms ease-in-out forwards;opacity:0}.chat-container__conversation-copied-wrapper{display:flex;align-items:center;gap:var(--mer-spacing--sm);position:relative;inset-block-start:4px;opacity:0;animation:liftUp var(--mer-timing--fast) ease-in-out forwards;animation-delay:var(--mer-timing--fast)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes liftUp{from{opacity:0;inset-block-start:4px}to{opacity:1;inset-block-start:0}}.chat::part(code-block-header__copy){--copy-text-opacity:0;--copy-text-translate-x:6px;opacity:var(--copy-text-opacity);pointer-events:none;transform:translateX(var(--copy-text-translate-x));transition:opacity 100ms ease-in-out, transform 100ms ease-in-out;font-size:12px}.chat::part(code-block-header__copy-copied){--copy-button-pointer-events:none !important;--copy-text-opacity:1;--copy-text-translate-x:0}.chat::part(code-block-header){align-items:center;display:flex;gap:8px}";
@@ -21,9 +24,6 @@ var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) ||
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _GxIdeChatContainer_menuItems, _GxIdeChatContainer_componentLocale, _GxIdeChatContainer_showMenuHandler, _GxIdeChatContainer_menuExpandedChangeHandler, _GxIdeChatContainer_copyConversationHandler, _GxIdeChatContainer_deleteConversationHandler;
-// TODO: Remove this once update chat bundle for lit is ready
-// on a new Mercury version
-const CHAT_LIT_PATH = getAssetPath(`./gx-ide-assets/chat-container/chat-lit.css`);
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/typography",
@@ -33,11 +33,6 @@ const CSS_BUNDLES = [
     "components/icon",
     "utils/elevation"
 ];
-const CSS_BUNDLE_CHAT_LIT = {
-    // styleSheet: chatListCss,
-    url: CHAT_LIT_PATH,
-    name: "components/chat-lit"
-};
 const COPY_ICON = getIconPath({
     category: "system",
     name: "copy",
@@ -115,7 +110,7 @@ const GxIdeChatContainer = /*@__PURE__*/ proxyCustomElement(class GxIdeChatConta
         return (h(Host, { class: {
                 "chat-container": true,
                 "with-header": !!renderHeader
-            } }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-theme", { model: CSS_BUNDLE_CHAT_LIT }), h("section", { class: "section" }, renderHeader && (h("header", { class: "header tiny-semi-bold-l" }, this.chatTitle && this.chatTitle, renderButtonsGroup && (h("ch-action-menu-render", { class: "dropdown", blockAlign: "inside-start", inlineAlign: "inside-end", model: __classPrivateFieldGet(this, _GxIdeChatContainer_menuItems, "f"), expanded: this.menuIsExpanded, onExpandedChange: __classPrivateFieldGet(this, _GxIdeChatContainer_menuExpandedChangeHandler, "f") }, h("button", { class: "button-tertiary button-icon-only", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_showMenuHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel }, h("ch-image", { class: "icon-md", src: MORE_HORIZONTAL_ICON })), this.copyConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-copy-chat", slot: "copy-chat-button", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_copyConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel }, h("ch-image", { class: "icon-md", src: COPY_ICON }), __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationLabel)), this.deleteConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-delete-chat", slot: "delete-chat-button", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_deleteConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel }, h("ch-image", { class: "icon-md", src: DELETE_ICON }), __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").clearConversationLabel)))))), h("section", { class: "ch-chat-container" }, h("slot", null), this.displayConversationCopiedMessage && (h("div", { class: "chat-container__conversation-copied" }, h("div", { class: "chat-container__conversation-copied-wrapper" }, h("ch-image", { class: "icon-md", src: CONVERSATION_ICON }), h("p", { class: "body-regular-l" }, "conversation copied"))))))));
+            } }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, renderHeader && (h("header", { class: "header tiny-semi-bold-l" }, this.chatTitle && this.chatTitle, renderButtonsGroup && (h("ch-action-menu-render", { class: "dropdown", blockAlign: "inside-start", inlineAlign: "inside-end", model: __classPrivateFieldGet(this, _GxIdeChatContainer_menuItems, "f"), expanded: this.menuIsExpanded, onExpandedChange: __classPrivateFieldGet(this, _GxIdeChatContainer_menuExpandedChangeHandler, "f") }, h("button", { class: "button-tertiary button-icon-only", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_showMenuHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel }, h("ch-image", { class: "icon-md", src: MORE_HORIZONTAL_ICON })), this.copyConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-copy-chat", slot: "copy-chat-button", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_copyConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel }, h("ch-image", { class: "icon-md", src: COPY_ICON }), __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationLabel)), this.deleteConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-delete-chat", slot: "delete-chat-button", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_deleteConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel }, h("ch-image", { class: "icon-md", src: DELETE_ICON }), __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").clearConversationLabel)))))), h("section", { class: "ch-chat-container" }, h("slot", null), this.displayConversationCopiedMessage && (h("div", { class: "chat-container__conversation-copied" }, h("div", { class: "chat-container__conversation-copied-wrapper" }, h("ch-image", { class: "icon-md", src: CONVERSATION_ICON }), h("p", { class: "body-regular-l" }, "conversation copied"))))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/chat-container"]; }
     get el() { return this; }

package/dist/components/chat-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"chat-container.js","mappings":"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","names":[],"sources":["src/components/chat/chat-container/chat-container.scss?tag=gx-ide-chat-container","src/components/chat/chat-container/chat-container.tsx"],"sourcesContent":[".chat-container {\n background-color: var(\n --elevation-background-color,\n --mer-surface__elevation--01\n );\n display: grid;\n block-size: 100%;\n overflow: auto;\n grid-template-rows: 1fr;\n position: relative;\n --chat-common-border-radius: var(--mer-spacing--2xs);\n}\n\n.chat-container.with-header {\n grid-template-rows: max-content 1fr;\n}\n\n.section {\n display: contents;\n}\n\n.header {\n padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs)\n var(--mer-spacing--2xs) var(--mer-spacing--sm);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--mer-spacing--sm);\n color: var(--mer-text__bright);\n border-block-end: var(--mer-border__width--sm) solid\n var(--color-border-surface-on-elevation-01, #333d47);\n\n .button-copy-chat,\n .button-delete-chat {\n --control__border-color: transparent !important;\n }\n\n .button-delete-chat {\n &:hover {\n filter: brightness(1.3);\n }\n &:active {\n filter: brightness(0.8);\n }\n }\n}\n\n.ch-chat-container {\n overflow: auto;\n position: relative;\n display: grid;\n}\n\n// - - - - - - - - - - - - - -\n// other\n// - - - - - - - - - - - - - -\n\n.chat-container__conversation-copied {\n position: absolute;\n z-index: 1;\n inline-size: 100%;\n block-size: 100%;\n background: rgba(22, 22, 23, 0.75);\n backdrop-filter: saturate(180%) blur(20px);\n display: grid;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 32px;\n --mer-icon__box--md: 18px;\n pointer-events: none;\n overflow: hidden;\n animation: fadeIn 100ms ease-in-out forwards;\n opacity: 0;\n}\n\n.chat-container__conversation-copied-wrapper {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n position: relative;\n inset-block-start: 4px;\n opacity: 0;\n animation: liftUp var(--mer-timing--fast) ease-in-out forwards;\n animation-delay: var(--mer-timing--fast);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes liftUp {\n from {\n opacity: 0;\n inset-block-start: 4px;\n }\n to {\n opacity: 1;\n inset-block-start: 0;\n }\n}\n\n// The following styles shoul be moved over to Mercury\n\n.chat::part(code-block-header__copy) {\n --copy-text-opacity: 0;\n --copy-text-translate-x: 6px;\n opacity: var(--copy-text-opacity);\n pointer-events: none;\n transform: translateX(var(--copy-text-translate-x));\n transition:\n opacity 100ms ease-in-out,\n transform 100ms ease-in-out;\n font-size: 12px;\n}\n.chat::part(code-block-header__copy-copied) {\n --copy-button-pointer-events: none !important;\n --copy-text-opacity: 1;\n --copy-text-translate-x: 0;\n}\n.chat::part(code-block-header) {\n align-items: center;\n display: flex;\n gap: 8px;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Method,\n State,\n getAssetPath\n} from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { ActionMenuModel } from \"@genexus/chameleon-controls-library\";\n\nimport { Locale } from \"../../../common/locale\";\nimport { ThemeItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/theme/theme-types\";\n\n// TODO: Remove this once update chat bundle for lit is ready\n// on a new Mercury version\nconst CHAT_LIT_PATH = getAssetPath(\n `./gx-ide-assets/chat-container/chat-lit.css`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"chameleon/scrollbar\",\n \"components/button\",\n \"components/dropdown\",\n \"components/icon\",\n \"utils/elevation\"\n];\nconst CSS_BUNDLE_CHAT_LIT: ThemeItemModel = {\n // styleSheet: chatListCss,\n url: CHAT_LIT_PATH,\n name: \"components/chat-lit\"\n};\n\nconst COPY_ICON = getIconPath({\n category: \"system\",\n name: \"copy\",\n colorType: \"primary\"\n});\nconst DELETE_ICON = getIconPath({\n category: \"system\",\n name: \"delete-outlined\",\n colorType: \"primary\"\n});\nconst CONVERSATION_ICON = getIconPath({\n category: \"objects\",\n name: \"conversational-flows\"\n});\nconst MORE_HORIZONTAL_ICON = getIconPath({\n category: \"system\",\n name: \"more-horizontal\",\n colorType: \"neutral\"\n});\n\n@Component({\n tag: \"gx-ide-chat-container\",\n styleUrl: \"chat-container.scss\",\n shadow: false,\n assetsDirs: [\"gx-ide-assets/chat-container\"]\n})\nexport class GxIdeChatContainer {\n #menuItems: ActionMenuModel = [\n { type: \"slot\", id: \"delete-chat-button\" },\n { type: \"slot\", id: \"copy-chat-button\" }\n ];\n\n /*\n The component hard-coded strings translations.\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n @Element() el: HTMLGxIdeChatContainerElement;\n\n /\n Coneration Copied\n /\n @State() displayConversationCopiedMessage: boolean = false;\n\n /\n Displays or hides the menu\n /\n @State() menuIsExpanded: boolean = false;\n\n /\n The chat title\n /\n @Prop() readonly chatTitle?: string;\n\n /\n If true a button for copying the conversation will be render on the header\n /\n @Prop() readonly copyConversationCallback: () => void;\n\n /\n If true a button for deleting the conversation will be render on the header\n /\n @Prop() readonly deleteConversationCallback: () => void;\n\n /\n If true a the welcome screen will be rendered\n /\n @Prop() readonly displayWelcomeScreen: boolean = false;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n /\n It will display a feedback message that the conversation has been copied\n /\n @Method()\n async showCopyConversationMessage() {\n this.displayConversationCopiedMessage = true;\n setTimeout(() => {\n this.displayConversationCopiedMessage = false;\n }, 2000);\n }\n\n #showMenuHandler = () => {\n this.menuIsExpanded = true;\n };\n\n #menuExpandedChangeHandler = (event: CustomEvent<boolean>) => {\n this.menuIsExpanded = event.detail;\n };\n\n #copyConversationHandler = () => {\n if (this.copyConversationCallback) {\n this.copyConversationCallback();\n this.menuIsExpanded = false;\n }\n };\n #deleteConversationHandler = () => {\n if (this.deleteConversationCallback) {\n this.deleteConversationCallback();\n this.menuIsExpanded = false;\n }\n };\n\n render() {\n const renderHeader =\n this.chatTitle \|\|\n this.copyConversationCallback \|\|\n this.deleteConversationCallback;\n\n const renderButtonsGroup =\n this.copyConversationCallback \|\| this.deleteConversationCallback;\n return (\n <Host\n class={{\n \"chat-container\": true,\n \"with-header\": !!renderHeader\n }}\n >\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <ch-theme model={CSS_BUNDLE_CHAT_LIT}></ch-theme>\n <section class=\"section\">\n {renderHeader && (\n <header class=\"header tiny-semi-bold-l\">\n {this.chatTitle && this.chatTitle}\n {renderButtonsGroup && (\n <ch-action-menu-render\n class=\"dropdown\"\n blockAlign=\"inside-start\"\n inlineAlign=\"inside-end\"\n model={this.#menuItems}\n expanded={this.menuIsExpanded}\n onExpandedChange={this.#menuExpandedChangeHandler}\n >\n <button\n class=\"button-tertiary button-icon-only\"\n onClick={this.#showMenuHandler}\n type=\"button\"\n aria-label={this.#componentLocale.showMenuAriaLabel}\n title={this.#componentLocale.showMenuAriaLabel}\n >\n <ch-image\n class=\"icon-md\"\n src={MORE_HORIZONTAL_ICON}\n ></ch-image>\n </button>\n {this.copyConversationCallback && (\n <button\n class=\"button-tertiary button-icon-and-text button-copy-chat\"\n slot=\"copy-chat-button\"\n onClick={this.#copyConversationHandler}\n type=\"button\"\n aria-label={\n this.#componentLocale.copyConversationAriaLabel\n }\n title={this.#componentLocale.copyConversationAriaLabel}\n >\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n {this.#componentLocale.copyConversationLabel}\n </button>\n )}\n {this.deleteConversationCallback && (\n <button\n class=\"button-tertiary button-icon-and-text button-delete-chat\"\n slot=\"delete-chat-button\"\n onClick={this.#deleteConversationHandler}\n type=\"button\"\n aria-label={\n this.#componentLocale.deleteConversationAriaLabel\n }\n title={this.#componentLocale.deleteConversationAriaLabel}\n >\n <ch-image class=\"icon-md\" src={DELETE_ICON}></ch-image>\n {this.#componentLocale.clearConversationLabel}\n </button>\n )}\n </ch-action-menu-render>\n )}\n </header>\n )}\n <section class=\"ch-chat-container\">\n <slot></slot>\n {this.displayConversationCopiedMessage && (\n <div class=\"chat-container__conversation-copied\">\n <div class=\"chat-container__conversation-copied-wrapper\">\n <ch-image class=\"icon-md\" src={CONVERSATION_ICON}></ch-image>\n <p class=\"body-regular-l\">conversation copied</p>\n </div>\n </div>\n )}\n </section>\n {/ <footer class=\"footer elevation-1\">footer</footer> */}\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"chat-container.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,0oEAA0oE;;;;;;;;;;;;;;;;;;;ACcnqE,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,iBAAiB;IACjB,iBAAiB;CAClB,CAAC;AAEF,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AACH,MAAM,WAAW,GAAG,WAAW,CAAC;IAC9B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,iBAAiB;IACvB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC;IACpC,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAC;AACH,MAAM,oBAAoB,GAAG,WAAW,CAAC;IACvC,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,iBAAiB;IACvB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;MAQU,kBAAkB;;;;QAC7B,wCAA8B;YAC5B,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,oBAAoB,EAAE;YAC1C,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,kBAAkB,EAAE;SACzC,EAAC;;;;;QAMF,sDAAsB;QAiDtB,8CAAmB;YACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B,EAAC;QAEF,wDAA6B,CAAC,KAA2B;YACvD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;SACpC,EAAC;QAEF,sDAA2B;YACzB,IAAI,IAAI,CAAC,wBAAwB,EAAE;gBACjC,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,EAAC;QACF,wDAA6B;YAC3B,IAAI,IAAI,CAAC,0BAA0B,EAAE;gBACnC,IAAI,CAAC,0BAA0B,EAAE,CAAC;gBAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,EAAC;gDA7DmD,KAAK;8BAKvB,KAAK;;;;oCAoBS,KAAK;;IAEtD,MAAM,iBAAiB;QACrB,uBAAA,IAAI,uCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;KACnE;;;;IAMD,MAAM,2BAA2B;QAC/B,IAAI,CAAC,gCAAgC,GAAG,IAAI,CAAC;QAC7C,UAAU,CAAC;YACT,IAAI,CAAC,gCAAgC,GAAG,KAAK,CAAC;SAC/C,EAAE,IAAI,CAAC,CAAC;KACV;IAuBD,MAAM;QACJ,MAAM,YAAY,GAChB,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,wBAAwB;YAC7B,IAAI,CAAC,0BAA0B,CAAC;QAElC,MAAM,kBAAkB,GACtB,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,0BAA0B,CAAC;QACnE,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,aAAa,EAAE,CAAC,CAAC,YAAY;aAC9B,IAED,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,SAAS,IACrB,YAAY,KACX,cAAQ,KAAK,EAAC,yBAAyB,IACpC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAChC,kBAAkB,KACjB,6BACE,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,cAAc,EACzB,WAAW,EAAC,YAAY,EACxB,KAAK,EAAE,uBAAA,IAAI,qCAAW,EACtB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,gBAAgB,EAAE,uBAAA,IAAI,qDAA2B,IAEjD,cACE,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE,uBAAA,IAAI,2CAAiB,EAC9B,IAAI,EAAC,QAAQ,gBACD,uBAAA,IAAI,2CAAiB,CAAC,iBAAiB,EACnD,KAAK,EAAE,uBAAA,IAAI,2CAAiB,CAAC,iBAAiB,IAE9C,gBACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,oBAAoB,GACf,CACL,EACR,IAAI,CAAC,wBAAwB,KAC5B,cACE,KAAK,EAAC,uDAAuD,EAC7D,IAAI,EAAC,kBAAkB,EACvB,OAAO,EAAE,uBAAA,IAAI,mDAAyB,EACtC,IAAI,EAAC,QAAQ,gBAEX,uBAAA,IAAI,2CAAiB,CAAC,yBAAyB,EAEjD,KAAK,EAAE,uBAAA,IAAI,2CAAiB,CAAC,yBAAyB,IAEtD,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,SAAS,GAAa,EACpD,uBAAA,IAAI,2CAAiB,CAAC,qBAAqB,CACrC,CACV,EACA,IAAI,CAAC,0BAA0B,KAC9B,cACE,KAAK,EAAC,yDAAyD,EAC/D,IAAI,EAAC,oBAAoB,EACzB,OAAO,EAAE,uBAAA,IAAI,qDAA2B,EACxC,IAAI,EAAC,QAAQ,gBAEX,uBAAA,IAAI,2CAAiB,CAAC,2BAA2B,EAEnD,KAAK,EAAE,uBAAA,IAAI,2CAAiB,CAAC,2BAA2B,IAExD,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,GAAa,EACtD,uBAAA,IAAI,2CAAiB,CAAC,sBAAsB,CACtC,CACV,CACqB,CACzB,CACM,CACV,EACD,eAAS,KAAK,EAAC,mBAAmB,IAChC,eAAa,EACZ,IAAI,CAAC,gCAAgC,KACpC,WAAK,KAAK,EAAC,qCAAqC,IAC9C,WAAK,KAAK,EAAC,6CAA6C,IACtD,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,iBAAiB,GAAa,EAC7D,SAAG,KAAK,EAAC,gBAAgB,0BAAwB,CAC7C,CACF,CACP,CACO,CAEF,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/chat/chat-container/chat-container.scss?tag=gx-ide-chat-container","src/components/chat/chat-container/chat-container.tsx"],"sourcesContent":[".chat-container {\n background-color: var(\n --elevation-background-color,\n --mer-surface__elevation--01\n );\n display: grid;\n block-size: 100%;\n overflow: auto;\n grid-template-rows: 1fr;\n position: relative;\n --chat-common-border-radius: var(--mer-spacing--2xs);\n}\n\n.chat-container.with-header {\n grid-template-rows: max-content 1fr;\n}\n\n.section {\n display: contents;\n}\n\n.header {\n padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs)\n var(--mer-spacing--2xs) var(--mer-spacing--sm);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--mer-spacing--sm);\n color: var(--mer-text__bright);\n border-block-end: var(--mer-border__width--sm) solid\n var(--color-border-surface-on-elevation-01, #333d47);\n\n .button-copy-chat,\n .button-delete-chat {\n --control__border-color: transparent !important;\n }\n\n .button-delete-chat {\n &:hover {\n filter: brightness(1.3);\n }\n &:active {\n filter: brightness(0.8);\n }\n }\n}\n\n.ch-chat-container {\n overflow: auto;\n position: relative;\n display: grid;\n}\n\n// - - - - - - - - - - - - - -\n// other\n// - - - - - - - - - - - - - -\n\n.chat-container__conversation-copied {\n position: absolute;\n z-index: 1;\n inline-size: 100%;\n block-size: 100%;\n background: rgba(22, 22, 23, 0.75);\n backdrop-filter: saturate(180%) blur(20px);\n display: grid;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 32px;\n --mer-icon__box--md: 18px;\n pointer-events: none;\n overflow: hidden;\n animation: fadeIn 100ms ease-in-out forwards;\n opacity: 0;\n}\n\n.chat-container__conversation-copied-wrapper {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n position: relative;\n inset-block-start: 4px;\n opacity: 0;\n animation: liftUp var(--mer-timing--fast) ease-in-out forwards;\n animation-delay: var(--mer-timing--fast);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes liftUp {\n from {\n opacity: 0;\n inset-block-start: 4px;\n }\n to {\n opacity: 1;\n inset-block-start: 0;\n }\n}\n\n// The following styles shoul be moved over to Mercury\n\n.chat::part(code-block-header__copy) {\n --copy-text-opacity: 0;\n --copy-text-translate-x: 6px;\n opacity: var(--copy-text-opacity);\n pointer-events: none;\n transform: translateX(var(--copy-text-translate-x));\n transition:\n opacity 100ms ease-in-out,\n transform 100ms ease-in-out;\n font-size: 12px;\n}\n.chat::part(code-block-header__copy-copied) {\n --copy-button-pointer-events: none !important;\n --copy-text-opacity: 1;\n --copy-text-translate-x: 0;\n}\n.chat::part(code-block-header) {\n align-items: center;\n display: flex;\n gap: 8px;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Method,\n State\n} from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { ActionMenuModel } from \"@genexus/chameleon-controls-library\";\n\nimport { Locale } from \"../../../common/locale\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"chameleon/scrollbar\",\n \"components/button\",\n \"components/dropdown\",\n \"components/icon\",\n \"utils/elevation\"\n];\n\nconst COPY_ICON = getIconPath({\n category: \"system\",\n name: \"copy\",\n colorType: \"primary\"\n});\nconst DELETE_ICON = getIconPath({\n category: \"system\",\n name: \"delete-outlined\",\n colorType: \"primary\"\n});\nconst CONVERSATION_ICON = getIconPath({\n category: \"objects\",\n name: \"conversational-flows\"\n});\nconst MORE_HORIZONTAL_ICON = getIconPath({\n category: \"system\",\n name: \"more-horizontal\",\n colorType: \"neutral\"\n});\n\n@Component({\n tag: \"gx-ide-chat-container\",\n styleUrl: \"chat-container.scss\",\n shadow: false,\n assetsDirs: [\"gx-ide-assets/chat-container\"]\n})\nexport class GxIdeChatContainer {\n #menuItems: ActionMenuModel = [\n { type: \"slot\", id: \"delete-chat-button\" },\n { type: \"slot\", id: \"copy-chat-button\" }\n ];\n\n /*\n The component hard-coded strings translations.\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n @Element() el: HTMLGxIdeChatContainerElement;\n\n /\n Coneration Copied\n /\n @State() displayConversationCopiedMessage: boolean = false;\n\n /\n Displays or hides the menu\n /\n @State() menuIsExpanded: boolean = false;\n\n /\n The chat title\n /\n @Prop() readonly chatTitle?: string;\n\n /\n If true a button for copying the conversation will be render on the header\n /\n @Prop() readonly copyConversationCallback: () => void;\n\n /\n If true a button for deleting the conversation will be render on the header\n /\n @Prop() readonly deleteConversationCallback: () => void;\n\n /\n If true a the welcome screen will be rendered\n /\n @Prop() readonly displayWelcomeScreen: boolean = false;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n /\n It will display a feedback message that the conversation has been copied\n /\n @Method()\n async showCopyConversationMessage() {\n this.displayConversationCopiedMessage = true;\n setTimeout(() => {\n this.displayConversationCopiedMessage = false;\n }, 2000);\n }\n\n #showMenuHandler = () => {\n this.menuIsExpanded = true;\n };\n\n #menuExpandedChangeHandler = (event: CustomEvent<boolean>) => {\n this.menuIsExpanded = event.detail;\n };\n\n #copyConversationHandler = () => {\n if (this.copyConversationCallback) {\n this.copyConversationCallback();\n this.menuIsExpanded = false;\n }\n };\n #deleteConversationHandler = () => {\n if (this.deleteConversationCallback) {\n this.deleteConversationCallback();\n this.menuIsExpanded = false;\n }\n };\n\n render() {\n const renderHeader =\n this.chatTitle \|\|\n this.copyConversationCallback \|\|\n this.deleteConversationCallback;\n\n const renderButtonsGroup =\n this.copyConversationCallback \|\| this.deleteConversationCallback;\n return (\n <Host\n class={{\n \"chat-container\": true,\n \"with-header\": !!renderHeader\n }}\n >\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"section\">\n {renderHeader && (\n <header class=\"header tiny-semi-bold-l\">\n {this.chatTitle && this.chatTitle}\n {renderButtonsGroup && (\n <ch-action-menu-render\n class=\"dropdown\"\n blockAlign=\"inside-start\"\n inlineAlign=\"inside-end\"\n model={this.#menuItems}\n expanded={this.menuIsExpanded}\n onExpandedChange={this.#menuExpandedChangeHandler}\n >\n <button\n class=\"button-tertiary button-icon-only\"\n onClick={this.#showMenuHandler}\n type=\"button\"\n aria-label={this.#componentLocale.showMenuAriaLabel}\n title={this.#componentLocale.showMenuAriaLabel}\n >\n <ch-image\n class=\"icon-md\"\n src={MORE_HORIZONTAL_ICON}\n ></ch-image>\n </button>\n {this.copyConversationCallback && (\n <button\n class=\"button-tertiary button-icon-and-text button-copy-chat\"\n slot=\"copy-chat-button\"\n onClick={this.#copyConversationHandler}\n type=\"button\"\n aria-label={\n this.#componentLocale.copyConversationAriaLabel\n }\n title={this.#componentLocale.copyConversationAriaLabel}\n >\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n {this.#componentLocale.copyConversationLabel}\n </button>\n )}\n {this.deleteConversationCallback && (\n <button\n class=\"button-tertiary button-icon-and-text button-delete-chat\"\n slot=\"delete-chat-button\"\n onClick={this.#deleteConversationHandler}\n type=\"button\"\n aria-label={\n this.#componentLocale.deleteConversationAriaLabel\n }\n title={this.#componentLocale.deleteConversationAriaLabel}\n >\n <ch-image class=\"icon-md\" src={DELETE_ICON}></ch-image>\n {this.#componentLocale.clearConversationLabel}\n </button>\n )}\n </ch-action-menu-render>\n )}\n </header>\n )}\n <section class=\"ch-chat-container\">\n <slot></slot>\n {this.displayConversationCopiedMessage && (\n <div class=\"chat-container__conversation-copied\">\n <div class=\"chat-container__conversation-copied-wrapper\">\n <ch-image class=\"icon-md\" src={CONVERSATION_ICON}></ch-image>\n <p class=\"body-regular-l\">conversation copied</p>\n </div>\n </div>\n )}\n </section>\n {/ <footer class=\"footer elevation-1\">footer</footer> */}\n </section>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/chat-welcome.js CHANGED Viewed

@@ -1,5 +1,8 @@
 import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getIconPath } from './MERCURY_ASSETS.js';
+import { g as getIconPath } from './mer-animated-dots.js';
+import 'lit';
+import 'lit/directives/when.js';
+import 'lit/directives/if-defined.js';
 import { L as Locale } from './locale.js';
 const chatWelcomeCss = ":host{block-size:100%}.welcome-container{--opacity:1;--translate-y:0;opacity:var(--opacity);transform:translateY(var(--translate-y));transition:all var(--transition-duration);display:flex;block-size:100%;grid-template-rows:max-content max-content;flex-direction:column;justify-content:space-between;background-repeat:no-repeat;background-size:cover;background-size:contain}.welcome-container.hidden{--opacity:0;--translate-y:4px}.header{--opacity:0;--translate-y:3px;transition:all var(--transition-duration) var(--transition-delay) cubic-bezier(0.4, 0, 0.2, 1);transform:translateY(var(--translate-y));opacity:var(--opacity);display:flex;flex-direction:column;gap:var(--mer-spacing--md);align-items:center;padding:var(--mer-spacing--md)}.header--visible{--opacity:1;--translate-y:0}.header__circle{inline-size:55px;block-size:55px;background-size:contain;background-repeat:no-repeat;background-position:center center;margin-block-end:-6px}.header__title{display:grid;text-align:center;margin:0;text-align:center;white-space:pre-line;line-height:1.3;font-weight:600;font-size:var(--font-size-header-h3)}.header__greeting{line-height:1.4;text-align:center;font-weight:300}.suggested-prompts{--opacity:1;opacity:var(--opacity);transition:opacity var(--transition-duration);display:flex;flex-direction:column;gap:var(--mer-spacing--md);list-style:none;margin:0;padding:var(--mer-spacing--md)}.suggested-prompts.hidden{--opacity:0}.suggested-prompts__button{opacity:0;transform:translateX(-3px);animation:fadeInSuggestedPromptButton var(--mer-timing--regular) ease forwards;animation-delay:var(--delay, 0s);border:0;padding:var(--mer-spacing--sm);border-radius:44px;font-size:14px;font-style:oblique;cursor:pointer;display:flex;align-items:center;gap:var(--mer-spacing--xs);background-color:#22334a;font-weight:100;max-inline-size:300px}.suggested-prompts__button:hover{background-color:#1a2b42}.suggested-prompts__icon{flex-shrink:0}@keyframes fadeInSuggestedPromptButton{from{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:translateX(0)}}";

package/dist/components/chat-welcome.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"chat-welcome.js","mappings":"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","names":[],"sources":["src/components/chat/chat-welcome/chat-welcome.scss?tag=gx-ide-chat-welcome&encapsulation=shadow","src/components/chat/chat-welcome/chat-welcome.tsx"],"sourcesContent":[":host {\n block-size: 100%;\n}\n\n$sharedPadding: var(--mer-spacing--md);\n\n.welcome-container {\n --opacity: 1;\n --translate-y: 0;\n opacity: var(--opacity);\n transform: translateY(var(--translate-y));\n transition: all var(--transition-duration);\n display: flex;\n block-size: 100%;\n grid-template-rows: max-content max-content;\n flex-direction: column;\n justify-content: space-between;\n background-repeat: no-repeat;\n background-size: cover;\n background-size: contain;\n\n &.hidden {\n --opacity: 0;\n --translate-y: 4px;\n }\n}\n\n%absolute-centered {\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n}\n\n.header {\n --opacity: 0;\n --translate-y: 3px;\n transition: all var(--transition-duration) var(--transition-delay)\n cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateY(var(--translate-y));\n opacity: var(--opacity);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n align-items: center;\n padding: $sharedPadding;\n\n &--visible {\n --opacity: 1;\n --translate-y: 0;\n }\n\n &__circle {\n $circleSize: 55px;\n inline-size: $circleSize;\n block-size: $circleSize;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin-block-end: -6px;\n }\n\n &__title {\n display: grid;\n text-align: center;\n margin: 0;\n text-align: center;\n white-space: pre-line;\n line-height: 1.3;\n font-weight: 600;\n font-size: var(--font-size-header-h3);\n }\n\n &__greeting {\n line-height: 1.4;\n text-align: center;\n font-weight: 300;\n }\n}\n\n.suggested-prompts {\n --opacity: 1;\n opacity: var(--opacity);\n transition: opacity var(--transition-duration);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n list-style: none;\n margin: 0;\n padding: $sharedPadding;\n\n &.hidden {\n --opacity: 0;\n }\n\n &__item {\n }\n\n &__button {\n opacity: 0;\n transform: translateX(-3px);\n animation: fadeInSuggestedPromptButton var(--mer-timing--regular) ease\n forwards;\n animation-delay: var(--delay, 0s);\n\n border: 0;\n padding: var(--mer-spacing--sm);\n border-radius: 44px; // Works with up to a a four lines button\n font-size: 14px; // TODO : Use a token when available\n font-style: oblique;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--xs);\n background-color: #22334a; // TODO : Use a token when available\n font-weight: 100;\n max-inline-size: 300px;\n\n &:hover {\n background-color: #1a2b42;\n }\n }\n\n &__icon {\n flex-shrink: 0;\n }\n}\n\n@keyframes fadeInSuggestedPromptButton {\n from {\n opacity: 0;\n transform: translateX(-3px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","/* eslint-disable @stencil-community/strict-mutable /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n getAssetPath,\n Method\n} from \"@stencil/core\";\nimport { getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\n\nconst HEADER_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/chat-welcome/images/header-illustration.svg`\n);\nconst AI_AVATAR = getAssetPath(\n `./gx-ide-assets/chat-welcome/images/ai-avatar-welcome.svg`\n);\n\nconst HEADER_TRANSITION_DELAY: number = 100;\nconst HEADER_TRANSITION_DURATION: number = 500;\nconst SUGGESTED_PROMPT_BUTTON_INTERVAL: number = 200;\nconst SUGGESTED_PROMPT_BUTTONS_DELAY: number = 500;\nconst WELCOME_EXIT_DURATION: number = 100;\n\nconst AI_ICON = getIconPath({\n category: \"system\",\n name: \"assistant\",\n colorType: \"primary\"\n});\nconst ARROW_RIGHT_ICON = getIconPath({\n category: \"system\",\n name: \"arrow-right\",\n colorType: \"primary\"\n});\n\nconst CSS_BUNDLES = [\n \"resets/box-sizing\",\n \"components/icon\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-chat-welcome\",\n styleUrl: \"chat-welcome.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/chat-welcome\"]\n})\nexport class GxIdeChatWelcome {\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n @Element() el: HTMLGxIdeChatWelcomeElement;\n\n /\n When true, it will display the welcome elements (title, greeting, and buttons)\n /\n @State() showHeader: boolean = false;\n\n /\n When true, it will display the suggested prompts buttons\n /\n @State() showSuggestedPrompts: boolean = false;\n\n /\n When true, it will hide entire welcome layout\n /\n @State() hideWelcome: boolean = false;\n\n /\n The welcome title, if not provided, the default title will be used.\n /\n @Prop({ mutable: true }) welcomeTitle?: string;\n\n /\n The welcome greeting description, if not provided, the default title will be used.\n /\n @Prop({ mutable: true }) welcomeGreeting?: string;\n\n /\n The suggested prompts, if not provided, the default title will be used.\n /\n @Prop({ mutable: true }) suggestedPrompts?: string[];\n\n /\n Fired when the user clicks on a suggested prompt button\n /\n @Prop() readonly suggestedPrompRequestedCallback: (\n prompt: string\n ) => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n // Set defaults\n if (!this.welcomeTitle) {\n this.welcomeTitle = this.#componentLocale.welcomeTitle;\n }\n if (!this.welcomeGreeting) {\n this.welcomeGreeting = this.#componentLocale.welcomeGreeting;\n }\n if (!this.suggestedPrompts) {\n this.suggestedPrompts = this.#componentLocale.suggestedPrompts;\n }\n }\n\n componentDidRender() {\n if (!this.hideWelcome) {\n this.#animationEntrance();\n }\n }\n\n /\n It will exit the wellcome screen and remove it from the dom.\n /\n @Method()\n async exitWelcome() {\n this.#animationExit();\n }\n\n #animationEntrance = () => {\n setTimeout(() => {\n this.showHeader = true;\n setTimeout(() => {\n this.showSuggestedPrompts = true;\n }, SUGGESTED_PROMPT_BUTTONS_DELAY);\n }, HEADER_TRANSITION_DELAY + HEADER_TRANSITION_DURATION);\n };\n\n #sendPromptToChat = async (e: MouseEvent) => {\n const prompt = (e.currentTarget as HTMLButtonElement).dataset[\"prommpt\"];\n await this.#animationExit();\n this.suggestedPrompRequestedCallback(prompt);\n };\n\n #animationExit = async (): Promise<void> => {\n this.hideWelcome = true;\n await new Promise(resolve => setTimeout(resolve, WELCOME_EXIT_DURATION));\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div\n class={{ \"welcome-container\": true, \"hidden\": this.hideWelcome }}\n style={{\n \"backgroundImage\": `url(${HEADER_ILLUSTRATION})`,\n \"--transition-duration\": `${WELCOME_EXIT_DURATION}ms`\n }}\n >\n <header\n class={{ \"header\": true, \"header--visible\": this.showHeader }}\n style={{\n \"--transition-delay\": `${HEADER_TRANSITION_DELAY}ms`,\n \"--transition-duration\": `${HEADER_TRANSITION_DURATION}ms`\n }}\n >\n <span\n class=\"header__circle\"\n style={{ backgroundImage: `url(${AI_AVATAR})` }}\n ></span>\n <h2 class=\"header__title\">{this.welcomeTitle}</h2>\n <p class=\"header__greeting\">{this.welcomeGreeting}</p>\n </header>\n\n {this.suggestedPrompts && this.showSuggestedPrompts && (\n <ul class=\"suggested-prompts\">\n {this.suggestedPrompts.map((prompt, i) => (\n <li class=\"suggested-prompts__item\">\n <button\n class={{\n \"suggested-prompts__button\": true\n }}\n onClick={this.#sendPromptToChat}\n style={{\n \"--delay\": `${SUGGESTED_PROMPT_BUTTON_INTERVAL i}ms`\n }}\n data-prommpt={prompt}\n >\n <ch-image\n src={AI_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n {prompt}\n <ch-image\n src={ARROW_RIGHT_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n </button>\n </li>\n ))}\n </ul>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"chat-welcome.js","mappings":"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","names":[],"sources":["src/components/chat/chat-welcome/chat-welcome.scss?tag=gx-ide-chat-welcome&encapsulation=shadow","src/components/chat/chat-welcome/chat-welcome.tsx"],"sourcesContent":[":host {\n block-size: 100%;\n}\n\n$sharedPadding: var(--mer-spacing--md);\n\n.welcome-container {\n --opacity: 1;\n --translate-y: 0;\n opacity: var(--opacity);\n transform: translateY(var(--translate-y));\n transition: all var(--transition-duration);\n display: flex;\n block-size: 100%;\n grid-template-rows: max-content max-content;\n flex-direction: column;\n justify-content: space-between;\n background-repeat: no-repeat;\n background-size: cover;\n background-size: contain;\n\n &.hidden {\n --opacity: 0;\n --translate-y: 4px;\n }\n}\n\n%absolute-centered {\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n}\n\n.header {\n --opacity: 0;\n --translate-y: 3px;\n transition: all var(--transition-duration) var(--transition-delay)\n cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateY(var(--translate-y));\n opacity: var(--opacity);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n align-items: center;\n padding: $sharedPadding;\n\n &--visible {\n --opacity: 1;\n --translate-y: 0;\n }\n\n &__circle {\n $circleSize: 55px;\n inline-size: $circleSize;\n block-size: $circleSize;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin-block-end: -6px;\n }\n\n &__title {\n display: grid;\n text-align: center;\n margin: 0;\n text-align: center;\n white-space: pre-line;\n line-height: 1.3;\n font-weight: 600;\n font-size: var(--font-size-header-h3);\n }\n\n &__greeting {\n line-height: 1.4;\n text-align: center;\n font-weight: 300;\n }\n}\n\n.suggested-prompts {\n --opacity: 1;\n opacity: var(--opacity);\n transition: opacity var(--transition-duration);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n list-style: none;\n margin: 0;\n padding: $sharedPadding;\n\n &.hidden {\n --opacity: 0;\n }\n\n &__item {\n }\n\n &__button {\n opacity: 0;\n transform: translateX(-3px);\n animation: fadeInSuggestedPromptButton var(--mer-timing--regular) ease\n forwards;\n animation-delay: var(--delay, 0s);\n\n border: 0;\n padding: var(--mer-spacing--sm);\n border-radius: 44px; // Works with up to a a four lines button\n font-size: 14px; // TODO : Use a token when available\n font-style: oblique;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--xs);\n background-color: #22334a; // TODO : Use a token when available\n font-weight: 100;\n max-inline-size: 300px;\n\n &:hover {\n background-color: #1a2b42;\n }\n }\n\n &__icon {\n flex-shrink: 0;\n }\n}\n\n@keyframes fadeInSuggestedPromptButton {\n from {\n opacity: 0;\n transform: translateX(-3px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","/* eslint-disable @stencil-community/strict-mutable /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n getAssetPath,\n Method\n} from \"@stencil/core\";\nimport { getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\n\nconst HEADER_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/chat-welcome/images/header-illustration.svg`\n);\nconst AI_AVATAR = getAssetPath(\n `./gx-ide-assets/chat-welcome/images/ai-avatar-welcome.svg`\n);\n\nconst HEADER_TRANSITION_DELAY: number = 100;\nconst HEADER_TRANSITION_DURATION: number = 500;\nconst SUGGESTED_PROMPT_BUTTON_INTERVAL: number = 200;\nconst SUGGESTED_PROMPT_BUTTONS_DELAY: number = 500;\nconst WELCOME_EXIT_DURATION: number = 100;\n\nconst AI_ICON = getIconPath({\n category: \"system\",\n name: \"assistant\",\n colorType: \"primary\"\n});\nconst ARROW_RIGHT_ICON = getIconPath({\n category: \"system\",\n name: \"arrow-right\",\n colorType: \"primary\"\n});\n\nconst CSS_BUNDLES = [\n \"resets/box-sizing\",\n \"components/icon\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-chat-welcome\",\n styleUrl: \"chat-welcome.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/chat-welcome\"]\n})\nexport class GxIdeChatWelcome {\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n @Element() el: HTMLGxIdeChatWelcomeElement;\n\n /\n When true, it will display the welcome elements (title, greeting, and buttons)\n /\n @State() showHeader: boolean = false;\n\n /\n When true, it will display the suggested prompts buttons\n /\n @State() showSuggestedPrompts: boolean = false;\n\n /\n When true, it will hide entire welcome layout\n /\n @State() hideWelcome: boolean = false;\n\n /\n The welcome title, if not provided, the default title will be used.\n /\n @Prop({ mutable: true }) welcomeTitle?: string;\n\n /\n The welcome greeting description, if not provided, the default title will be used.\n /\n @Prop({ mutable: true }) welcomeGreeting?: string;\n\n /\n The suggested prompts, if not provided, the default title will be used.\n /\n @Prop({ mutable: true }) suggestedPrompts?: string[];\n\n /\n Fired when the user clicks on a suggested prompt button\n /\n @Prop() readonly suggestedPrompRequestedCallback: (\n prompt: string\n ) => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n // Set defaults\n if (!this.welcomeTitle) {\n this.welcomeTitle = this.#componentLocale.welcomeTitle;\n }\n if (!this.welcomeGreeting) {\n this.welcomeGreeting = this.#componentLocale.welcomeGreeting;\n }\n if (!this.suggestedPrompts) {\n this.suggestedPrompts = this.#componentLocale.suggestedPrompts;\n }\n }\n\n componentDidRender() {\n if (!this.hideWelcome) {\n this.#animationEntrance();\n }\n }\n\n /\n It will exit the wellcome screen and remove it from the dom.\n /\n @Method()\n async exitWelcome() {\n this.#animationExit();\n }\n\n #animationEntrance = () => {\n setTimeout(() => {\n this.showHeader = true;\n setTimeout(() => {\n this.showSuggestedPrompts = true;\n }, SUGGESTED_PROMPT_BUTTONS_DELAY);\n }, HEADER_TRANSITION_DELAY + HEADER_TRANSITION_DURATION);\n };\n\n #sendPromptToChat = async (e: MouseEvent) => {\n const prompt = (e.currentTarget as HTMLButtonElement).dataset[\"prommpt\"];\n await this.#animationExit();\n this.suggestedPrompRequestedCallback(prompt);\n };\n\n #animationExit = async (): Promise<void> => {\n this.hideWelcome = true;\n await new Promise(resolve => setTimeout(resolve, WELCOME_EXIT_DURATION));\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div\n class={{ \"welcome-container\": true, \"hidden\": this.hideWelcome }}\n style={{\n \"backgroundImage\": `url(${HEADER_ILLUSTRATION})`,\n \"--transition-duration\": `${WELCOME_EXIT_DURATION}ms`\n }}\n >\n <header\n class={{ \"header\": true, \"header--visible\": this.showHeader }}\n style={{\n \"--transition-delay\": `${HEADER_TRANSITION_DELAY}ms`,\n \"--transition-duration\": `${HEADER_TRANSITION_DURATION}ms`\n }}\n >\n <span\n class=\"header__circle\"\n style={{ backgroundImage: `url(${AI_AVATAR})` }}\n ></span>\n <h2 class=\"header__title\">{this.welcomeTitle}</h2>\n <p class=\"header__greeting\">{this.welcomeGreeting}</p>\n </header>\n\n {this.suggestedPrompts && this.showSuggestedPrompts && (\n <ul class=\"suggested-prompts\">\n {this.suggestedPrompts.map((prompt, i) => (\n <li class=\"suggested-prompts__item\">\n <button\n class={{\n \"suggested-prompts__button\": true\n }}\n onClick={this.#sendPromptToChat}\n style={{\n \"--delay\": `${SUGGESTED_PROMPT_BUTTON_INTERVAL i}ms`\n }}\n data-prommpt={prompt}\n >\n <ch-image\n src={AI_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n {prompt}\n <ch-image\n src={ARROW_RIGHT_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n </button>\n </li>\n ))}\n </ul>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/entity-selector.js CHANGED Viewed

@@ -1,5 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getIconPath } from './MERCURY_ASSETS.js';
+import { g as getIconPath } from './mer-animated-dots.js';
+import 'lit';
+import 'lit/directives/when.js';
+import 'lit/directives/if-defined.js';
 import { L as Locale } from './locale.js';
 const entitySelectorCss = ".wrapper{display:grid;grid-template-columns:1fr max-content max-content;gap:var(--mer-spacing--xs);border-radius:var(--control__border-radius);border:var(--control__border-width) var(--control__border-style) var(--control__border-color);padding:var(--control__padding-block) var(--control__padding-inline)}.wrapper:hover{--control__border-color:var(--control__border-color--hover)}.input{--control__padding-block:0;--control__padding-inline:0;--control__border-width:0;--focus__outline-width:0}:host(:focus-within) .wrapper{--control__border-color:var(--focus__outline-color)}:host(.entity-selector--button-has-focus) .wrapper{outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .wrapper{background-color:var(--control__background-color--disabled);border-color:var(--control__border-color--disabled)}";

package/dist/components/entity-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"entity-selector.js","mappings":"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","names":[],"sources":["src/components/_helpers/entity-selector/entity-selector.scss?tag=gx-ide-entity-selector&encapsulation=shadow","src/components/_helpers/entity-selector/entity-selector.tsx"],"sourcesContent":["/wrapper/\n.wrapper {\n display: grid;\n grid-template-columns: 1fr max-content max-content;\n gap: var(--mer-spacing--xs);\n border-radius: var(--control__border-radius);\n border: var(--control__border-width) var(--control__border-style)\n var(--control__border-color);\n padding: var(--control__padding-block) var(--control__padding-inline);\n\n &:hover {\n --control__border-color: var(--control__border-color--hover);\n }\n &:focus {\n }\n}\n/input/\n.input {\n --control__padding-block: 0;\n --control__padding-inline: 0;\n // Remove control border. We want to simulate a input that includes two buttons at the end.\n --control__border-width: 0;\n --focus__outline-width: 0;\n}\n:host(:focus-within) {\n .wrapper {\n --control__border-color: var(--focus__outline-color);\n }\n}\n:host(.entity-selector--button-has-focus) {\n .wrapper {\n outline: none;\n }\n}\n\n:host([disabled]) {\n pointer-events: none;\n .wrapper {\n background-color: var(--control__background-color--disabled);\n border-color: var(--control__border-color--disabled);\n }\n}\n/custom button icon/\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n Event,\n EventEmitter,\n Watch\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\nimport { LabelPosition } from \"../../../common/types\";\nimport { EntityData } from \"../../../common/types\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/edit\",\n \"components/button\",\n \"components/icon\",\n \"utils/form\"\n];\nconst SELECT_DEFAULT_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"show-more-horizontal\",\n colorType: \"primary\"\n});\nconst CLEAR_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"reset\",\n colorType: \"primary\"\n});\n\n@Component({\n tag: \"gx-ide-entity-selector\",\n styleUrl: \"entity-selector.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/entity-selector\"]\n})\nexport class GxIdeEntitySelector {\n #componentLocale: any;\n\n @Element() el: HTMLGxIdeEntitySelectorElement;\n\n /*\n Adds/removes a CSS class on the host. It removes focus-within styles when\n * focus is on a button.\n /\n @State() buttonHasFocus = false;\n\n @State() iconSrc: string = null;\n\n /\n Default value for the component. Used when the 'X' button is pressed.\n /\n @Prop() readonly defaultValue?: EntityData \| null \| undefined;\n\n /\n This attribute lets you specify if the element is disabled.\n /\n @Prop({ reflect: true }) readonly disabled: boolean = false;\n\n /\n The label caption. Only visible if \"labelPosition\" is not \"none\".\n * I no \"labelCaption\" is provided, a generic caption \"Select Entity\" will be provided\n /\n @Prop() readonly labelCaption?: string;\n\n /\n The label position\n /\n @Prop({ reflect: true }) readonly labelPosition?: LabelPosition =\n \"block-start\";\n\n /\n This property specifies the `name` of the control when used in a form.\n /\n @Prop({ reflect: true }) readonly name?: string;\n\n /\n Callback invoked when the action button is pressed. Returns the new value.\n /\n @Prop() readonly selectEntityCallback!: () => Promise<EntityData> \| null;\n\n /\n Value currently assigned.\n /\n @Prop({ mutable: true }) value: EntityData \| null \| undefined;\n @Watch(\"value\")\n valueChangedHandler() {\n this.valueChanged.emit(this.value);\n this.#updateIconSrc();\n }\n\n /\n Emits the input value every time it changes\n */\n @Event() valueChanged: EventEmitter<EntityData>;\n\n // 6.Component Lifecycle Events\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n connectedCallback() {\n this.#updateIconSrc();\n }\n\n #btnClearClickHandler = () => {\n this.value = this.defaultValue;\n this.iconSrc = this.defaultValue?.iconSrc;\n };\n\n #btnSelectClickHandler = () => {\n this.selectEntityCallback().then(result => {\n if (result) {\n this.value = result;\n }\n });\n };\n\n #buttonFocusHandler = (e: FocusEvent) => {\n if (e.type === \"focus\") {\n this.buttonHasFocus = true;\n } else if (e.type === \"blur\") {\n this.buttonHasFocus = false;\n }\n };\n\n #renderControl = (): HTMLDivElement => {\n return (\n <div part=\"wrapper\" class=\"wrapper\">\n <ch-edit\n accessibleName={\n this.labelPosition === \"none\" &&\n this.#componentLocale.entitySelectorInputAccessibleName\n }\n class=\"input\"\n disabled={this.disabled}\n name={this.name \|\| this.#componentLocale.entitySelectorNameAttribute}\n startImgSrc={this.iconSrc}\n readonly\n value={this.value?.name \|\| this.defaultValue?.name}\n id=\"entity-input\"\n ></ch-edit>\n\n <button\n part=\"button-clear\"\n class=\"icon-button\"\n aria-label={this.#componentLocale.clearButtonLabel}\n title={this.#componentLocale.clearButtonLabel}\n type=\"button\"\n disabled={this.disabled}\n onClick={this.#btnClearClickHandler}\n onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n >\n <ch-image\n class=\"icon-md\"\n src={CLEAR_ICON}\n disabled={this.disabled}\n ></ch-image>\n </button>\n\n <button\n class=\"icon-button\"\n aria-label={this.#componentLocale.selectButtonLabel}\n title={this.#componentLocale.selectButtonLabel}\n type=\"button\"\n disabled={!this.selectEntityCallback \|\| this.disabled}\n onClick={this.#btnSelectClickHandler}\n onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n >\n <ch-image\n class=\"icon-md\"\n src={SELECT_DEFAULT_ICON}\n disabled={this.disabled}\n ></ch-image>\n </button>\n </div>\n );\n };\n\n #updateIconSrc = () => {\n if (this.value && this.value.iconSrc) {\n this.iconSrc = this.value.iconSrc;\n }\n };\n\n render() {\n return (\n <Host\n class={{\n \"entity-selector--button-has-focus\": this.buttonHasFocus\n }}\n >\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n {this.labelPosition !== \"none\" ? (\n <div\n class={{\n \"field\": true,\n \"field-block\": this.labelPosition === \"block-start\",\n \"field-inline\": this.labelPosition === \"inline-start\"\n }}\n >\n <label class=\"label\" htmlFor=\"entity-input\">\n {this.labelCaption \|\|\n this.#componentLocale.entitySelectorInputAccessibleName}\n </label>\n {this.#renderControl()}\n </div>\n ) : (\n this.#renderControl()\n )}\n </Host>\n );\n }\n}\n\nexport type EntitySelectorLabels = {\n buttonClearLabel: string;\n buttonSelectLabel: string;\n};\n"],"version":3}
1	+ {"file":"entity-selector.js","mappings":"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","names":[],"sources":["src/components/_helpers/entity-selector/entity-selector.scss?tag=gx-ide-entity-selector&encapsulation=shadow","src/components/_helpers/entity-selector/entity-selector.tsx"],"sourcesContent":["/wrapper/\n.wrapper {\n display: grid;\n grid-template-columns: 1fr max-content max-content;\n gap: var(--mer-spacing--xs);\n border-radius: var(--control__border-radius);\n border: var(--control__border-width) var(--control__border-style)\n var(--control__border-color);\n padding: var(--control__padding-block) var(--control__padding-inline);\n\n &:hover {\n --control__border-color: var(--control__border-color--hover);\n }\n &:focus {\n }\n}\n/input/\n.input {\n --control__padding-block: 0;\n --control__padding-inline: 0;\n // Remove control border. We want to simulate a input that includes two buttons at the end.\n --control__border-width: 0;\n --focus__outline-width: 0;\n}\n:host(:focus-within) {\n .wrapper {\n --control__border-color: var(--focus__outline-color);\n }\n}\n:host(.entity-selector--button-has-focus) {\n .wrapper {\n outline: none;\n }\n}\n\n:host([disabled]) {\n pointer-events: none;\n .wrapper {\n background-color: var(--control__background-color--disabled);\n border-color: var(--control__border-color--disabled);\n }\n}\n/custom button icon/\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n Event,\n EventEmitter,\n Watch\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\nimport { LabelPosition } from \"../../../common/types\";\nimport { EntityData } from \"../../../common/types\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/edit\",\n \"components/button\",\n \"components/icon\",\n \"utils/form\"\n];\nconst SELECT_DEFAULT_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"show-more-horizontal\",\n colorType: \"primary\"\n});\nconst CLEAR_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"reset\",\n colorType: \"primary\"\n});\n\n@Component({\n tag: \"gx-ide-entity-selector\",\n styleUrl: \"entity-selector.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/entity-selector\"]\n})\nexport class GxIdeEntitySelector {\n #componentLocale: any;\n\n @Element() el: HTMLGxIdeEntitySelectorElement;\n\n /*\n Adds/removes a CSS class on the host. It removes focus-within styles when\n * focus is on a button.\n /\n @State() buttonHasFocus = false;\n\n @State() iconSrc: string = null;\n\n /\n Default value for the component. Used when the 'X' button is pressed.\n /\n @Prop() readonly defaultValue?: EntityData \| null \| undefined;\n\n /\n This attribute lets you specify if the element is disabled.\n /\n @Prop({ reflect: true }) readonly disabled: boolean = false;\n\n /\n The label caption. Only visible if \"labelPosition\" is not \"none\".\n * I no \"labelCaption\" is provided, a generic caption \"Select Entity\" will be provided\n /\n @Prop() readonly labelCaption?: string;\n\n /\n The label position\n /\n @Prop({ reflect: true }) readonly labelPosition?: LabelPosition =\n \"block-start\";\n\n /\n This property specifies the `name` of the control when used in a form.\n /\n @Prop({ reflect: true }) readonly name?: string;\n\n /\n Callback invoked when the action button is pressed. Returns the new value.\n /\n @Prop() readonly selectEntityCallback!: () => Promise<EntityData> \| null;\n\n /\n Value currently assigned.\n /\n @Prop({ mutable: true }) value: EntityData \| null \| undefined;\n @Watch(\"value\")\n valueChangedHandler() {\n this.valueChanged.emit(this.value);\n this.#updateIconSrc();\n }\n\n /\n Emits the input value every time it changes\n */\n @Event() valueChanged: EventEmitter<EntityData>;\n\n // 6.Component Lifecycle Events\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n connectedCallback() {\n this.#updateIconSrc();\n }\n\n #btnClearClickHandler = () => {\n this.value = this.defaultValue;\n this.iconSrc = this.defaultValue?.iconSrc;\n };\n\n #btnSelectClickHandler = () => {\n this.selectEntityCallback().then(result => {\n if (result) {\n this.value = result;\n }\n });\n };\n\n #buttonFocusHandler = (e: FocusEvent) => {\n if (e.type === \"focus\") {\n this.buttonHasFocus = true;\n } else if (e.type === \"blur\") {\n this.buttonHasFocus = false;\n }\n };\n\n #renderControl = (): HTMLDivElement => {\n return (\n <div part=\"wrapper\" class=\"wrapper\">\n <ch-edit\n accessibleName={\n this.labelPosition === \"none\" &&\n this.#componentLocale.entitySelectorInputAccessibleName\n }\n class=\"input\"\n disabled={this.disabled}\n name={this.name \|\| this.#componentLocale.entitySelectorNameAttribute}\n startImgSrc={this.iconSrc}\n readonly\n value={this.value?.name \|\| this.defaultValue?.name}\n id=\"entity-input\"\n ></ch-edit>\n\n <button\n part=\"button-clear\"\n class=\"icon-button\"\n aria-label={this.#componentLocale.clearButtonLabel}\n title={this.#componentLocale.clearButtonLabel}\n type=\"button\"\n disabled={this.disabled}\n onClick={this.#btnClearClickHandler}\n onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n >\n <ch-image\n class=\"icon-md\"\n src={CLEAR_ICON}\n disabled={this.disabled}\n ></ch-image>\n </button>\n\n <button\n class=\"icon-button\"\n aria-label={this.#componentLocale.selectButtonLabel}\n title={this.#componentLocale.selectButtonLabel}\n type=\"button\"\n disabled={!this.selectEntityCallback \|\| this.disabled}\n onClick={this.#btnSelectClickHandler}\n onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n >\n <ch-image\n class=\"icon-md\"\n src={SELECT_DEFAULT_ICON}\n disabled={this.disabled}\n ></ch-image>\n </button>\n </div>\n );\n };\n\n #updateIconSrc = () => {\n if (this.value && this.value.iconSrc) {\n this.iconSrc = this.value.iconSrc;\n }\n };\n\n render() {\n return (\n <Host\n class={{\n \"entity-selector--button-has-focus\": this.buttonHasFocus\n }}\n >\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n {this.labelPosition !== \"none\" ? (\n <div\n class={{\n \"field\": true,\n \"field-block\": this.labelPosition === \"block-start\",\n \"field-inline\": this.labelPosition === \"inline-start\"\n }}\n >\n <label class=\"label\" htmlFor=\"entity-input\">\n {this.labelCaption \|\|\n this.#componentLocale.entitySelectorInputAccessibleName}\n </label>\n {this.#renderControl()}\n </div>\n ) : (\n this.#renderControl()\n )}\n </Host>\n );\n }\n}\n\nexport type EntitySelectorLabels = {\n buttonClearLabel: string;\n buttonSelectLabel: string;\n};\n"],"version":3}

package/dist/components/file-item.js CHANGED Viewed

@@ -1,5 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { g as getIconPath } from './MERCURY_ASSETS.js';
+import { g as getIconPath } from './mer-animated-dots.js';
+import 'lit';
+import 'lit/directives/when.js';
+import 'lit/directives/if-defined.js';
 const fileItemCss = ":host{display:block;inline-size:100%}.file-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto;gap:var(--mer-spacing--sm);align-items:center;border:var(--mer-border__width--sm) solid var(--mer-border__default);border-radius:var(--mer-border__radius--sm)}.file-item__icon{display:flex;align-items:center}.file-item__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;inline-size:100%;font-weight:var(--mer-font__weight--regular)}.file-item__name ch-edit{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;inline-size:100%;font-weight:var(--mer-font__weight--regular)}.file-item__name .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;inline-size:100%;font-weight:var(--mer-font__weight--regular)}.file-item__actions{display:flex;gap:var(--mer-spacing--xs)}.file-item__actions button:active,.file-item__actions button:focus,.file-item__actions button:hover{background-color:var(--mer-surface__hover)}.file-item__actions button:active{background-color:var(--mer-surface__pressed)}.file-item__progress-container{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--mer-spacing--2xs);inline-size:100%;border:var(--mer-border__width--md) dashed var(--mer-border-color__dim);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--sm)}.file-item__progress-header{display:flex;justify-content:space-between;align-items:center;gap:var(--mer-spacing--sm)}.file-item__uploading-text{font-style:italic;color:var(--mer-text__complementary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-inline-size:calc(100% - var(--mer-spacing--2xl))}.file-item__progress-bar{inline-size:100%}.file-item__progress-bar progress{inline-size:100%;height:var(--mer-spacing--xs);border:none;border-radius:var(--mer-border__radius--sm);overflow:hidden}.file-item__progress-bar progress::-webkit-progress-bar{background-color:transparent}.file-item__progress-bar progress::-webkit-progress-value{background-color:var(--mer-accent__primary)}.file-item__progress-bar progress::-moz-progress-bar{background-color:var(--mer-accent__primary)}";

package/dist/components/file-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"file-item.js","mappings":"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","names":[],"sources":["src/components/file-uploader/file-item/file-item.scss?tag=gx-ide-file-item&encapsulation=shadow","src/components/file-uploader/file-item/file-item.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n inline-size: 100%;\n}\n\n.file-item {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto;\n gap: var(--mer-spacing--sm);\n align-items: center;\n border: var(--mer-border__width--sm) solid var(--mer-border__default);\n border-radius: var(--mer-border__radius--sm);\n\n &__icon {\n display: flex;\n align-items: center;\n }\n\n &__name {\n @include ellipsis;\n inline-size: 100%;\n font-weight: var(--mer-font__weight--regular);\n\n ch-edit {\n @include ellipsis;\n inline-size: 100%;\n font-weight: var(--mer-font__weight--regular);\n }\n\n .label {\n @include ellipsis;\n inline-size: 100%;\n font-weight: var(--mer-font__weight--regular);\n }\n }\n\n &__actions {\n display: flex;\n gap: var(--mer-spacing--xs);\n\n button {\n &:active,\n &:focus,\n &:hover {\n background-color: var(--mer-surface__hover);\n }\n\n &:active {\n background-color: var(--mer-surface__pressed);\n }\n }\n }\n\n &__progress-container {\n grid-column: 1 / -1;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--2xs);\n inline-size: 100%;\n border: var(--mer-border__width--md) dashed var(--mer-border-color__dim);\n border-radius: var(--mer-border__radius--md);\n padding: var(--mer-spacing--sm);\n }\n\n &__progress-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--mer-spacing--sm);\n }\n\n &__uploading-text {\n font-style: italic;\n color: var(--mer-text__complementary);\n @include ellipsis;\n max-inline-size: calc(100% - var(--mer-spacing--2xl));\n }\n\n &__progress-bar {\n inline-size: 100%;\n\n progress {\n inline-size: 100%;\n height: var(--mer-spacing--xs);\n border: none;\n border-radius: var(--mer-border__radius--sm);\n overflow: hidden;\n\n &::-webkit-progress-bar {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--mer-accent__primary);\n }\n\n &::-moz-progress-bar {\n background-color: var(--mer-accent__primary);\n }\n }\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch\n} from \"@stencil/core\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\nimport { FileUploadState } from \"../types\";\n\nconst FILE_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"file\",\n colorType: \"primary\"\n});\n\nconst EDIT_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"edit\",\n colorType: \"primary\"\n});\n\nconst DELETE_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"delete\",\n colorType: \"primary\"\n});\n\nconst CANCEL_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"close\",\n colorType: \"primary\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"components/icon\",\n \"components/edit\",\n \"utils/typography\",\n \"utils/spacing\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/elevation\"\n];\n\n@Component({\n tag: \"gx-ide-file-item\",\n styleUrl: \"file-item.scss\",\n shadow: true\n})\nexport class FileItem {\n /** File state containing upload information /\n @Prop() readonly file!: FileUploadState;\n\n /* Whether the file name can be edited /\n @Prop() readonly editable: boolean = false;\n\n /* Callback when a file is deleted /\n @Prop() readonly fileDeletedCallback?: (fileId: string) => Promise<void>;\n\n /* Callback when a file deletion error occurs /\n @Prop() readonly fileDeletionErrorCallback?: (data: {\n fileName: string;\n error: string;\n }) => Promise<void>;\n\n /* Updates current name when file prop changes /\n @Watch(\"file\")\n handleFileChange(newFile: FileUploadState) {\n this.currentName = newFile.name;\n }\n\n @State() isEditing: boolean = false;\n @State() currentName: string;\n\n /* Emitted when the file name is changed /\n @Event() fileNameChange: EventEmitter<{ id: string; name: string }>;\n\n /* Emitted when the file is deleted /\n @Event() fileDelete: EventEmitter<string>;\n\n /* Emitted when the file upload is cancelled /\n @Event() fileCancel: EventEmitter<string>;\n\n componentWillLoad() {\n this.currentName = this.file.name;\n }\n\n #handleNameChange = (event: ChEditCustomEvent<string> \| InputEvent) => {\n const newName = (event as CustomEvent<string>).detail;\n\n if (newName && newName !== this.currentName) {\n this.currentName = newName;\n this.fileNameChange.emit({\n id: this.file.id,\n name: newName\n });\n }\n };\n\n #handleBlur = () => {\n this.isEditing = false;\n };\n\n /* Handles file deletion /\n #handleDelete = () => {\n this.fileDelete.emit(this.file.id);\n };\n\n /* Handles upload cancellation /\n #handleCancelClick = (e: MouseEvent) => {\n e.preventDefault();\n this.fileCancel.emit(this.file.id);\n };\n\n /* Starts file name editing */\n #startEditing = () => {\n if (this.editable) {\n this.isEditing = true;\n }\n };\n\n render() {\n return (\n <div class=\"file-item\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div class=\"file-item__icon\">\n <ch-image src={FILE_ICON} class=\"icon-md\" />\n </div>\n\n <div class=\"file-item__name\">\n {this.isEditing ? (\n <ch-edit\n value={this.currentName}\n autoFocus={true}\n onInput={this.#handleNameChange}\n onBlur={this.#handleBlur}\n class=\"input\"\n />\n ) : (\n <label class=\"label\">{this.currentName}</label>\n )}\n </div>\n\n <div class=\"file-item__actions\">\n {!this.file.pending && this.editable && (\n <button\n class=\"button-tertiary button-icon-only\"\n type=\"button\"\n onClick={this.#startEditing}\n >\n <ch-image src={EDIT_ICON} class=\"icon-md\" />\n </button>\n )}\n {!this.file.pending && (\n <button\n class=\"button-tertiary button-icon-only\"\n type=\"button\"\n onClick={this.#handleDelete}\n aria-label=\"Delete file\"\n >\n <ch-image src={DELETE_ICON} class=\"icon-md\" />\n </button>\n )}\n </div>\n\n {this.file.pending && (\n <div class=\"file-item__progress-container\">\n <div class=\"file-item__progress-header\">\n <span class=\"file-item__uploading-text\">\n Uploading {this.currentName}...\n </span>\n <button\n class=\"button-tertiary button-icon-only\"\n type=\"button\"\n onClick={this.#handleCancelClick}\n >\n <ch-image src={CANCEL_ICON} class=\"icon-md\" />\n </button>\n </div>\n <div class=\"file-item__progress-bar\">\n <progress\n class=\"elevation-1\"\n value={this.file.progress}\n max=\"100\"\n />\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"file-item.js","mappings":"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","names":[],"sources":["src/components/file-uploader/file-item/file-item.scss?tag=gx-ide-file-item&encapsulation=shadow","src/components/file-uploader/file-item/file-item.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n inline-size: 100%;\n}\n\n.file-item {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto;\n gap: var(--mer-spacing--sm);\n align-items: center;\n border: var(--mer-border__width--sm) solid var(--mer-border__default);\n border-radius: var(--mer-border__radius--sm);\n\n &__icon {\n display: flex;\n align-items: center;\n }\n\n &__name {\n @include ellipsis;\n inline-size: 100%;\n font-weight: var(--mer-font__weight--regular);\n\n ch-edit {\n @include ellipsis;\n inline-size: 100%;\n font-weight: var(--mer-font__weight--regular);\n }\n\n .label {\n @include ellipsis;\n inline-size: 100%;\n font-weight: var(--mer-font__weight--regular);\n }\n }\n\n &__actions {\n display: flex;\n gap: var(--mer-spacing--xs);\n\n button {\n &:active,\n &:focus,\n &:hover {\n background-color: var(--mer-surface__hover);\n }\n\n &:active {\n background-color: var(--mer-surface__pressed);\n }\n }\n }\n\n &__progress-container {\n grid-column: 1 / -1;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--2xs);\n inline-size: 100%;\n border: var(--mer-border__width--md) dashed var(--mer-border-color__dim);\n border-radius: var(--mer-border__radius--md);\n padding: var(--mer-spacing--sm);\n }\n\n &__progress-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--mer-spacing--sm);\n }\n\n &__uploading-text {\n font-style: italic;\n color: var(--mer-text__complementary);\n @include ellipsis;\n max-inline-size: calc(100% - var(--mer-spacing--2xl));\n }\n\n &__progress-bar {\n inline-size: 100%;\n\n progress {\n inline-size: 100%;\n height: var(--mer-spacing--xs);\n border: none;\n border-radius: var(--mer-border__radius--sm);\n overflow: hidden;\n\n &::-webkit-progress-bar {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--mer-accent__primary);\n }\n\n &::-moz-progress-bar {\n background-color: var(--mer-accent__primary);\n }\n }\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch\n} from \"@stencil/core\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\nimport { FileUploadState } from \"../types\";\n\nconst FILE_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"file\",\n colorType: \"primary\"\n});\n\nconst EDIT_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"edit\",\n colorType: \"primary\"\n});\n\nconst DELETE_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"delete\",\n colorType: \"primary\"\n});\n\nconst CANCEL_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"close\",\n colorType: \"primary\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"components/icon\",\n \"components/edit\",\n \"utils/typography\",\n \"utils/spacing\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/elevation\"\n];\n\n@Component({\n tag: \"gx-ide-file-item\",\n styleUrl: \"file-item.scss\",\n shadow: true\n})\nexport class FileItem {\n /** File state containing upload information /\n @Prop() readonly file!: FileUploadState;\n\n /* Whether the file name can be edited /\n @Prop() readonly editable: boolean = false;\n\n /* Callback when a file is deleted /\n @Prop() readonly fileDeletedCallback?: (fileId: string) => Promise<void>;\n\n /* Callback when a file deletion error occurs /\n @Prop() readonly fileDeletionErrorCallback?: (data: {\n fileName: string;\n error: string;\n }) => Promise<void>;\n\n /* Updates current name when file prop changes /\n @Watch(\"file\")\n handleFileChange(newFile: FileUploadState) {\n this.currentName = newFile.name;\n }\n\n @State() isEditing: boolean = false;\n @State() currentName: string;\n\n /* Emitted when the file name is changed /\n @Event() fileNameChange: EventEmitter<{ id: string; name: string }>;\n\n /* Emitted when the file is deleted /\n @Event() fileDelete: EventEmitter<string>;\n\n /* Emitted when the file upload is cancelled /\n @Event() fileCancel: EventEmitter<string>;\n\n componentWillLoad() {\n this.currentName = this.file.name;\n }\n\n #handleNameChange = (event: ChEditCustomEvent<string> \| InputEvent) => {\n const newName = (event as CustomEvent<string>).detail;\n\n if (newName && newName !== this.currentName) {\n this.currentName = newName;\n this.fileNameChange.emit({\n id: this.file.id,\n name: newName\n });\n }\n };\n\n #handleBlur = () => {\n this.isEditing = false;\n };\n\n /* Handles file deletion /\n #handleDelete = () => {\n this.fileDelete.emit(this.file.id);\n };\n\n /* Handles upload cancellation /\n #handleCancelClick = (e: MouseEvent) => {\n e.preventDefault();\n this.fileCancel.emit(this.file.id);\n };\n\n /* Starts file name editing */\n #startEditing = () => {\n if (this.editable) {\n this.isEditing = true;\n }\n };\n\n render() {\n return (\n <div class=\"file-item\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div class=\"file-item__icon\">\n <ch-image src={FILE_ICON} class=\"icon-md\" />\n </div>\n\n <div class=\"file-item__name\">\n {this.isEditing ? (\n <ch-edit\n value={this.currentName}\n autoFocus={true}\n onInput={this.#handleNameChange}\n onBlur={this.#handleBlur}\n class=\"input\"\n />\n ) : (\n <label class=\"label\">{this.currentName}</label>\n )}\n </div>\n\n <div class=\"file-item__actions\">\n {!this.file.pending && this.editable && (\n <button\n class=\"button-tertiary button-icon-only\"\n type=\"button\"\n onClick={this.#startEditing}\n >\n <ch-image src={EDIT_ICON} class=\"icon-md\" />\n </button>\n )}\n {!this.file.pending && (\n <button\n class=\"button-tertiary button-icon-only\"\n type=\"button\"\n onClick={this.#handleDelete}\n aria-label=\"Delete file\"\n >\n <ch-image src={DELETE_ICON} class=\"icon-md\" />\n </button>\n )}\n </div>\n\n {this.file.pending && (\n <div class=\"file-item__progress-container\">\n <div class=\"file-item__progress-header\">\n <span class=\"file-item__uploading-text\">\n Uploading {this.currentName}...\n </span>\n <button\n class=\"button-tertiary button-icon-only\"\n type=\"button\"\n onClick={this.#handleCancelClick}\n >\n <ch-image src={CANCEL_ICON} class=\"icon-md\" />\n </button>\n </div>\n <div class=\"file-item__progress-bar\">\n <progress\n class=\"elevation-1\"\n value={this.file.progress}\n max=\"100\"\n />\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}