doc: vscode extension doc updates (microsoft#294)

# Description

Please add an informative description that covers that changes made by
the pull request and link all relevant issues.

# All Promptflow Contribution checklist:
- [x] **The pull request does not introduce [breaking changes]**
- [ ] **CHANGELOG is updated for new features, bug fixes or other
significant changes.**
- [x] **I have read the [contribution guidelines](../CONTRIBUTING.md).**

## General Guidelines and Best Practices
- [x] Title of the pull request is clear and informative.
- [x] There are a small number of commits, each of which have an
informative message. This means that previously merged commits do not
appear in the history of the PR. For more information on cleaning up the
commits in your PR, [see this
page](https://github.com/Azure/azure-powershell/blob/master/documentation/development-docs/cleaning-up-commits.md).

### Testing Guidelines
- [ ] Pull request includes test coverage for the included changes.

.github/ISSUE_TEMPLATE/vsc_bug_report.md

@@ -0,0 +1,31 @@
+---
+name: Bug report for Prompt flow VS Code extension
+about: Bug report for Prompt flow VS Code extension
+title: "[BUG] [VSCode Extension]"
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of the bug.
+
+**How To Reproduce the bug**
+Steps to reproduce the behavior, how frequent can you experience the bug:
+1. 
+
+**Screenshots**
+1. On the VSCode primary side bar > the Prompt flow pane > quick access section. Find the "install dependencies" action. Please it and attach the screenshots there.
+2. Please provide other snapshots about the key steps to repro the issue.
+
+**Environment Information**
+ - Promptflow Package Version using `pf -v`: [e.g. 0.0.102309906]
+ - Operating System: [e.g. Ubuntu 20.04, Windows 11]
+ - Python Version using `python --version`: [e.g. python==3.10.12]
+ - VS Code version.
+ - Prompt Flow extension version.
+ - On the VS Code bottom pane > Output pivot > "prompt flow" channel, find the error message could be relevant to the issue and past them here. That would be helpful for our trouble shooting.
+ - If your code to repro the issue is public and you want to share us, please share the link.
+
+**Additional context**
+Add any other context about the problem here.

docs/how-to-guides/init-and-test-a-flow.md

@@ -33,7 +33,10 @@ pf flow init --flow <flow-name> --type chat
 :::{tab-item} VS Code Extension
 :sync: VS Code Extension
 
+Use VS Code explorer pane > directory icon > right click > the "New flow in this directory" action. Follow the popped out dialog to initialize your flow in the target folder.
 ![img](../media/how-to-guides/init-and-test-a-flow/vscode_new_flow_1.png)
+
+Alternatively, you can use the "Create new flow" action on the Prompt flow pane > quick access section to create a new flow
 ![img](../media/how-to-guides/init-and-test-a-flow/vscode_new_flow_2.png)
 
 :::
@@ -70,6 +73,18 @@ In this case, promptflow CLI generates `flow.dag.json`, `.promptflow/tools.json`
 
 Promptflow also provides ways to test the initialized flow or flow node. It will help you quickly test your flow.
 
+### Visual editor on the VS Code for Prompt flow.
+
+::::{tab-set}
+:::{tab-item} VS Code Extension
+:sync: VS Code Extension
+
+Open the flow.dag.yaml file of your flow. On the top of the yaml editor you can find the "Visual editor" action. Use it to open the Visual editor with GUI support.
+
+![img](../media/how-to-guides/vscode_open_visual_editor.png)
+:::
+
+::::
 
 ### Test flow
 
@@ -132,6 +147,7 @@ Promptflow CLI will generate test logs and outputs in `.promptflow`:
 :::{tab-item} VS Code Extension
 :sync: VS Code Extension
 
+You can use the action either on the default yaml editor or the visual editor to trigger flow test. See the snapshots below:
 ![img](../media/how-to-guides/vscode_test_flow_yaml.png)
 ![img](../media/how-to-guides/vscode_test_flow_visual.png)
 
@@ -183,6 +199,8 @@ The log and result of flow node test will be displayed in the terminal. And the
 :::{tab-item} VS Code Extension
 :sync: VS Code Extension
 
+The Prompt flow extension provides inline actions in both default yaml editor and visual editor to trigger single node runs.
+
 ![img](../media/how-to-guides/vscode_single_node_test.png)
 ![img](../media/how-to-guides/vscode_single_node_test_visual.png)
 
@@ -216,6 +234,8 @@ Using this [chat flow](https://github.com/microsoft/promptflow/tree/main/example
 :::{tab-item} VS Code Extension
 :sync: VS Code Extension
 
+If a flow contains chat inputs or chat outputs in the flow interface, there will be a selection when triggering flow test. You can select the interactive mode if you want to.
+
 ![img](../media/how-to-guides/vscode_interactive_chat.png)
 ![img](../media/how-to-guides/vscode_interactive_chat_1.png)
 
@@ -231,6 +251,7 @@ Customer can debug a single python node in VScode by the extension.
 :::{tab-item} VS Code Extension
 :sync: VS Code Extension
 
+Break points and debugging functionalities for the Python steps in your flow. Just set the break points and use the debug actions on either default yaml editor or visual editor.
 ![img](../media/how-to-guides/vscode_single_node_debug_yaml.png)
 ![img](../media/how-to-guides/vscode_single_node_debug_visual.png)
 

docs/how-to-guides/manage-connections.md

@@ -89,6 +89,9 @@ print(result)
 
 :::{tab-item} VS Code Extension
 :sync: VSC
+
+On the VS Code primary sidebar > prompt flow pane. You can find the connections pane to manage your local connections. Click the "+" icon on the top right of it and follow the popped out instructions to create your new connection.
+
 ![img](../media/how-to-guides/vscode_create_connection.png)
 ![img](../media/how-to-guides/vscode_create_connection_1.png)
 :::
@@ -130,6 +133,8 @@ print(connection)
 
 :::{tab-item} VS Code Extension
 :sync: VSC
+
+On the VS Code primary sidebar > prompt flow pane. You can find the connections pane to manage your local connections. Right click the item of the connection list to update or delete your connections.
 ![img](../media/how-to-guides/vscode_update_delete_connection.png)
 :::
 ::::
@@ -191,6 +196,8 @@ client.connections.delete(name="my_custom_connection")
 
 :::{tab-item} VS Code Extension
 :sync: VSC
+
+On the VS Code primary sidebar > prompt flow pane. You can find the connections pane to manage your local connections. Right click the item of the connection list to update or delete your connections.
 ![img](../media/how-to-guides/vscode_update_delete_connection.png)
 :::
 ::::

docs/how-to-guides/manage-runs.md

@@ -91,6 +91,9 @@ print(result)
 
 :::{tab-item} VS Code Extension
 :sync: VS Code Extension
+
+You can click on the actions on the top of the default yaml editor or the visual editor for the flow.dag.yaml files to trigger flow batch runs.
+
 ![img](../media/how-to-guides/vscode_batch_run_yaml.png)
 ![img](../media/how-to-guides/vscode_batch_run_visual.png)
 :::
@@ -238,6 +241,9 @@ client.runs.visualize(name="<run-name>")
 
 :::{tab-item} VS Code Extension
 :sync: VSC
+
+On the VS Code primary sidebar > the Prompt flow pane, there is a run list. It will list all the runs on your machine. Select one or more items and click the "visualize" button on the top-right to visualize the local runs.
+
 ![img](../media/how-to-guides/vscode_run_actions.png)
 :::
 ::::
@@ -276,6 +282,8 @@ print(runs)
 
 :::{tab-item} VS Code Extension
 :sync: VSC
+
+On the VS Code primary sidebar > the Prompt flow pane, there is a run list. It will list all the runs on your machine. Hover on it to view more details.
 ![img](../media/how-to-guides/vscode_list_runs.png)
 :::
 ::::

docs/how-to-guides/run-and-evaluate-a-flow.md

@@ -191,6 +191,9 @@ A web browser will be opened to show the visualization result.
 
 :::{tab-item} VS Code Extension
 :sync: VS Code Extension
+
+There are actions to trigger local batch runs. To perform an evaluation you can use the run against "existing runs" actions.
+
 ![img](../media/how-to-guides/vscode_against_run.png)
 ![img](../media/how-to-guides/vscode_against_run_2.png)
 :::