microsoft / botframework-composer

Dialog creation and management for Microsoft Bot Framework Applications

Microsoft Bot Framework Composer

Overview

Bot Framework Composer is an open-source, visual authoring canvas for developers and multi-disciplinary teams to design and build conversational experiences with Language Understanding and QnA Maker, and a sophisticated composition of bot replies (Language Generation). Within this tool, you'll have everything you need to build a sophisticated conversational experience.

• A visual editing canvas for conversation flows
• In context editing for language understanding (NLU)
• Tools to train, test and manage language understanding (NLU) and QnA components
• Language generation and templating system
• A ready-to-use bot runtime executable

The Bot Framework Composer is an open source tool based on the Bot Framework SDK. It is available as a desktop application as well as a web-based component

Get Started

• Download Composer for Windows, Mac and Linux. Please see supported OS versions.
• To learn about the Bot Framework Composer, read the documentation.
• To get yourself familiar with the Composer, read Introduction to Bot Framework Composer.
• Create your first bot!
• To find the most recent release and learn what has changed in Bot Framework Composer, see the latest release.

Build Composer Locally

To build and run the Composer project locally as a web application, clone the source code from Github and build the application using the instructions below.

Prerequisites

• Git.
• Node.js LTS 14.x.
• Yarn.
• .NET Core SDK 3.1 or later.
• On Windows, install the latest Visual C++ Redistributable for Visual Studio 2015, 2017 and 2019.
• List of recommended OS versions.

git clone https://github.com/microsoft/BotFramework-Composer.git
cd BotFramework-Composer
cd Composer # switch to Composer folder
yarn install # install dependencies
yarn build # build extensions and libs
yarn startall # start client and server at the same time

Extend Composer with Extensions

Many aspects of Composer's functionality can be customized and extended through extensions. Features such as authentication, storage, publishing and even the samples and templates available on the homescreen can be customized by creating new extensions.

Read more about building Composer extensions →

Support and Feedback

• Ask a question on Stack Overflow
• Request a new feature
• File an issue

Related project

The Bot Framework Composer is part of the Bot Framework platform:

• Bot Framework SDK
• Bot Framework Emulator

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Issues and feature requests

Please file issues and feature requests here.

Also, see current known issues for high impact bugs you may experience.

Submitting pull requests

If you'd like to contribute pull requests to Composer, see the contributing guide for helpful information on our development workflow.

Reporting security issues

Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at [email protected]. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the MSRC PGP key, can be found in the Security TechCenter.

botframework-composer's Issues

[Study] Main should be at top and selected by default

04.03'19
Open Composer, open todobot. Notice that 'Main' is at the bottom of the list of dialogs.
Move it to be the top
Automatically select it and load the graphic
Automatically show the properties associated with the main dialog

Main

Type: Dialog
Description: Bot that allows you to create, show and change to-do’s.
ID : [number goes here ]

Dialogs
AddToDo Type: Dialog
DeleteToDo Type: Dialog
MarkTodo. Type: Dialog
ShowTodo Type: Dialog

Rules
Welcome Type: Rule
No match
Cancel

navigating between botproj and dialog crashes the app

To repro:

1. Click on either bot.botproj or main.dialog
2. Click on the one you didn't click on in step 1
3. Observe error screen

[Study] Show selected state in visual canvas

Currently, the only way to see which item is selected is through the updated left side.
Please add a selected state for the boxes on the canvas (simplest: outline).

Create a .bot file automatically after starting a bot in Composer

Create a .bot file automatically after user starts a bot in Composer .

[obieditor] Httprequest is rendered as a Goto Dialog

Open Httprequest sample bot -> Click on either of the Httprequest step. The property editor title is Goto Dialog.

[shell] use schema from botproj when creating a new dialog

Currently, new dialogs are created with a $schema pointing to the dialogSchema. It should instead reference the same schema as the other dialogs in the botproj.

[Visual editor] Edge missing after first node in VisualDesigner

It's a known issue, let's log here, to avoid loose tracking.

