Merge pull request #1342 from OfficeDev/v-pritka/gif-fixes2

fixed broken sample images

samples/bot-conversation/csharp/README.md

@@ -27,7 +27,7 @@ how to incorporate basic conversational flow into a Teams application. It also i
 * Immersive Reading Support for Cards
 
 ## Interaction with bot
-![bot-conversations ](Images/bot-conversation.gif)
+![Conversation Bot](Images/Bot_Conversation.gif)
 
 ## Try it yourself - experience the App in your Microsoft Teams client
 Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app package (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, [see steps here](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading)).
@@ -120,35 +120,35 @@ You can interact with this bot in Teams by sending it a message, or selecting a
   - **Personal Scope Interactions:**
 
    **Adding bot UI:**
-  ![personal-AddBot ](Images/personal-AddBot.png)
+  ![personal-AddBot ](Images/1.Adding_personal_Scope.png)
 
    **Added bot UI:**
-  ![personal-AddedBot ](Images/personal-AddedBot.png)
+  ![personal-AddedBot ](Images/2.Added.png)
 
    **Show Welcome command interaction:**
-  ![personal-WelcomeCard-Interaction ](Images/personal-WelcomeCommand-Cards.png)
+  ![personal-WelcomeCard-Interaction ](Images/3.Welcome_Card.png)
 
    - **Group Chat Scope Interactions:**
 
    **Adding bot UI:**
-  ![groupChat-AddBot ](Images/groupChat-AddBot.png)
+  ![groupChat-AddBot ](Images/4.Adding_to_GC.png)
 
    **Added bot UI:**
-  ![groupChat-AddedBot ](Images/groupChat-AddedBot.png)
+  ![groupChat-AddedBot ](Images/5.Addes_GC.png)
 
    **Show Welcome command interaction:**
-  ![groupChat-BotCommands-interactions ](Images/groupChat-BotCommands-interaction.png)
+  ![groupChat-BotCommands-interactions ](Images/6.Welcome_Card_GC.png)
 
   - **Team Scope Interactions:**
 
    **Adding bot UI:**
-  ![team-AddBot ](Images/team-AddBot.png)
+  ![team-AddBot ](Images/7.Adding_to_Team.png)
 
    **Added bot UI:**
-  ![team-AddedBot ](Images/team-AddedBot.png)
+  ![team-AddedBot ](Images/8.Added_to_Team.png)
 
    **Show Welcome command interaction:**
-  ![team-WelcomeCommand-Card ](Images/team-WelcomeCommand-Card.png)
+  ![team-WelcomeCommand-Card ](Images/9.Welcome_Card_Team.png)
 
 2. **MentionMe**
   - **Result:** The bot will respond to the message and mention the user
@@ -157,17 +157,17 @@ You can interact with this bot in Teams by sending it a message, or selecting a
   - **Personal Scope Interactions:**
 
    **MentionMe command interaction:**
-  ![personal-MentionMeCommand ](Images/personal-MentionMeCommand.png)
+  ![personal-MentionMeCommand ](Images/10.Mention_Me_Chat.png)
 
    - **Group Chat Scope Interactions:**
 
    **MentionMe command interaction:**
-  ![groupChat-BotCommands-interactions ](Images/groupChat-BotCommands-interactions.png)
+  ![groupChat-BotCommands-interactions ](Images/11.Mention_Me_GC.png)
 
   - **Team Scope Interactions:**
 
    **MentionMe command interaction:**
