Fix images and other minor updates

docs/framework/chat-assistant.mdx

@@ -2,9 +2,9 @@
 title: "Chat assistant"
 ---
 
-In this tutorial, you will use Writer Framework to build an AI chat assistant.
+In this introductory tutorial, you will use Writer Framework to build an AI chat assistant.
 
-[IMAGE: Screenshot of finished project]
+![Finished chat assistant project](/framework/images/tutorial/chat-finished-app.png)
 
 ## Setting up your project
 
@@ -123,15 +123,15 @@ The `Conversation` method is a wrapper for the `chat` API endpoint and can be us
 
 Click on the chatbot component to open up the Component Settings panel. Bind this chatbot to a conversation variable by adding `@{conversation}` in the Conversation Object property under General. This variable will reference the Writer AI SDK. You can also update properties such as the assistant's initials, the user's initials, and whether the chat uses markdown.
 
-![Chatbot conversation object setting](/framework/images/tutorial/chat-conversation-setting.png)
+<img width="250" src="/framework/images/tutorial/chat-conversation-setting.png" alt="Chatbot conversation object setting" />
 
 Finally, attach the handler to the chatbot. In the User Interface, click on the chatbot component to bring up the Component Settings panel. Scroll to the Events section towards the bottom of the pane and choose the `handle_simple_message` handler for the `wf-chatbot-message` event.
 
-![Chatbot event handler settings](/framework/images/tutorial/chat-event-handler.png) 
+<img width="250" src="/framework/images/tutorial/chat-event-handler.png" alt="Chatbot event handler settings" />
 
 After saving and running your code, click the preview button and type something into your chat assistant. You should see the response appear on the screen as it comes back from the assistant. Congratulations!
 
-[IMAGE: Screenshot of finished project]
+![Finished chat assistant project](/framework/images/tutorial/chat-finished-app.png)
 
 
 ## Deploying the application

docs/framework/product-description-generator.mdx

@@ -1,7 +1,6 @@
 ---
 title: "Product description generator"
 ---
-# Writer Framework tutorial: Product Description Generator
 
 In this tutorial, you will use Writer Framework to build a Saturn Snacks product description generator for a variety of food outlets. After adding the initial functionality of the app, you will also extend the app to include a chart of SEO keyword analysis and the ability for users to add their own food outlet.
 
@@ -177,23 +176,23 @@ You can now set up the UI to iterate over the product descriptions dictionary an
 
 Click on the Repeater component to open its component settings. Under Properties, add `@{product_descriptions.outlets}` as the Repeater object to be used for repeating the child components. Replace the default “Key variable name” with `itemID`. You can leave “Value variable name” as `item`. 
 
-![Repeater component settings](/framework/images/tutorial/pdg-repeater-settings.png)
+<img width="250" src="/framework/images/tutorial/pdg-repeater-settings.png" alt="Repeater component settings" />
 
 Next, from the Layout section of the toolkit, drag a Tab component into the Repeater. Click on the Tab to bring up the component settings and add `@{itemID}` to the Name property. This will display the outlet name on the tab. 
 
-![Tab component settings](/framework/images/tutorial/pdg-tab-settings.png)
+<img width="250" src="/framework/images/tutorial/pdg-tab-settings.png" alt="Tab component settings" />
 
 To display the resulting text from the call to the AI module, drag a Text component from the Content section of the Toolkit into the Tab. Click on the Text component to open the Component settings and set the Text property to `@{item}`. You may also choose to set “Use Markdown” to “yes.” 
 
-![Text component settings](/framework/images/tutorial/pdg-text-settings.png)
+<img width="250" src="/framework/images/tutorial/pdg-text-settings.png" alt="Text component settings" />
 
 To control the visibility of the Tab Container, click on the Tab Container to bring up its component settings. Scroll to the bottom and, under Visibility, click “Custom” and add `product_descriptions.visible` to the Visibility value input. 
 
-![Tab Container visibility setting](/framework/images/tutorial/pdg-tab-visibility.png)
+<img width="250" src="/framework/images/tutorial/pdg-tab-visibility.png" alt="Tab Container visibility setting" />
 
 Lastly, to wire up the form, click on the Generate button inside the form to bring up its component settings. In the Events section, select `handle_click` for the `wf-click` event. 
 