dialogTree is not updated after navigate to new dialog from visual editor

@lei9444

Go back arrow doesn't work when navigating to SampleBot4's v15 folder

SampleBot4 -> .vs -> SampleBot4 -> v15

[Study] Show description for all dialog elements

Currently, the properties show the following in the box

• Type ('Step')

• Name ('save entity')
  and

• Property ('user.todo')

• Value ('title')

Can we make it the following instead:

• Name ('Save entity') (still show the color green that is an indicator of type)
• Description ('Save an recognized entity to storage')

In the right side properties:

• Name ('Save entity') (still show the color green that is an indicator of type)
• Description ('Save an recognized entity to storage')

Properties
name: ('user.todo')
value ('title')
description ('title of todo')

[Study] Visual flow for dialogs/steps need a trigger

To understand the visual flow, and why, for example, the Add todo' dialog steps/tasks, one needs to see what is starting this flow. In this case, the user has triggered the 'add todo' dialog by saying something that was recognized by the recognizer to fire the 'add todo' dialog.
Please include an indicator for this trigger in the visual flow.
Same thing for other steps in the flow such as the condition : I'd consider this a condition and therefore a 'branch' - different things happen based on this condition.
Also - there are visible bot actions (Message of success) and actions that are not visible to the user. It'd be great to communicate those in different ways.

See image included.

Can't open planning - todo.botproj

nothing happend when i click this bot, but other bots works at expected

improve navigation when editing step/rule from list

[Study] Always show content in the properties pane (null select = whole dialog is selected)

The properties pane next to the visual canvas should never be empty.

1. On open, Main is selected: Properties of the dialog overall are shown
2. On selecting a box or drilling into a box, the properties of the dialog in view are selected or, if just one item in view, the properties of that box.

Random error - clicking on a leaf node in visual editor doesn't bring up the property editor

I cant find a consistent way to reproduce this but "consistently" ran into this when I bring up and click through various sample bots. Refreshing the page fixes the issue. Seems it happens more with planning dialog 6, 7. Not sure if this is a Shell, or Visual editor issue.

Visual editor can't resize automatically as browser resizes

Should auto re-size the various editor panels as browser resizes.

Create bot project

• "Create new bot project (including best practices both in setting up backend code with best practices and skeleton structure for welcome, help, cancel, etc.)"

--

[obieditor] Object types with additionalProperties do not allow naming of properties

An example in RegexRecognizer:

intents: {
  type: 'object',
  title: 'RegEx patterns to intents',
  description: 'Pattern->Intents mappings',
  additionalProperties: {
    type: 'string',
  },
}

Can not open email bot

Setting openLastActiveBot to false results in errors

I'm seeing 404's when I configure this to false.

[Study] Create new OBI dialog: Book a restaurant

Create new sample dialog: book a restaurant
We'll be using this for the user research study.
Due: eow

Task:
Book restaurant
Sub tasks

• number of people
• Where
• date and time
• show results
• select results
• book & confirmation
• back to main. ('anything else?')

Open bot project, then fetch files get 404

[Study] What to test and why

Objective:

1. Concept test of Composer as a professional tool to enable multidisciplinary teams of professional conversation designers with a coding, business, writing, or customer service background to collaborate in creating, editing, test, and refine dialogs and developing a bot.

2. Evaluating the usability and understanding of the concept/current solution

1. the interaction between visual editor and detail editor,
2. the concept of the tree-branch-leaf navigation model, and
3. defining and refining the conversation through property editors.

How:
Create a scenario that is easy to relate : book a restaurant scenario (location, # people, # time/date, select, confirm, book

• Open existing

• View main dialog

• Explore by clicking through - talk out loud:

• Edit: main, intent dialog, rule, branch ;

• Content : LG and LU;

• Settings: LUIS and ABS; Git (as this our source-safe solution)

• Testing: in Emulator

• Specific tasks: change content (prompt or other)

• add new dialog; add branch

• Test in emulator

• See changes/make more changes

What we need for this:

• Get participants (Blink is on this now)
• Working prototype that illustrates concepts
• Set up prototype on researcher's machine
• Set up emulator on researcher's machine connected to Composer
• Set up LUIS model and authentication
• Create Discussion guide (blink)
• Documentation to researchers about Composer purpose , approach and functionality

Failed to run yarn install on a clean environment

recover after install babel separately.

[Study] Start bot

Right now the 'start bot' is a bit obscure - as it doesn't visually do anything (except update the lable) if Emulator is not running. Can we update the link to say something like 'view in emulator' and make that launch the emulator on the user's desktop (in the study we can preinstall the Emulator on the researchers machine so it's showing in 'Remote Desktop' for the participant.
We're not testing the experience of the Emulator or the relationship between the emulator and composer in this study so let's connect the two as automatically as we can.

When the bot is already running in Emulator, we can just make it say 'refresh'

unable to start opened bot

When starting the bot, the lastActiveBot is used. As far as I can tell, this setting is not getting updated so it's always starting the ToDoBot.

https://github.com/Microsoft/BotFramework-Composer/blob/master/Composer/packages/server/src/launcher-connectors/csharpLauncherConnector.ts#L22

Triggering form editor in visual designer will change the original json file unexpectly

After triggering Form Editor, all steps were replaced by 'IfProperty' step and the original JSON file is modified unexpectly.

Setting -> services error

Click on setting -> services, will first load a blank page. Refreshing the page shows the following errors:

[Study ] Fix red black and gray squares with understandable icons

We'll probably have to do some actual detailed design for the interaction of this, but before the study let's at least replace the squares with icons so that people understand that these are buttons and what they stand for.

Can not get metadata in FileExplorer

sometimes the metadata is not showed, in linux or in mac

Dialog name in breadcrum should bring up the dialog property editor

Should be able to click on the "AddToDo" dialog name on the breadcrumb to bring up the dialog's property editor.

[obieditor] better handling of oneOf

• oneOf with 1 element should not be a oneOf. we could just modify the schema inline.
• oneOf dropdown label is missing and not informative

hide lines in root dialog (graph lib)

follow-on from #160

Could not nav to IFCondition elseStep

In IFCondition Bot

• add sendActivity in IFcondition elseStep
• edit sendActivity step, it will navigate to IFture first step.

Bot schema updated as following :
"steps": [
{
"$type": "Microsoft.IfCondition",
"condition": "user.name == null",
"steps": [
{
"$type": "Microsoft.NumberInput",
"property": "user.age",
"prompt": "How old are you ?",
"retryPrompt": "Let's try again, How old are you ?",
"invalidPrompt": "age should be 3 - 12",
"minValue": 3,
"maxValue": 12
}
],
"elseSteps": [
{
"$type": "Microsoft.SaveEntity"
}
]

Nav bar shows :

Bot could not be started due to no executable botproject.dll

[start:server] command: $dotnet bin/Debug/netcoreapp2.0/BotProject.dll --bot:path=C:\Repo\BotFramework-Composer\SampleBots\08 - ExternalLanguage\bot.botproj
[start:server] GET /api/launcher/start 304 6255.161 ms - -
[start:server] stderr: No executable found matching command "dotnet-bin/Debug/netcoreapp2.0/BotProject.dll"

Nav not showing correctly for dialog name which has "." inside.

Steps.main.dialog should show as Steps.main

[Study] Content should have LG and LU content

Click 'content' on the left. Nothing shows

What should show is
in left nav:

• User input (LU)
• Language Generation (LG)

Click on LU and show content used for welcome, etc. (if needed we can generate something as a placeholder)

• Column headers (placeholder) Name | Last modified | Type. | Used in

Click on LG and show bot response content . (if needed we can generate something as a placeholder just so that we can explain the concept)

• Column headers (placeholder) Name | Last modified | Type. | Used in

Double main in breadcrumb path

Reproducing steps:

1. Start a bot
2. With the bot running, refresh Composer. (The Stop button disappears but I assume the previous bot is still running? This could also be an issue.)
3. Breadcrumb shows: Main -> [Dialog/Rule Name]
4. Open another botproject.
5. Breadcrumb shows: Main -> [Dialog/Rule Name] -> Main

Refreshing Composer can fix this issue so marking this a low priority.

Problem adding dialog from nav

Dialog tree is updated when adding new dialog via nav pane, however, new dialog does not appear in visual graph (persistent).

Repro steps:

1. click the + on the leftmost pane (nav)
2. create new dialog
3. save
4. check visual graph for new addition

ToDo Bot - Visual Editor Navigation expectations

When I click on the WelcomeRule node, The Visual Editor should load load the steps inside the Welcome Rule dialog as its subtree. In the case of the ToDo Bot it would render a single Send Activity step but if there were more steps they would be there as well. When this Send Activity step is clicked, it loads the FormEditor for SendActivity.

When I click on the Intent Node(s) it should load the rules object (Fallback step) as a single node that when clicked would load the steps inside that rule element. Because there are 4 steps, it would render 4 leaf nodes then when clicked opens the FormEditor for that leaf.

Can not open ExternalLanguage Bot

roll back expanded Events node renderer (graph lib)

follow on from #160

Root Dialog lay out is not correct after add new stpes

Todo bot

• Root Dialog with all following nodes :Recognizer, Events, Rules
• Add new steps
• The lay out turns into flat
  

Form editor crash in ToDoLuis bot

Clicking on Httprequest property editor URL field navigates back to Rule node

Open GitHubIssue Sample bot.
Click thru to the httprequest step's property editor.
Click inside the URL field, and then click
on the blank area below the URL field.
Automatically navigates back to the NoMatchRule Visual editor.

"null" string show up in schema after steps move up or move down

Move down final step or move up first step, there is "null" string insert to schema file. so visual editor will show blank.

bot could not be loaded correctly

Start the bot in composer, it will throw exception.

[start:server] command: $dotnet bin/Debug/netcoreapp2.0/BotProject.dll --bot:path=C:\Repo\BotFramework-Composer\SampleBots\Planning - ToDoBot\bot.botproj

[start:server] stdout: Application startup exception: System.ArgumentNullException: Value cannot be null.
[start:server] Parameter name: path
[start:server] at System.IO.Path.GetFullPath(String path)
[start:server] at System.IO.DirectoryInfo..ctor(String path)
[start:server] at Microsoft.Bot.Builder.Dialogs.Declarative.ResourceExplorer.FolderResource..ctor(String folder, Boolean monitorChanges)
[start:server] at Microsoft.Bot.Builder.Dialogs.Declarative.ResourceExplorer.AddFolder(String folder, Boolean monitorFiles)
[start:server] at Microsoft.Bot.Builder.TestBot.Json.Startup.ConfigureServices(IServiceCollection services) in C:\Repo\BotFramework-Composer\BotProject\CSharp\Startup.cs:line 70

file api always return {} in master

[Visual editor] Planning bot 9 - TellJoke dialog shows up misformed

Open Planning 9 - Canceldialog sample bot and navigate to TellJoke dialog

Directions are incomplete

Missing in instructions:
npm install -g concurrently
npm install -g gulp

npm install did not fix this.
C:\Users\chrimc\Source\Repos\BotFramework-Composer\Composer>yarn build
yarn run v1.15.2
$ yarn build:dev && yarn build:server && yarn build:client
$ yarn build:lib && yarn build:extensions
$ cd packages/lib && yarn build:all
$ concurrently --kill-others-on-fail "yarn build:cci-graph-lib"
$ cd cci-graph-lib && yarn build
$ gulp build:app
[0] [15:57:56] Local modules not found in ~\Source\Repos\BotFramework-Composer\Composer\packages\lib\cci-graph-lib
[0] [15:57:56] Try running: npm install
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[0] error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[0] error Command failed with exit code 1.
[0] yarn build:cci-graph-lib exited with code 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.