dugjason/index.html

## index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <script type="text/javascript" src="//dl.frontapp.com/libs/plugin-sdk-1.0.1.min.js"></script>
  <title>Front Plugin v1</title>

</head>
<body>
  <div class="container mx-auto">
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
      <div class="px-4 py-5 sm:px-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900">
          Conversation Subject
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-gray-500" id="conversationSubject">
        </p>
      </div>
      <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
        <dl class="sm:divide-y sm:divide-gray-200">
          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-500">
              Teammate name
            </dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" id="teammateName">
            </dd>
          </div>
          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-500">
              Assign conversation
            </dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
              <span class="relative z-0 inline-flex shadow-sm rounded-md">
                <button type="button" class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" id="assignButton">
                  Assign to me
                </button>
                <button type="button" class="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" id="unassignButton">
                  Unassign
                </button>
              </span>
            </dd>
          </div>
        </dl>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="./index.js"></script>
</body>
</html>

## index.js
Front.contextUpdates.subscribe(context => {

  switch(context.type) {
    case 'noConversation':
      console.log('No conversation selected');
      break;
    case 'singleConversation':
      console.log('Conversation object: ', context.conversation);

      setSubject(context.conversation)
      setTeammate(context.teammate)

      let assignButton = document.getElementById('assignButton');
      assignButton.addEventListener('click', () => {
        Front.assign(context.teammate.id)
      });

      let unassignButton = document.getElementById('unassignButton');
      unassignButton.addEventListener('click', () => {
        Front.assign(null)
      });

      break;
    case 'multiConversations':
      console.log('Multiple conversations selected', context.conversations);
      break;
    default:
      console.error(`Unsupported context type: ${context.type}`);
      break;
  }
});

function setTeammate(teammate) {
  let displayTeammate = document.getElementById('teammateName');
  displayTeammate.innerHTML = teammate.name.split(' ')[0];
}

async function setSubject(conversation) {
  let subjectElement = document.getElementById('conversationSubject');
  subjectElement.innerHTML = conversation.subject;
}
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	<script type="text/javascript" src="//dl.frontapp.com/libs/plugin-sdk-1.0.1.min.js"></script>
	<title>Front Plugin v1</title>

	</head>
	<body>
	<div class="container mx-auto">
	<div class="bg-white shadow overflow-hidden sm:rounded-lg">
	<div class="px-4 py-5 sm:px-6">
	<h3 class="text-lg leading-6 font-medium text-gray-900">
	Conversation Subject
	</h3>
	<p class="mt-1 max-w-2xl text-sm text-gray-500" id="conversationSubject">
	</p>
	</div>
	<div class="border-t border-gray-200 px-4 py-5 sm:p-0">
	<dl class="sm:divide-y sm:divide-gray-200">
	<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
	<dt class="text-sm font-medium text-gray-500">
	Teammate name
	</dt>
	<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" id="teammateName">
	</dd>
	</div>
	<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
	<dt class="text-sm font-medium text-gray-500">
	Assign conversation
	</dt>
	<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
	<span class="relative z-0 inline-flex shadow-sm rounded-md">
	<button type="button" class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" id="assignButton">
	Assign to me
	</button>
	<button type="button" class="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" id="unassignButton">
	Unassign
	</button>
	</span>
	</dd>
	</div>
	</dl>
	</div>
	</div>
	</div>

	<script type="text/javascript" src="./index.js"></script>
	</body>
	</html>
	Front.contextUpdates.subscribe(context => {

	switch(context.type) {
	case 'noConversation':
	console.log('No conversation selected');
	break;
	case 'singleConversation':
	console.log('Conversation object: ', context.conversation);

	setSubject(context.conversation)
	setTeammate(context.teammate)

	let assignButton = document.getElementById('assignButton');
	assignButton.addEventListener('click', () => {
	Front.assign(context.teammate.id)
	});

	let unassignButton = document.getElementById('unassignButton');
	unassignButton.addEventListener('click', () => {
	Front.assign(null)
	});

	break;
	case 'multiConversations':
	console.log('Multiple conversations selected', context.conversations);
	break;
	default:
	console.error(`Unsupported context type: ${context.type}`);
	break;
	}
	});

	function setTeammate(teammate) {
	let displayTeammate = document.getElementById('teammateName');
	displayTeammate.innerHTML = teammate.name.split(' ')[0];
	}

	async function setSubject(conversation) {
	let subjectElement = document.getElementById('conversationSubject');
	subjectElement.innerHTML = conversation.subject;
	}