diff --git a/teams.md/src/components/include/in-depth-guides/message-reactions/csharp.incl.md b/teams.md/src/components/include/in-depth-guides/message-reactions/csharp.incl.md new file mode 100644 index 000000000..cc89719f8 --- /dev/null +++ b/teams.md/src/components/include/in-depth-guides/message-reactions/csharp.incl.md @@ -0,0 +1,80 @@ + + +```csharp +app.OnMessage(async context => +{ + await context.Send("Hello! I'll react to this message."); + + // Add a reaction to the incoming message + await context.Api.Conversations.Reactions.AddAsync( + context.Activity.Conversation.Id, + context.Activity.Id, + ReactionType.Like + ); +}); +``` + + + +```csharp +app.OnMessage(async context => +{ + // First, add a reaction + await context.Api.Conversations.Reactions.AddAsync( + context.Activity.Conversation.Id, + context.Activity.Id, + ReactionType.Heart + ); + + // Wait a bit, then remove it + await Task.Delay(2000); + await context.Api.Conversations.Reactions.DeleteAsync( + context.Activity.Conversation.Id, + context.Activity.Id, + ReactionType.Heart + ); +}); +``` + + + +The following reaction types are available: + +- `ReactionType.Like` — 👍 +- `ReactionType.Heart` — ❤️ +- `ReactionType.Checkmark` — ✅ +- `ReactionType.Hourglass` — ⏳ +- `ReactionType.Pushpin` — 📌 +- `ReactionType.Exclamation` — ❗ +- `ReactionType.Laugh` — 😆 +- `ReactionType.Surprise` — 😮 +- `ReactionType.Sad` — 🙁 +- `ReactionType.Angry` — 😠 + +You can also use custom reaction types by creating a new `ReactionType` instance: + +```csharp +// Use a custom emoji reaction +var customReaction = new ReactionType("1f44b_wavinghand-tone4"); + +await context.Api.Conversations.Reactions.AddAsync( + context.Activity.Conversation.Id, + context.Activity.Id, + customReaction +); +``` + + + +For advanced scenarios where you need to use a custom service URL or access the HTTP client directly, you can use the `ApiClient.Client` property: + +```csharp +// Access the underlying HTTP client for custom requests +var api = new ApiClient(context.Activity.ServiceUrl, context.Api.Client); + +await api.Conversations.Reactions.AddAsync( + context.Activity.Conversation.Id, + context.Activity.Id, + ReactionType.Like +); +``` diff --git a/teams.md/src/components/include/in-depth-guides/message-reactions/python.incl.md b/teams.md/src/components/include/in-depth-guides/message-reactions/python.incl.md new file mode 100644 index 000000000..e3cc55569 --- /dev/null +++ b/teams.md/src/components/include/in-depth-guides/message-reactions/python.incl.md @@ -0,0 +1,79 @@ + + +```python +@app.on_message +async def handle_message(ctx: ActivityContext[MessageActivity]): + await ctx.send("Hello! I'll react to this message.") + + # Add a reaction to the incoming message + await ctx.api.conversations.reactions.add( + ctx.activity.conversation.id, + ctx.activity.id, + 'like' + ) +``` + + + +```python +import asyncio + +@app.on_message +async def handle_message(ctx: ActivityContext[MessageActivity]): + # First, add a reaction + await ctx.api.conversations.reactions.add( + ctx.activity.conversation.id, + ctx.activity.id, + 'heart' + ) + + # Wait a bit, then remove it + await asyncio.sleep(2) + await ctx.api.conversations.reactions.delete( + ctx.activity.conversation.id, + ctx.activity.id, + 'heart' + ) +``` + + + +The following reaction types are available: + +- `'like'` — 👍 +- `'heart'` — ❤️ +- `'checkmark'` — ✅ +- `'hourglass'` — ⏳ +- `'pushpin'` — 📌 +- `'exclamation'` — ❗ +- `'laugh'` — 😆 +- `'surprise'` — 😮 +- `'sad'` — 🙁 +- `'angry'` — 😠 + +You can also use custom emoji reactions by providing the emoji code: + +```python +# Use a custom emoji reaction +await ctx.api.conversations.reactions.add( + ctx.activity.conversation.id, + ctx.activity.id, + '1f44b_wavinghand-tone4' +) +``` + + + +For advanced scenarios, you can access the API client from the context: + +```python +# The API client is available through the context +api = ctx.api + +# Use reactions API +await api.conversations.reactions.add( + conversation_id, + activity_id, + 'like' +) +``` diff --git a/teams.md/src/components/include/in-depth-guides/message-reactions/typescript.incl.md b/teams.md/src/components/include/in-depth-guides/message-reactions/typescript.incl.md new file mode 100644 index 000000000..d78725951 --- /dev/null +++ b/teams.md/src/components/include/in-depth-guides/message-reactions/typescript.incl.md @@ -0,0 +1,61 @@ + + +```typescript +app.on('message', async ({ activity, api, send }) => { + await send("Hello! I'll react to this message."); + + // Add a reaction to the incoming message + await api.conversations.reactions.add(activity.conversation.id, activity.id, 'like'); +}); +``` + + + +```typescript +app.on('message', async ({ activity, api }) => { + // First, add a reaction + await api.conversations.reactions.add(activity.conversation.id, activity.id, 'heart'); + + // Wait a bit, then remove it + await new Promise((resolve) => setTimeout(resolve, 2000)); + await api.conversations.reactions.delete(activity.conversation.id, activity.id, 'heart'); +}); +``` + + + +The following reaction types are available: + +- `'like'` — 👍 +- `'heart'` — ❤️ +- `'checkmark'` — ✅ +- `'hourglass'` — ⏳ +- `'pushpin'` — 📌 +- `'exclamation'` — ❗ +- `'laugh'` — 😆 +- `'surprise'` — 😮 +- `'sad'` — 🙁 +- `'angry'` — 😠 + +You can also use custom emoji reactions by providing the emoji code: + +```typescript +// Use a custom emoji reaction +await api.conversations.reactions.add( + activity.conversation.id, + activity.id, + '1f44b_wavinghand-tone4' +); +``` + + + +For advanced scenarios, you can access the underlying HTTP client or create a custom API client instance: + +```typescript +// The API client is available through the context +const { api } = context; + +// Use reactions API +await api.conversations.reactions.add(conversationId, activityId, 'like'); +``` diff --git a/teams.md/src/pages/templates/in-depth-guides/message-reactions.mdx b/teams.md/src/pages/templates/in-depth-guides/message-reactions.mdx new file mode 100644 index 000000000..4dfe32b11 --- /dev/null +++ b/teams.md/src/pages/templates/in-depth-guides/message-reactions.mdx @@ -0,0 +1,52 @@ +--- +sidebar_position: 8 +title: Message Reactions +sidebar_label: Message Reactions +summary: Guide to adding and removing message reactions in Teams applications, including available reaction types and best practices for implementing reaction functionality. +--- + +# Message Reactions + +Message reactions allow your bot to add emoji reactions to messages in Teams conversations. This feature enables your bot to provide quick, non-verbal feedback to user messages, enhancing the interactive experience. + +## Adding a Reaction + +To add a reaction to a message, use the `Reactions` API available through the conversations client: + + + +## Removing a Reaction + +You can also remove reactions that your bot has added: + + + +## Available Reaction Types + + + +:::info Custom Reactions +In addition to the standard reaction types listed above, you can use any valid Teams emoji reaction code. Teams supports a wide variety of emoji reactions beyond the standard set. +::: + +## Advanced Usage + + + +## Best Practices + +When working with message reactions, consider the following: + +- **Use reactions sparingly**: Reactions work best when used to provide meaningful feedback rather than reacting to every message. +- **Consider the context**: Different reaction types convey different meanings. Choose reactions that align with your bot's purpose and the conversation context. +- **Handle errors gracefully**: Reaction operations may fail (e.g., if the message no longer exists). Always handle potential errors appropriately. +- **Be aware of rate limits**: Like other bot operations, reaction operations are subject to Teams API rate limits. + +## Differences from Feedback + +Message reactions are different from the [feedback](./feedback) feature: + +- **Reactions** are quick emoji responses that your bot adds to messages programmatically +- **Feedback** are interactive UI components (like/dislike buttons) that users can click to provide structured feedback on bot responses + +Use reactions when your bot wants to acknowledge or respond to messages with emoji. Use feedback when you want to collect user opinions about your bot's responses.