-  ![team-MentionCommand-Interaction ](Images/team-MentionCommand-Interaction.png)
+  ![team-MentionCommand-Interaction ](Images/12.Mention_Me_Team.png)
 
 3. **MessageAllMembers**
   - **Result:** The bot will send a 1-on-1 message to each member in the current conversation (aka on the conversation's roster).
@@ -176,56 +176,34 @@ You can interact with this bot in Teams by sending it a message, or selecting a
   - **Personal Scope Interactions:**
 
    **MessageAllMembers command interaction:**
-  ![personal-MessageAllMembersCommand ](Images/personal-MessageAllMembersCommand.png)
+  ![personal-MessageAllMembersCommand ](Images/13.Message_all_Members_chat.png)
 
    - **Group Chat Scope Interactions:**
 
    **MessageAllMembers command interaction:**
-  ![groupChat-MessageAllMembers-interaction ](Images/groupChat-MessageAllMembers-interaction.png)
+   ![groupChat-MessageAllMembers-interaction ](Images/14.Message_all_Members_GC.png)
 
   - **Team Scope Interactions:**
 
    **MessageAllMembers command interaction:**
-  ![team-MessageAllMembers-interactions ](Images/team-MessageAllMembers-interactions.png)
-
-4.**Read Receipt**
+  ![team-MessageAllMembers-interactions ](Images/15.Message_all_Members_Team.png)
 
+  4.**Read Receipt**
   **Check Read count**
   - **Result:** The bot will check the count of members who have read your message which sent through `MessageAllMembers`. User can also reset the count using `Reset read count` command
   - **Valid Scopes:** personal, group chat, team chat
 
-  - **Personal Scope Interactions:**
-
-   **Check Read count command interaction:**
-  ![personal-CheckReadCount-interaction2 ](Images/personal-CheckReadCount-interaction2.png)
-
-   **Reset Read count command interaction:**
-  ![personal-ResetReadCount-interaction1 ](Images/personal-ResetReadCount-interaction1.png)
-
    - **Group Chat Scope Interactions:**
-
    **Check Read count command interaction:**
-  ![groupChat-CheckReadCount-interaction ](Images/groupChat-CheckReadCount-interaction.png)
-
-   **Reset Read count command interaction:**
-  ![groupChat-ResetReadCount-interaction ](Images/groupChat-ResetReadCount-interaction.png)
-
-  - **Team Scope Interactions:**
-
-  **Check Read count command interaction:**
-  ![team-CheckReadCount-interaction ](Images/team-CheckReadCount-interaction.png)
+  ![groupChat-CheckReadCount-interaction](Images/Check_Read_Count_Before.png)
 
    **Reset Read count command interaction:**
-  ![team-ResetReadCount-interaction ](Images/team-ResetReadCount-interaction.png)
-
+  ![groupChat-ResetReadCount-interaction](Images/Reset_Read_Count.png)
 
-5. **ImmersiveReader**
+ 5. **ImmersiveReader**
 - You can use the immersive reader property of adaptive cards by using the speak property.
 `immersivereader` command will send an adpative card in teams chat.
-![immersive-reader-card](Images/immersiveReaderCard.png)
-
-- Select the immersive reader option for running the speak property.
-![immersive-reader-option](Images/immersiveReaderOption.png)
+![immersive-reader-card](Images/34.Immersive_Reader_card_chat.png)
 
 - A new screen will be open and the text will be read by default which is mentioned inside the speak property of adaptive card.
 ![immersive-reader-screen](Images/immersiveReaderScreen.png)
@@ -234,13 +212,37 @@ You can interact with this bot in Teams by sending it a message, or selecting a
 - You will recieve event updates for message edit/delete features.
 
 - Message is edited
-![message-edit](Images/messageEditEvent.png)
+![message-edit](Images/36.Message_Edited.png)
 
 - Message is soft-deleted
-![message-soft-delete](Images/softDeleteMessage.png)
+![message-soft-delete](Images/37.Message_Deleted.png)
 
 - Message is restored
-![message-undelete](Images/messageUndelete.png)
+![message-undelete](Images/38.Message_Restored.png)
+
+ 7. **Format AI bot messages**
+- Consists features such as citations, feedback buttons, and sensitivity label that enables better user engagement
+
+- `AI label` - enables user to identify that the message was generated using AI.
+![AI-label](Images/AI-label.png)
+
+- `Citations` - enables user to refer to the source of the bot's message through in-text citations and the reference.
+![Citations](Images/citations.png)
+
+- `Feedback buttons` - enables user to provide positive or negative feedback based on their experience.
+![Feedback-buttons](Images/Feedback-buttons.png)
+
+![Feedback-buttons1](Images/Feedback-buttons1.png)
+
+![Feedback-buttons2](Images/Feedback-buttons2.png)
+
+![Feedback-buttons3](Images/Feedback-buttons3.png)
+
+- `Sensitivity label` - enables user to understand the confidentiality of the bot's message.
+![Sensitivity-label](Images/Sensitivity-label.png)
+
+- `Send AI message` - Replies back with a bot message containing all formats: AI label, Citations, Feedback buttons, and Sensitivity label.
+![sendtext](Images/sendtext.png)
 
 You can select an option from the command list by typing ```@TeamsConversationBot``` into the compose message area and ```What can I do?``` text above the compose area.
 

samples/bot-formatting-cards/csharp/README.md

@@ -23,7 +23,7 @@ This sample feature shows how to use different formatting on cards using bot.
 
 ## Interaction with app
 
-![Types Of Cards](BotFormattingCards/Images/DifferentFormattingCards.gif)
+![Types Of Cards](BotFormattingCards/Images/Bot_Formatting_Cards_nodejs_gif.gif)
 
 ## Try it yourself - experience the App in your Microsoft Teams client
 Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app manifest (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, [see steps here](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading)).
@@ -204,59 +204,59 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 **Install App:**
 
-![InstallApp](BotFormattingCards/Images/1.InstallApp.png)
+![InstallApp](BotFormattingCards/Images/1.Install.png)
 
 **Welcome Message:**
 
-![WelcomeMessage](BotFormattingCards/Images/2.WelcomeMessage.png)
-
-**Type Of Cards:**
-
-![TypeOfCards](BotFormattingCards/Images/3.TypeOfCards.png)
+![WelcomeMessage](BotFormattingCards/Images/2.Welcome_Message.png)
 
 **Mention Card:**
 
-![MentionCard](BotFormattingCards/Images/4.MentionCard.png)
+![MentionCard](BotFormattingCards/Images/3.Mention_support_card.png)
 
 **Information Mask Card:**
 
-![InformationMaskCard](BotFormattingCards/Images/5.InformationMaskCard.png)
+![InformationMaskCard](BotFormattingCards/Images/4.Info_Mask_card.png)
 
 **FullWidth Adaptive Card:**
 
-![FullWidthCard](BotFormattingCards/Images/6.FullWidthCard.png)
+![FullWidthCard](BotFormattingCards/Images/5.Full_Width_Card.png)
 
 **Stage View Card:**
 
-![StageViewCard](BotFormattingCards/Images/7.StageViewCard.png)
+![StageViewCard](BotFormattingCards/Images/6.Stage_View_Card.png)
 
 **Overflow Menu Card:**
 
-![OverflowMenuCard](BotFormattingCards/Images/8.OverflowMenuCard.png)
+![OverflowMenuCard](BotFormattingCards/Images/7.Over_Flow_Menu_Card.png)
 
 **HTML Connector Card:**
 
-![HTMLFormatCard](BotFormattingCards/Images/9.HTMLFormatCard.png)
+![HTMLFormatCard](BotFormattingCards/Images/8.HTTP_Connector_Card.png)
 
 **AdaptiveCard With Emoji:**
 
-![CardWithEmoji](BotFormattingCards/Images/10.CardWithEmoji.png)
+![CardWithEmoji](BotFormattingCards/Images/9.Adaptive_card_with_Emoji.png)
 
 **Persona Card Icon:**
 
-![PersonaCardIcon](BotFormattingCards/Images/12.PersonaCardIcon.png)
+![Persona](BotFormattingCards/Images/10.Persona_Card_Icon.png)
 
 **Persona Set Icon:**
 
-![PersonaCardSetIcon](BotFormattingCards/Images/13.PersonaCardSetIcon.png)
+![PersonaSet](BotFormattingCards/Images/11.Persona_Set_Icon.png)
+
+**Code Block in Adaptive Card:**
+
+![CodeBlock](BotFormattingCards/Images/12.Code_Block_Adaptive_Card.png)
 
 **Adaptive Card updated to be responsive using targetWidth:**
 
-![Layout](BotFormattingCards/Images/14.Layout.png)
+![Layout](BotFormattingCards/Images/13.Layout.png)
 
 **Mobile:**
 
-![Layout](BotFormattingCards/Images/15.LayoutMobile.png)
+![LayoutMobile](BotFormattingCards/Images/14.LayoutMobile.png)
 
 ## Deploy the bot to Azure
 

samples/bot-formatting-cards/nodejs/Readme.md

@@ -23,7 +23,7 @@ This sample shows the feature where user can use different formatting on adaptiv
 
 ## Interaction with app
 
-![Types Of Cards](Images/DifferentFormattingCards.gif)
+![Types Of Cards](Images/Bot_Formatting_Cards_nodejs_gif.gif)
 
 ## Try it yourself - experience the App in your Microsoft Teams client
 Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app package (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, [see steps here](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading)).
@@ -191,51 +191,51 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 **Install App:**
 
-![InstallApp](Images/1.InstallApp.png)
+![InstallApp](Images/1.Install.png)
 
 **Welcome Message:**
 
-![WelcomeMessage](Images/2.WelcomeMessage.png)
+![WelcomeMessage](Images/2.Welcome_Message.png)
 
 **Mention Card:**
 
-![MentionCard](Images/3.MentionCard.png)
+![MentionCard](Images/3.Mention_support_card.png)
 
 **Information Mask Card:**
 
-![InformationMaskCard](Images/4.InformationMaskCard.png)
+![InformationMaskCard](Images/4.Info_Mask_card.png)
 
 **FullWidth Adaptive Card:**
 
-![FullWidthCard](Images/5.FullWidthCard.png)
+![FullWidthCard](Images/5.Full_Width_Card.png)
 
 **Stage View Card:**
 
-![StageViewCard](Images/6.StageViewCard.png)
+![StageViewCard](Images/6.Stage_View_Card.png)
 
 **Overflow Menu Card:**
 
-![OverflowMenuCard](Images/7.OverflowMenuCard.png)
+![OverflowMenuCard](Images/7.Over_Flow_Menu_Card.png)
 
 **HTML Connector Card:**
 
-![HTMLFormatCard](Images/8.HTMLFormatCard.png)
+![HTMLFormatCard](Images/8.HTTP_Connector_Card.png)
 
 **AdaptiveCard With Emoji:**
 
-![CardWithEmoji](Images/9.CardWithEmoji.png)
+![CardWithEmoji](Images/9.Adaptive_card_with_Emoji.png)
 
 **Persona Card Icon:**
 
-![Persona](Images/10.Persona.png)
+![Persona](Images/10.Persona_Card_Icon.png)
 
 **Persona Set Icon:**
 
-![PersonaSet](Images/11.PersonaSet.png)
+![PersonaSet](Images/11.Persona_Set_Icon.png)
 
 **Code Block in Adaptive Card:**
 
-![CodeBlock](Images/12.CodeBlocks.png)
+![CodeBlock](Images/12.Code_Block_Adaptive_Card.png)
 
 **Adaptive Card updated to be responsive using targetWidth:**
 

samples/bot-receive-channel-messages-withRSC/csharp/ReceiveMessagesWithRSC/README.md

@@ -7,7 +7,7 @@ This feature shown in this sample is currently available in Public Developer Pre
 
 - Showing messages based on option selected
 
-![Channel messages](Images/botWithRSCFlow.png)
+![Bot Receive Channel MessagesWithRSCGif](images/Bot_Channel_Messenging-RSC-nodejs-gif.gif)
 
 ## Prerequisites
 
@@ -60,9 +60,7 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
          - Then select **Upload a custom app** from the lower right corner.
          - Then select the `manifest.zip` file from `AppManifest`, and then select **Add** to add the bot to your selected team.
 
-![App Installation](Images/installApp.png)
-
-![Permissions](Images/permissions1.png)
+![App Installation](Images/1.Install.png)
 
 ## To try this sample
 
@@ -90,12 +88,27 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
   - Select `ReceiveMessagesWithRSC.csproj` file
   - Press `F5` to run the project
 
-## Interacting with the bot in Teams
+## Running the sample
+
+**Adding bot UI:**
+
+![App installation](images/1.Install.png)
+
+**Hey command interaction:**
+
+![Permissions](images/3.Interaction.png)
+
+**1 or 2 command interaction:**
+
+![Permissions](images/4.1_and_2_Command_Interaction.png) 
+
+**Adding App to group chat:**
 
-Select a channel and enter a message in the channel for your bot.
+![Adding To Groupchat](images/5.Install_to_GC.png) 
 
-The bot receives the message without being @mentioned.
+**Group chat interaction with bot without being @mentioned:**
 
+![Group Chat](images/7.1_and_2_Command_Interaction.png) 
 ## Deploy the bot to Azure
 
 To learn more about deploying a bot to Azure, see [Deploy your bot to Azure](https://aka.ms/azuredeployment) for a complete list of deployment instructions.