Teams App Developer

import { App } from '@microsoft/teams.apps';
import { ConsoleLogger } from '@microsoft/teams.common';
import { DevtoolsPlugin } from '@microsoft/teams.dev';

// Manifest excerpt (appPackage/manifest.json):
// {
//   "composeExtensions": [{
//     "botId": "${{BOT_ID}}",
//     "commands": [{
//       "id": "searchCmd",
//       "type": "query",
//       "title": "Search Products",
//       "parameters": [{ "name": "query", "title": "Search query" }]
//     }]
//   }]
// }

interface Product {
  id: string;
  title: string;
  description: string;
  price: number;
  imageUrl: string;
}

async function searchProducts(query: string): Promise<Product[]> {
  // Replace with your actual search logic
  const products: Product[] = [
    { id: '1', title: 'Widget Pro', description: 'A premium widget', price: 29.99, imageUrl: 'https://example.com/widget.png' },
    { id: '2', title: 'Gadget Plus', description: 'An advanced gadget', price: 49.99, imageUrl: 'https://example.com/gadget.png' },
  ];
  return products.filter(p =>
    p.title.toLowerCase().includes(query.toLowerCase())
  );
}

const app = new App({
  logger: new ConsoleLogger('ext-bot'),
  plugins: [new DevtoolsPlugin()],
});

app.on('message.ext.query', async ({ activity }) => {
  const query = activity.value.parameters?.[0]?.value || '';
  const results = await searchProducts(query);

  return {
    status: 200,
    body: {
      composeExtension: {
        type: 'result',
        attachmentLayout: 'list',
        attachments: results.map(item => ({
          // Full card inserted into compose box when selected
          contentType: 'application/vnd.microsoft.card.adaptive',
          content: {
            type: 'AdaptiveCard',
            version: '1.5',
            body: [
              { type: 'TextBlock', text: item.title, weight: 'Bolder', size: 'Large' },
              { type: 'TextBlock', text: item.description, wrap: true },
              { type: 'TextBlock', text: `Price: $${item.price}`, weight: 'Bolder' },
            ],
          },
          // Preview card shown in search results list
          preview: {
            contentType: 'application/vnd.microsoft.card.thumbnail',
            content: {
              title: item.title,
              text: `$${item.price} - ${item.description}`,
              images: [{ url: item.imageUrl }],
            },
          },
        })),
      },
    },
  };
});

app.start(3978);

import { App } from '@microsoft/teams.apps';
import { ConsoleLogger } from '@microsoft/teams.common';
import { DevtoolsPlugin } from '@microsoft/teams.dev';

// Manifest excerpt (appPackage/manifest.json):
// {
//   "composeExtensions": [{
//     "botId": "${{BOT_ID}}",
//     "commands": [{
//       "id": "createItem",
//       "type": "action",
//       "title": "Create Item",
//       "fetchTask": true
//     }]
//   }]
// }

const app = new App({
  logger: new ConsoleLogger('action-ext-bot'),
  plugins: [new DevtoolsPlugin()],
});

// Open a task module form when the action is triggered
app.on('message.ext.open', async () => {
  return {
    status: 200,
    body: {
      task: {
        type: 'continue',
        value: {
          title: 'Create New Item',
          width: 'medium',
          height: 'medium',
          card: {
            contentType: 'application/vnd.microsoft.card.adaptive',
            content: {
              type: 'AdaptiveCard',
              version: '1.5',
              body: [
                {
                  type: 'TextBlock',
                  text: 'Create a new item',
                  weight: 'Bolder',
                  size: 'Large',
                },
                {
                  type: 'Input.Text',
                  id: 'title',
                  label: 'Title',
                  isRequired: true,
                  errorMessage: 'Title is required',
                },
                {
                  type: 'Input.Text',
                  id: 'description',
                  label: 'Description',
                  isMultiline: true,
                },
                {
                  type: 'Input.ChoiceSet',
                  id: 'priority',
                  label: 'Priority',
                  value: 'medium',
                  choices: [
                    { title: 'Low', value: 'low' },
                    { title: 'Medium', value: 'medium' },
                    { title: 'High', value: 'high' },
                  ],
                },
              ],
              actions: [
                { type: 'Action.Submit', title: 'Create' },
              ],
            },
          },
        },
      },
    },
  };
});

// Process the submitted form data
app.on('message.ext.submit', async ({ activity, send }) => {
  const data = activity.value.data;
  const { title, description, priority } = data;

  // Create the item in your backend
  const itemId = `ITEM-${Date.now()}`;

  await send(`Created item "${title}" (${priority} priority) - ID: ${itemId}`);
});

app.start(3978);

import { App } from '@microsoft/teams.apps';

// Manifest excerpt (appPackage/manifest.json):
// {
//   "composeExtensions": [{
//     "botId": "${{BOT_ID}}",
//     "commands": [
//       {
//         "id": "searchItems",
//         "type": "query",
//         "title": "Search Items",
//         "parameters": [{ "name": "query", "title": "Search" }]
//       },
//       {
//         "id": "createItem",
//         "type": "action",
//         "title": "Create Item",
//         "fetchTask": true
//       }
//     ]
//   }]
// }

const app = new App();

// Search extension handler
app.on('message.ext.query', async ({ activity }) => {
  const query = activity.value.parameters?.[0]?.value || '';
  const commandId = activity.value.commandId;

  // You can route by commandId if multiple search commands exist
  const items = [
    { id: '1', title: 'Task Alpha', status: 'open' },
    { id: '2', title: 'Task Beta', status: 'closed' },
  ].filter(i => i.title.toLowerCase().includes(query.toLowerCase()));

  return {
    status: 200,
    body: {
      composeExtension: {
        type: 'result',
        attachmentLayout: 'list',
        attachments: items.map(item => ({
          contentType: 'application/vnd.microsoft.card.adaptive',
          content: {
            type: 'AdaptiveCard',
            version: '1.5',
            body: [
              { type: 'TextBlock', text: item.title, weight: 'Bolder' },
              { type: 'TextBlock', text: `Status: ${item.status}` },
            ],
          },
          preview: {
            contentType: 'application/vnd.microsoft.card.thumbnail',
            content: {
              title: item.title,
              text: `Status: ${item.status}`,
            },
          },
        })),
      },
    },
  };
});

// Action extension: open form
app.on('message.ext.open', async () => {
  return {
    status: 200,
    body: {
      task: {
        type: 'continue',
        value: {
          title: 'Create Item',
          card: {
            contentType: 'application/vnd.microsoft.card.adaptive',
            content: {
              type: 'AdaptiveCard',
              version: '1.5',
              body: [
                { type: 'Input.Text', id: 'title', label: 'Title', isRequired: true },
                { type: 'Input.Text', id: 'notes', label: 'Notes', isMultiline: true },
              ],
              actions: [
                { type: 'Action.Submit', title: 'Create' },
              ],
            },
          },
        },
      },
    },
  };
});

// Action extension: process submission
app.on('message.ext.submit', async ({ activity, send }) => {
  const { title, notes } = activity.value.data;
  await send(`Created: ${title}${notes ? ` - ${notes}` : ''}`);
});

app.start(3978);