-![Button settings](/framework/images/tutorial/pdg-button-settings.png)
+<img width="250" src="/framework/images/tutorial/pdg-button-settings.png" alt="Button settings" />
 
 Now, click Preview in the top toolbar, enter some test data, and click the Generate button. You should see a loading message, as well as three example food outlets displayed in the tabs. The loading message should disappear when everything is loaded, and the tab should remain visible once the data has loaded.
 
@@ -239,7 +238,7 @@ This code sets the loading message and passes all of the product descriptions to
 
 To update the UI to display this chart, first drag a new tab from the Layout section of the toolkit into the Tab Container. This tab should not be inside of the Repeater, but can be either before or after it. Click on the tab to open the component settings, and change the name to “SEO Analysis.” If you'd like, you can also set the Visibility to “Custom” and set `seo_analysis` as the visibility value. 
 
-![SEO analysis tab settings](/framework/images/tutorial/pdg-seo-tab.png)
+<img width="250" src="/framework/images/tutorial/pdg-seo-tab.png" alt="SEO analysis settings" />
 
 To display the chart, drag a Plotly Graph component from the Content section of the toolkit into your new Tab. Click on the component to bring up the component settings. The Plotly graph component accepts a graph specification. Add `@{seo_analysis}` to pass the LLM-generated graph specification to the component. 
 
@@ -261,7 +260,7 @@ To create the inputs for the form, drag a Text Input and a Number Input from the
 
 Finally, add a Button from the Other section of the toolkit to the bottom of the new section. Click on the button and change the text to “Add and Generate.” You can also add `laps` or another [Material Symbols](https://fonts.google.com/icons) ID to the Icon input if you wish. 
 
-![Add outlet form](/framework/images/tutorial/pdg-add-outlet-form.png)
+<img width="300" src="/framework/images/tutorial/pdg-add-outlet-form.png" alt="Add outlet form" />
 
 
 ### Updating the code
@@ -365,4 +364,4 @@ Once the application has been deployed, the CLI will return with the URL of your
 
 ## Conclusion
 
-You’ve now built a full application with Writer Framework and the Writer AI module. Congratulations! This setup not only demonstrates the platform's capabilities but also provides a foundation on which you can build more complex applications. To learn more, explore the rest of the Writer Framework documentation and the API documentation.
+You’ve now built a full application with Writer Framework and the Writer AI module. Congratulations! This application not only demonstrates the platform's capabilities but also provides a foundation on which you can build more complex applications. To learn more, explore the rest of the Writer Framework documentation and the API documentation.

docs/framework/social-post-generator.mdx

@@ -173,21 +173,21 @@ The last task is to bind all of the state elements and the click handler to the
 
 First, click on the Text Input component to bring up the Component Settings panel. In the Bindings section, type `topic`. 
 
-![Text input settings](/framework/images/tutorial/social-text-input-settings.png)
+<img width="250" src="/framework/images/tutorial/social-text-input-settings.png" alt="Text input settings" />
 
 Next, click on the Button component to bring up the Component Settings panel. In the Events section, use the dropdown for `wf-click` to choose the `handle_button_click` handler.
 
-![Button event handler settings](/framework/images/tutorial/social-button-event-settings.png)
+<img width="300" src="/framework/images/tutorial/social-button-event-settings.png" alt="Button event handler settings" />
 
 Click on the Message component and set the Text to `@{message}`. Under Visibility, choose “Custom” and set it to `message`.
 
 Next, click on the Tags component. Under General, click “JSON” for Tags and set the object to `@{tags}`. 
 
-![Tags settings](/framework/images/tutorial/social-tags-settings.png)
+<img width="250" src="/framework/images/tutorial/social-tags-settings.png" alt="Tags settings" />
 
 Then, click on the Text component to bring up the Component Settings panel. In General Properties, bind this text box to a variable called `posts` by entering `@{posts}` in the text property field. You can also set this text box to accept Markdown input if needed by toggling the “Use Markdown” property.
 
-![Text settings](/framework/images/tutorial/social-text-settings.png)
+<img width="250" src="/framework/images/tutorial/social-text-settings.png" alt="Text settings" />
 
 Finally, click on the Section that contains the Tags and Text components. Under Visibility, choose “Custom” and set it to `posts`.
 

mint.json

@@ -51,8 +51,8 @@
 		{
 			"group": "Tutorials",
 			"pages": [
-				"docs/framework/social-post-generator",
 				"docs/framework/chat-assistant",
+				"docs/framework/social-post-generator",
 				"docs/framework/product-description-generator"
 			]
 		},