Add devtools

[corinagum]

Devtools

• Use FluentUI
• Use fluentui icon fonts instead of svg's
• Componentize:
  • Chats
  • Chat container/message container/
  • Markdown in messages
  • ComposeBox
  • (New Message Toolbar)
  • MessageReactions toolbar
  • Page navigation
  • Devtools banner with beta badge
  • Typing indicator
  • Activities screen / details
  • Attachments
• Redesigned:
  • Streaming
  • Scrollbar
  • LightTheme/DarkTheme (Dark theme is default unless the system prefers light theme)
• Hooks
  • useSparkApi
  • useTheme

---

Notes

• Keyboard navigation semi-works, but is not 100% for chat messages.
• Generally tried to pay attention to a11y while developing, but it will get more of my focus next month
• Still need to implement Ctrl+Shift for new lines in ComposeBox
• Still need to implement up arrow chat message history

---

Screenshots

Offline UI

Online UI + streaming

Message reactions

Activities view:

No-activities Activities view:

Activity details:

Cards screen:

Attachments: