diff --git a/docs/img/app-builder.png b/docs/img/app-builder.png new file mode 100644 index 000000000..4f0f3b2ba Binary files /dev/null and b/docs/img/app-builder.png differ diff --git a/docs/img/app-logs.png b/docs/img/app-logs.png new file mode 100644 index 000000000..45e3d93b5 Binary files /dev/null and b/docs/img/app-logs.png differ diff --git a/docs/img/code-app-builder.png b/docs/img/code-app-builder.png new file mode 100644 index 000000000..c8c080f13 Binary files /dev/null and b/docs/img/code-app-builder.png differ diff --git a/docs/img/conv-info.png b/docs/img/conv-info.png new file mode 100644 index 000000000..b592f1f94 Binary files /dev/null and b/docs/img/conv-info.png differ diff --git a/docs/img/dial-marketplace5.png b/docs/img/dial-marketplace5.png index bc22d2f52..afd460a66 100644 Binary files a/docs/img/dial-marketplace5.png and b/docs/img/dial-marketplace5.png differ diff --git a/docs/img/mindmap.png b/docs/img/mindmap.png new file mode 100644 index 000000000..716a63613 Binary files /dev/null and b/docs/img/mindmap.png differ diff --git a/docs/img/mindmap2.png b/docs/img/mindmap2.png new file mode 100644 index 000000000..d9e6544c7 Binary files /dev/null and b/docs/img/mindmap2.png differ diff --git a/docs/img/quick-app-builder.png b/docs/img/quick-app-builder.png new file mode 100644 index 000000000..2dcb8d9fb Binary files /dev/null and b/docs/img/quick-app-builder.png differ diff --git a/docs/img/use-prompt.png b/docs/img/use-prompt.png new file mode 100644 index 000000000..d4a238b32 Binary files /dev/null and b/docs/img/use-prompt.png differ diff --git a/docs/img/view-toggle.png b/docs/img/view-toggle.png new file mode 100644 index 000000000..d3db94c7c Binary files /dev/null and b/docs/img/view-toggle.png differ diff --git a/docs/user-guide.md b/docs/user-guide.md index 3d393456f..03b9fbc02 100644 --- a/docs/user-guide.md +++ b/docs/user-guide.md @@ -23,7 +23,9 @@ You can also refer to other topics in this documentation: * Chat UI design [guidelines](/docs/chat-design.md). * Authentication [guidelines](/docs/Auth/2.%20Web/1.overview.md). -## Interface Components +## Standard Chat Interface Components + +> **NOTE**: this user guide covers the functionality of a standard AI DIAL Chat UI. The AI DIAL Chat application user interface has several main sections: @@ -37,6 +39,16 @@ The AI DIAL Chat application user interface has several main sections: ![](./img/home.png) +## Custom UI + +> **NOTE**: this user guide covers the functionality of a standard AI DIAL Chat UI. + +The standard AI DIAL Chat UI is designed to meet the needs of typical conversational applications. +However, to accommodate the requirements of applications that exceed the standard chat UI functionality, new application types can be introduced to implement a fully custom UI (even not chat-like UI), which can completely replace the standard chat interface during interactions with a specific application. + +![](./img/mindmap2.png) + + ## Conversations In the AI DIAL, a conversation is a dialogue between a conversational agent, such as a language model, assistant, or application, and a human user. The agent uses natural language to interact with a human and receive/give a feedback. Within one conversation, you can refer to previous questions and answers. But different conversations don't share context. @@ -155,6 +167,7 @@ This is the list of all the supported actions: - [Unshare](#unshare): use to revoke a shred conversation. - [Publish](#publish): use to publish conversations. - [Unpublish](#unpublish): use to revoke public access from published conversations. +- [Info](#info): use to view metadata of a selected conversation. - [Delete](#delete): use to delete a single conversation. ![](./img/conv-menu.png) @@ -197,6 +210,8 @@ There are several ways to initiate a dialog with a [conversational agent](#conve ![](./img/start-conv.png) +**Please be aware** that new conversations will show up in the conversations panel located to the left of the main chat area. However, if you start a conversation and close it while it is still empty, it will neither be displayed on the panel nor saved in your conversations. + ### Rename When you create a new conversation, it is automatically named after the first line in your first prompt. For instance, if your prompt consists of several sentences divided by a tab, the first sentence will be used as the conversation's name. Moreover, the MAX length of the conversation name is limited to 160 symbols. Everything beyond is cut off. After a conversation is created, you can rename it. @@ -309,6 +324,12 @@ When importing a **duplicate** of an existing conversation, you will be prompted ![](./img/import-export.png) +### Info + +Click **Info** in the conversation menu to view the conversation metadata: the date it was updated and the creation date. + +![](./img/conv-info.png) + ### Delete You can delete a single conversation, selected conversations or all conversations. @@ -510,6 +531,7 @@ Click a **...** icon to open a prompt menu. There, you can find a list of all th This is the list of all the supported actions. Please note that the available actions can differ depending on the selected prompt. For instance, the Unpublish action won't be available if the prompt hasn't been published yet. +- [Use](#use): click to use the selected prompt. - [Select](#select-to-delete-1): use to select prompts you want to delete. - [Edit](#create-1): use to edit prompts. - [Duplicate](#duplicate-1): use to duplicate a shared prompt. @@ -520,6 +542,7 @@ This is the list of all the supported actions. Please note that the available ac - [Unshare](#unshare-1): use to revoke access to shared prompts. - [Publish](#publish-1): use to publish prompts within the organization. - [Unpublish](#unpublish-1): use to withdraw prompts from public use. +- [Info](#info-1): use to view the prompt metadata. - [Delete](#delete-1): you can delete a single prompt, all prompts or selected prompts. ![](./img/prompt_actions.png) @@ -556,6 +579,14 @@ Use the **Search** box to search prompts by their names. If you have any shared ![](./img/pt_search.png) +### Use + +Click **Use** in the prompt menu to populate the selected prompt in the chat box. + +![](./img/use-prompt.png) + +> Refer to [Chat](#actions-2) to learn more. + ### Create ##### To create a new prompt @@ -598,6 +629,13 @@ When you submit the form, your message will look like on the illustration below: Generally, variables can be anything, not only numbers. For example, you can create a prompt with the following body: `Who played {{character}} in {{movie}}? or What is a Latin name of {{plant common name}}?` +### Info + +Click **Info** in the prompt menu to view the prompt metadata: the date it was updated and the creation date. + +![](./img/conv-info.png) + + ### Delete You can delete a single prompt, selected prompts or all prompts. @@ -771,6 +809,10 @@ The chat occupies the central part of the main screen, allowing you to input mes ![](./img/caht-box.png) +You can enter a prompt manually or select one of [existing prompts](#prompts). + +Enter `/` in the chat text box to select one of the available prompts. You can also click [Use](#use) in the prompt's menu to populate it in the text box. + **Copying responses**: you can copy answers to reuse them some place else. ![](./img/copy-answer.png) @@ -1034,9 +1076,17 @@ In the [DIAL Marketplace](#dial-marketplace) section, you can view all the model > Refer to [My workspace](#my-workspace) to learn how to add and manage applications in AI DIAL Chat. -An **Application** in AI DIAL refers to any custom logic with a conversational interface, adhering to a [Unified API](https://epam-rail.com/dial_api#/paths/~1openai~1deployments~1%7BDeployment%20Name%7D~1chat~1completions/post), and packaged as a ready-to-deploy solution. Applications can facilitate the customization of a language model behavior by incorporating tools (such as [Addons](#addons)) with a desired functionality. Additionally, applications can support logic not directly related to LLMs, such as echoing user messages, creating a fully deterministic chatbot, or orchestrating complex interactions involving multiple LLMs. The flexibility offered by applications enables customized solutions for distinct scenarios and needs. +In AI DIAL, an “application” is any programming logic that conforms to the [Unified API](https://epam-rail.com/dial_api#/paths/~1openai~1deployments~1%7BDeployment%20Name%7D~1chat~1completions/post) of AI DIAL or registered custom endpoints and packaged as a ready-to-deploy solution. -AI DIAL platform serves as an **application server**, offering tools to develop, deploy and operate custom applications. Refer to [Application Types](#application-types) to learn more about DIAL applications. +AI DIAL Chat users can engage with applications via standard or fully customized interfaces. Applications can interact via the Unified API, or registered custom endpoints, enabling creation of complex scenarios and utilizing all AI DIAL features. + +You can expand the platform by introducing custom application types to build the applications you need, using the DIAL SDK to streamline the development process. + +> Refer to [Extensibility](https://epam-rail.com/extension-framework) to learn more. + +AI DIAL platform serves as an **application server**, offering tools to develop, deploy and operate custom applications. Refer to [Application Types](#standard-application-types) to learn more about DIAL applications. + +> Refer to [AI DIAL Application Server](https://epam-rail.com/app-server) to learn more. Applications can be developed (using [DIAL SDK](https://github.com/epam/ai-dial-sdk)) to execute any custom logic and can even form an [ecosystem](/docs/architecture.md#introduction) and interact with each other through the [Unified API](https://epam-rail.com/dial_api) with access to all DIAL Core features among which is connectivity to models (including multi-modal models), file storage, access control, per-request API keys and other. @@ -1054,7 +1104,13 @@ In the [DIAL Marketplace](#dial-marketplace) section, you can view all the appli ![](./img/marketplace-app-select.png) -### Application Types +### Standard Application Types + +Application types serve as templates for building customized versions of applications. AI DIAL offers various standard application types accessible from [My workspace](#my-workspace), allowing you to create new applications based on these templates. + +> Refer to [Extensibility](https://epam-rail.com/extension-framework) to learn more. + +AI DIAL has a flexible architecture that supports adding custom application types, enabling implementations that go beyond the standard application types and even implementing a fully custom UI replacing the standard chat interface. #### Custom Apps @@ -1077,6 +1133,13 @@ DIAL Core Apps allow you to develop, deploy and run your Python applications dir > * Watch a [Demo Video](/docs/video%20demos/demos/11.code-apps.md) with an introduction to Code Apps. > * Refer to [My workspace](#add-code-app) to learn how to add Code Apps. +#### Mindmaps + +Mindmap enables users to access information through an interactive knowledge graph and natural language. The application pulls data from various sources, including documents, URLs, and other data inputs and then presents it on UI as a interactive knowledge graph, facilitating intuitive and engaging user interactions with information. + +> Watch [demo video](/docs/video%20demos/demos/mindmap-studio.md) to see the AI DIAL Mindmap Studio in action. + + ### Assistants In the AI DIAL, assistant is a combination of a preselected [addon](#addons) and a [system prompt](#system-prompt) that enable specific behavior of a language model, allowing to achieve responses adjusted to user needs. Unlike the model+addon configuration, where users have the flexibility to choose different addons, assistants come with predetermined addons that cannot be removed or unselected. However, the model can still be reassigned within the assistant. @@ -1105,6 +1168,8 @@ In DIAL Marketplace where you can find all conversational agents ([applications] ![](./img/dial-marketplace.png) +##### Navigation + You can navigate to this section form the main chat screen: ![](./img/dial-marketplace1.png) @@ -1120,13 +1185,13 @@ From both marketplace and workspace you can click **Back to Chat** to navigate t ![](./img/dial-marketplace3.png) -##### Filters +##### Filters & Views * Use the **Type** filters to display any or all [conversational agents](#conversational-agents). **Note**, that all agents are displayed by default - use the Type filter to narrow down the scope of the displayed agents. * A conversational agent can be associated with a specific topic describing the area of its application. Use the **Topics** filter to refine the output by specific topics. * Use the **Source** filter to apply additional filtering criteria related to the source of conversational agents (e.g. you can filter just the apps shared with you). - -Additionally, the **Search** allows you to swiftly locate any item by its name. +* The **Search** allows you to swiftly locate any item by its name. +* Use view toggle to switch between the table and the card view. ![](./img/dial-marketplace5.png) @@ -1160,28 +1225,47 @@ You can also add a conversational agent to My workspace by initiating a conversa ### My workspace -In **My workspace**, you can access all conversational agents that you have added in [DIAL Marketplace](#dial-marketplace). Here, you can view and manage your agents. Additionally, in My workspace, you can add [custom](#add-custom-app), [quick](#add-quick-app), and [code](#add-code-app) apps. +In **My workspace**, you can access and manage all conversational agents that you have added in [DIAL Marketplace](#dial-marketplace). Here, you can view and manage your agents. + +#### Application Builder + +In My workspace, you can use Application Builder to create applications of available [Application Types](#standard-application-types). It is a useful feature, allowing users with different technical backgrounds to quickly build prototypes and applications in a no-code fashion. + +![](./img/app-builder.png) + +Application Builder interface enables configuration and deployment of applications, which can vary depending on the type of application. This interface allows you to not only set up and launch applications but also test them before going live. + +##### Custom UI + +The standard AI DIAL Chat UI is designed to meet the needs of typical conversational applications. However, to accommodate the requirements of applications that exceed the standard chat UI functionality, new application types can be introduced to implement a fully custom UI (even not chat-like UI), which can completely replace the standard chat interface during interactions with a specific application. -> Refer to [Application Types](#application-types) to learn more about DIAL applications. +> You can define custom UI for application builder and for your application in JSON schema when registering a new application type. + +![](./img/mindmap.png) + +> * Refer to [Extensibility](https://epam-rail.com/extension-framework) to learn more. +> * Watch [demo video](/docs/video%20demos/demos/mindmap-studio.md) to see the Mindmap Studio in action. #### Add Custom App > You can also add custom applications using [DIAL API](https://epam-rail.com/dial_api#tag/Applications/paths/~1v1~1applications~1%7BBucket%7D~1%7BApplication%20Path%7D/put). -If you want to add your custom application, you can do it in AI DIAL Chat or via [DIAL API](https://epam-rail.com/dial_api#tag/Applications/paths/~1v1~1applications~1%7BBucket%7D~1%7BApplication%20Path%7D/put). After adding a custom application, a JSON file describing the configuration of your application will be saved in a dedicated folder within a blob store account bucket assigned to your user account. These files can then be accessed by DIAL Core to facilitate the integration and operation of your applications. Configuration of a custom application matches DIAL Core dynamic configuration for applications. Refer to [Examples](https://github.com/epam/ai-dial-core/blob/development/sample/aidial.config.json) to view how it can look like. +If you want to add your custom application, you can do it in AI DIAL Application Builder or via [DIAL API](https://epam-rail.com/dial_api#tag/Applications/paths/~1v1~1applications~1%7BBucket%7D~1%7BApplication%20Path%7D/put). After adding a custom application, a JSON file describing the configuration of your application will be saved in a dedicated folder within a blob store account bucket assigned to your user account. These files can then be accessed by DIAL Core to facilitate the integration and operation of your applications. Configuration of a custom application matches DIAL Core dynamic configuration for applications. Refer to [Examples](https://github.com/epam/ai-dial-core/blob/development/sample/aidial.config.json) to view how it can look like. > **Important Requirement**: Custom applications must provide a chat completion endpoint for DIAL Core and adhere to the [Unified API](https://epam-rail.com/dial_api#/paths/~1openai~1deployments~1%7BDeployment%20Name%7D~1chat~1completions/post) standards to ensure seamless integration and functionality. ##### To Add Custom App -1. In My workspace, click **Add app** and select **Custom App**. -2. Fill in the [Add application](#addedit-application-form) form. -3. Your new application will appear in [My workspace](#my-workspace). +1. In My workspace, click **Add app** and select **Custom App** to launch Application Builder. +2. Follow the steps to configure application. Refer to [Add application](#addedit-application-form) form to see the description of parameters. +3. When you configure all the required parameters, click **Save and exit**. Your new application will appear in [My workspace](#my-workspace). ![](./img/register-app.png) ##### Add/Edit application form +![](./img/app-builder.png) + |Field|Required|Description| |---|:---:|-------------| |Name|Yes|Application name.| @@ -1202,21 +1286,26 @@ DIAL Quick Apps are not composed of programming code. Instead, they can be chara ##### To Add Quick App +1. In My workspace, click **Add app** and select **Quick App** to launch Application Builder. +2. Follow the steps to configure application. Refer to [Add application](#addedit-quick-app-form) form to see the description of parameters. +3. When you configure all the required parameters, click **Save and exit**. Your Quick App will appear in [My workspace](#my-workspace). + ![](./img/register-quick-app.png) -1. In My workspace, click **Add app** and select **Quick App**. -2. Fill in the [Add quick app](#addedit-quick-app-form) form. -3. Your Quick App will appear in [My workspace](#my-workspace). ##### Add/Edit Quick app form +![](./img/quick-app-builder.png) + |Field|Required|Description| |---|:---:|-------------| |Name|Yes|Quick app name.| |Version|Yes|Quick app version, following the format `x.y.z` and contain only numbers and dots.| |Icon|No|The icon that will be rendered in the chat UI for this Quick app.| -|Topics|No|You can assign one of pre-defined topics to your Quick app. Topics and their styles are defined in [AI DIAL Chat Themes](https://github.com/epam/ai-dial-chat-themes/blob/development/static/config.json).| |Description|No|A short description that will be rendered in the chat UI. **Tip:** Add two line breaks and provide an addition description if needed.| +|Topics|No|You can assign one of pre-defined topics to your Quick app. Topics and their styles are defined in [AI DIAL Chat Themes](https://github.com/epam/ai-dial-chat-themes/blob/development/static/config.json).| +|Document relative url|No|If your application includes an instruction in the Toolset to query a document in order to generate a response, this URL will serve as a source for this document.| +|Model|Yes|Select one of the available language models from the dropdown list.| |Configure toolset|Yes|Enter a valid Json with a toolset configuration that will be used when making requests. E.g. this toolset can define how to make calls to external API.| |Instructions|No|Instructions to the language model.| |Temperature|Yes|The temperature controls the creativity and randomness of the model's output.| @@ -1246,10 +1335,11 @@ Limitations and security restrictions: ##### To Add Code App -![](./img/register-code-app.png) +1. In My workspace, click **Add app** and select **Code App** to launch Application Builder. +2. Follow the steps to configure application. Refer to [Add code app](#addedit-code-app-form) form to see the description of parameters. +3. When you configure all the required parameters, click **Save and exit**. Your Quick App will appear in [My workspace](#my-workspace). -1. In My workspace, click **Add app** and select **Code App**. -2. Fill in the [Add code app](#addedit-code-app-form) form. +![](./img/register-code-app.png) ##### To Launch Code App @@ -1265,8 +1355,14 @@ After adding, your new Code App will appear in [My workspace](#my-workspace). You can view and download logs of the deployed Code App from the application menu. +1. Click **Logs** in the deployed code app. + ![](./img/logs-code-app.png) +2. In the pop-up window, you can view, refresh and download file with application logs. + +![](./img/app-logs.png) + ##### To Edit Code App To modify the application source code or the application form parameters, you need to undeploy it. Both **Edit** and **Undeploy** buttons are located in the application's menu: @@ -1275,6 +1371,8 @@ To modify the application source code or the application form parameters, you ne ##### Add/Edit code app form +![](./img/code-app-builder.png) + |Field|Required|Description| |---|:---:|-------------| |Name|Yes|Code app name.| diff --git a/docs/video demos/demos/12.quick-apps.md b/docs/video demos/demos/12.quick-apps.md index 9041f4430..b6aba5ca0 100644 --- a/docs/video demos/demos/12.quick-apps.md +++ b/docs/video demos/demos/12.quick-apps.md @@ -1,9 +1,17 @@ # Quick Apps -https://youtu.be/Y7xbH6088EI In this video, we demonstrate how to build and use a Quick App that provides weather information and clothing recommendations for any city. Whether you're a developer, business analyst, or just curious about low-code solutions, this video provides valuable insights into the power of Quick Apps. AI DIAL Quick Apps, similarly to OpenAI's GPTs, allow you to create low-code applications. Use Quick Apps to streamline your workflow and help you build targeted tools for specific tasks. -> Refer to [User Guide](/docs/user-guide.md#applications-1) to learn more about DIAL applications. \ No newline at end of file +> Refer to [User Guide](/docs/user-guide.md#applications-1) to learn more about DIAL applications. + +##### Part 1 + +https://youtu.be/Y7xbH6088EI + + +##### Part 2 + +https://youtu.be/0EUx4kw0ssc \ No newline at end of file diff --git a/docs/video demos/demos/mindmap-studio.md b/docs/video demos/demos/mindmap-studio.md new file mode 100644 index 000000000..9cda398e6 --- /dev/null +++ b/docs/video demos/demos/mindmap-studio.md @@ -0,0 +1,7 @@ +# Mindmap Studio + +https://youtu.be/XYZfWeGdFcE + +Discover the power of DIAL Mind Map Studio, a revolutionary Talk To Your Data application that transforms how we interact with and generate knowledge graphs. + +Mindmap enables users to access information through an interactive knowledge graph and natural language. The application pulls data from various sources, including documents, URLs, and other data inputs and then presents it on UI as a interactive knowledge graph, facilitating intuitive and engaging user interactions with information. \ No newline at end of file