docs: beautiful note box

README.md

@@ -163,7 +163,8 @@ registerCompletion(monaco, editor, {
 });
 ```
 
-> **Note:** The `registerCompletion` function returns a `completion` object with a `deregister` method. This method should be used to clean up the completion functionality when it's no longer needed.
+> [!NOTE]
+> The `registerCompletion` function returns a `completion` object with a `deregister` method. This method should be used to clean up the completion functionality when it's no longer needed.
 > For example, in a React component, you can call `completion.deregister()` within the `useEffect` cleanup function to ensure proper disposal when the component unmounts.
 
 🎉 Congratulations! The AI auto-completion is now connected to the Monaco Editor. Start typing and see completions in the editor.
@@ -188,7 +189,8 @@ registerCompletion(monaco, editor, {
 
 [OnTyping Demo](https://github.com/user-attachments/assets/22c2ce44-334c-4963-b853-01b890b8e39f)
 
-> **Note:** If you prefer real-time completions, you can set the `trigger` option to `'onTyping'`. This may increase the number of requests made to the provider and the cost. This should not be too costly since most small models are very inexpensive.
+> [!NOTE]
+> If you prefer real-time completions, you can set the `trigger` option to `'onTyping'`. This may increase the number of requests made to the provider and the cost. This should not be too costly since most small models are very inexpensive.
 
 ### Manually Trigger Completions
 
@@ -299,7 +301,8 @@ registerCompletion(monaco, editor, {
 });
 ```
 
-> **Note:** If you're using `Groq` as your provider, it's recommended to set `maxContextLines` to `60` or less due to its low rate limits and lack of pay-as-you-go pricing. However, `Groq` is expected to offer pay-as-you-go pricing in the near future.
+> [!NOTE]
+> If you're using `Groq` as your provider, it's recommended to set `maxContextLines` to `60` or less due to its low rate limits and lack of pay-as-you-go pricing. However, `Groq` is expected to offer pay-as-you-go pricing in the near future.
 
 ### Caching Completions
 
@@ -358,7 +361,8 @@ The `requestHandler` function takes an object with `endpoint` and `body` as para
 | `endpoint` | `string` | The endpoint to which the request is sent. This is the same as the `endpoint` in `registerCompletion`. |
 | `body`     | `object` | The body of the request processed by Monacopilot.                                                      |
 
-> **Note:** The `body` object contains properties generated by Monacopilot. If you need to include additional properties in the request body, you can create a new object that combines the existing `body` with your custom properties. For example:
+> [!NOTE]
+> The `body` object contains properties generated by Monacopilot. If you need to include additional properties in the request body, you can create a new object that combines the existing `body` with your custom properties. For example:
 >
 > ```javascript
 > const customBody = {

tests/ui/src/app/page.tsx

@@ -18,7 +18,7 @@ export default function Home() {
 
     const completion = registerCompletion(monaco, editor, {
       endpoint: '/api/complete',
-      language: 'python',
+      language: 'java',
       maxContextLines: 60,
     });
 
@@ -29,7 +29,7 @@ export default function Home() {
 
   return (
     <Editor
-      language="python"
+      language="java"
       onMount={(editor: StandaloneCodeEditor, monaco: Monaco) => {
         setMonaco(monaco);
         setEditor(editor);