@webinex/chatify 1.0.3-rc3 → 2.0.0-build1

package/src/ui/Conversation/Conversation.tsx

@@ -0,0 +1,76 @@
+import { ConversationHeader } from './ConversationHeader';
+import { ConversationBody } from './ConversationBody';
+import { customize } from '../customize';
+import { ConversationName } from './ConversationName';
+import { ConversationContext, ConversationContextValue, ConversationValue } from './ConversationContext';
+import { useMemo } from 'react';
+import { InputBox, InputBoxCustomizeValue } from './InputBox';
+import { ConversationActions } from './ConversationActions';
+import { MessageCustomizeValue } from './Message';
+import { SendingMessageCustomizeValue } from './SendingMessage';
+import { SystemMessageCustomizeValue } from './SystemMessage';
+import { CommonCustomizeValue } from '../common';
+
+export interface ConversationProps extends Omit<ConversationContextValue, keyof ConversationValue> {
+  value: ConversationValue;
+}
+
+export interface ConversationCustomizeValue
+  extends InputBoxCustomizeValue,
+    MessageCustomizeValue,
+    SendingMessageCustomizeValue,
+    SystemMessageCustomizeValue,
+    CommonCustomizeValue {
+  ConversationActions?: typeof ConversationActions.Component | null;
+  ConversationBody?: typeof ConversationBody.Component | null;
+  ConversationHeader?: typeof ConversationHeader.Component | null;
+  ConversationName?: typeof ConversationName.Component | null;
+}
+
+export const Conversation = customize('Conversation', (props: ConversationProps) => {
+  const { value, hasMore, messages, nextLoading, onNext, onRead, onSend, isReading, noReadTracking } = props;
+  const { id, active, name, lastReadMessageId } = value;
+
+  const context = useMemo<ConversationContextValue>(
+    () => ({
+      id,
+      name,
+      active,
+      lastReadMessageId,
+      hasMore,
+      messages,
+      nextLoading,
+      onNext,
+      onRead,
+      onSend,
+      isReading,
+      noReadTracking,
+    }),
+    [
+      id,
+      name,
+      active,
+      onNext,
+      onRead,
+      onSend,
+      hasMore,
+      messages,
+      nextLoading,
+      lastReadMessageId,
+      isReading,
+      noReadTracking,
+    ],
+  );
+
+  return (
+    <ConversationContext.Provider value={context}>
+      <div className="wxchtf-conversation">
+        <div className="wxchtf-conversation-main">
+          <ConversationHeader />
+          <ConversationBody />
+          {active && <InputBox />}
+        </div>
+      </div>
+    </ConversationContext.Provider>
+  );
+});

package/src/ui/Conversation/ConversationActions.tsx

@@ -0,0 +1,5 @@
+import { customize } from '../customize';
+
+export const ConversationActions = customize('ConversationActions', () => {
+  return null;
+});

package/src/ui/Conversation/ConversationBody.tsx

@@ -0,0 +1,28 @@
+import { MessageBox } from './Message';
+import { NextMessagesObserver } from './NextObserver';
+import { SystemMessageBox } from './SystemMessage';
+import { MessageSkeleton } from '../common/MessageSkeleton';
+import { customize } from '../customize';
+import { SYSTEM_ID } from '../../core';
+import { useConversation } from './ConversationContext';
+
+// TODO: Add sending message box
+export const ConversationBody = customize('ConversationBody', () => {
+  const { id, messages = [], hasMore, onNext, nextLoading } = useConversation();
+
+  return (
+    <div className="wxchtf-conversation-body">
+      {!messages && <MessageSkeleton count={5} />}
+
+      {messages?.map((x) => {
+        if (x.sentBy.id === SYSTEM_ID) {
+          return <SystemMessageBox key={x.id} message={x} />;
+        }
+
+        return <MessageBox message={x} key={x.id} />;
+      })}
+
+      {hasMore && <NextMessagesObserver key={messages.length + id} onLoad={onNext} loading={nextLoading} />}
+    </div>
+  );
+});

package/src/ui/Conversation/ConversationContext.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { MessageBase, MessageBody } from '../../core';
+
+export interface ConversationValue {
+  id: string;
+  name: string;
+  active: boolean;
+  lastReadMessageId: string | null;
+}
+
+export interface ConversationContextValue extends ConversationValue {
+  messages?: MessageBase[];
+  hasMore?: boolean;
+  nextLoading: boolean;
+  noReadTracking?: boolean;
+
+  isReading: (id: string) => boolean;
+  onNext: () => void;
+  onSend: (message: MessageBody) => void;
+  onRead: (id: string) => void;
+}
+
+export const ConversationContext = React.createContext<ConversationContextValue>(undefined!);
+
+export function useConversation() {
+  return React.useContext(ConversationContext);
+}

package/src/ui/Conversation/ConversationHeader.tsx

@@ -0,0 +1,23 @@
+import { Col, Row } from 'antd';
+import { customize, useCustomize } from '../customize';
+import { ConversationName } from './ConversationName';
+import { ConversationActions } from './ConversationActions';
+
+export const ConversationHeader = customize('ConversationHeader', () => {
+  const Actions = useCustomize(ConversationActions);
+
+  return (
+    <div className="wxchtf-conversation-header">
+      <Row justify="space-between" align="middle">
+        <Col>
+          <ConversationName />
+        </Col>
+        {Actions && (
+          <Col className="wxchtf-conversation-actions">
+            <Actions />
+          </Col>
+        )}
+      </Row>
+    </div>
+  );
+});

package/src/ui/Conversation/ConversationName.tsx

@@ -0,0 +1,7 @@
+import { customize } from '../customize';
+import { useConversation } from './ConversationContext';
+
+export const ConversationName = customize('ConversationName', () => {
+  const { name } = useConversation();
+  return <span className="wxchtf-conversation-name">{name}</span>;
+});

package/src/ui/Conversation/InputBox/InputBox.tsx

@@ -0,0 +1,40 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { InputFilesBox } from './InputFilesBox';
+import { InputTextBox } from './InputTextBox';
+import { customize } from '../../customize';
+import { InputSubmitButtonBox } from './InputSubmitButtonBox';
+import { useConversation } from '../ConversationContext';
+
+function useFormState() {
+  const { onSend } = useConversation();
+  const [text, setText] = useState('');
+
+  const onSubmit = useCallback(() => {
+    if (text.length === 0) {
+      return;
+    }
+
+    setText('');
+    Promise.resolve(onSend({ text, files: [] })).catch(() => setText(text));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text, onSend]);
+
+  return [onSubmit, { text, setText }] as const;
+}
+
+export const InputBox = customize('InputBox', () => {
+  const [onSend, { text, setText }] = useFormState();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => inputRef.current?.focus(), []);
+
+  return (
+    <div className="wxchtf-input-form">
+      <div className="wxchtf-input-box">
+        <InputFilesBox />
+        <InputTextBox value={text} onSend={onSend} onChange={setText} inputRef={inputRef} />
+        <InputSubmitButtonBox onSubmit={onSend} />
+      </div>
+    </div>
+  );
+});

package/src/ui/{InputBox → Conversation/InputBox}/InputFilesBox.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'antd';
-import { customize } from '../customize';
-import { Icon } from '../Icon';
+import { customize } from '../../customize';
+import { Icon } from '../../common/Icon';
 
 export const InputFilesBox = customize('InputFilesBox', () => (
   <div className="wxchtf-add-files-box">

package/src/ui/{InputBox → Conversation/InputBox}/InputSubmitButtonBox.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'antd';
-import { customize } from '../customize';
-import { Icon } from '../Icon';
+import { customize } from '../../customize';
+import { Icon } from '../../common/Icon';
 
 export interface InputSubmitButtonBoxProps {
   onSubmit: () => void;

package/src/ui/{InputBox → Conversation/InputBox}/InputTextBox.tsx

@@ -1,14 +1,15 @@
 import { Input } from 'antd';
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import isHotkey from 'is-hotkey';
-import { memo, useCallback } from 'react';
-import { useLocalizer } from '../localizer';
+import { RefObject, memo, useCallback } from 'react';
+import { useLocalizer } from '../../localizer';
 import { TextAreaProps } from 'antd/es/input';
 
 export interface TextInputBoxProps {
   value: string;
   onChange: (value: string) => void;
   onSend: (value: string) => void;
+  inputRef?: RefObject<HTMLTextAreaElement>;
 }
 
 const isSend = isHotkey('ctrl+enter');
@@ -18,7 +19,7 @@ const AUTO_SIZE: TextAreaProps['autoSize'] = { maxRows: 5, minRows: 1 };
 export const InputTextBox = customize(
   'InputTextBox',
   memo((props: TextInputBoxProps) => {
-    const { value, onChange, onSend } = props;
+    const { value, onChange, onSend, inputRef } = props;
     const localizer = useLocalizer();
 
     const onInputChange = useCallback(
@@ -38,6 +39,7 @@ export const InputTextBox = customize(
     return (
       <div className="wxchtf-text-input-box">
         <Input.TextArea
+          ref={inputRef}
           value={value}
           onChange={onInputChange}
           autoSize={AUTO_SIZE}

package/src/ui/Conversation/InputBox/index.ts

@@ -0,0 +1,16 @@
+import { InputBox } from './InputBox';
+import { InputFilesBox } from './InputFilesBox';
+import { InputSubmitButtonBox } from './InputSubmitButtonBox';
+import { InputTextBox } from './InputTextBox';
+
+export * from './InputBox';
+export * from './InputFilesBox';
+export * from './InputSubmitButtonBox';
+export * from './InputTextBox';
+
+export interface InputBoxCustomizeValue {
+  InputBox?: typeof InputBox.Component | null;
+  InputTextBox?: typeof InputTextBox.Component | null;
+  InputFilesBox?: typeof InputFilesBox.Component | null;
+  InputSubmitButtonBox?: typeof InputSubmitButtonBox.Component | null;
+}

package/src/ui/{Message → Conversation/Message}/MessageAuthor.tsx

@@ -1,5 +1,5 @@
-import { customize } from '../customize';
-import { Avatar } from '../Avatar';
+import { customize } from '../../customize';
+import { Avatar } from '../../common/Avatar';
 import type { MessageBoxProps } from './MessageBox';
 
 export const MessageAuthor = customize('MessageAuthor', (props: MessageBoxProps) => {

package/src/ui/{Message → Conversation/Message}/MessageBox.tsx

@@ -1,11 +1,11 @@
 import { useRef } from 'react';
-import { Message } from '../../core';
-import { customize } from '../customize';
-import { MessageReadObserver } from '../MessageReadObserver';
+import { customize } from '../../customize';
+import { MessageReadObserver } from '../ReadObserver';
 import { MessageRow } from './MessageRow';
+import { MessageBase } from '../../../core';
 
 export interface MessageBoxProps {
-  message: Message;
+  message: MessageBase;
 }
 
 export const MessageBox = customize('MessageBox', (props: MessageBoxProps) => {

package/src/ui/{Message → Conversation/Message}/MessageContent.tsx

@@ -1,4 +1,4 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { MessageText } from './MessageText';
 import type { MessageBoxProps } from './MessageBox';
 

package/src/ui/{Message → Conversation/Message}/MessageInfoBox.tsx

@@ -1,22 +1,24 @@
-import { useMe } from '../../ChatifyContext';
-import { useSelect } from '../../core';
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
+import { chatifyApi } from '../../../core';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { useConversation } from '../ConversationContext';
 import type { MessageBoxProps } from './MessageBox';
 
 export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProps) => {
   const { message } = props;
   const { id, sentBy, sentAt } = message;
-  const me = useMe();
+  const { lastReadMessageId, isReading, noReadTracking } = useConversation();
+  const me = chatifyApi.settings.me();
   const my = sentBy.id === me;
   const localizer = useLocalizer();
-  const reading = useSelect((x) => x.queue.read.queued.includes(id), []);
+  const isRead = lastReadMessageId != null && id.localeCompare(lastReadMessageId) <= 0;
+  const reading = !isRead && isReading(id);
 
   return (
     <div className="wxchtf-message-info-box">
       {!my && <div className="wxchtf-message-author-name">{sentBy.name},</div>}
       <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
-      {!my && (
+      {!my && !noReadTracking && (
         <div className="wxchtf-message-read-box">
           {reading ? localizer.message.reading() : localizer.message.read()}
         </div>

package/src/ui/{Message → Conversation/Message}/MessageRow.tsx

@@ -1,10 +1,10 @@
-import { useMe } from '../../ChatifyContext';
 import { Ref } from 'react';
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { MessageAuthor } from './MessageAuthor';
 import { MessageContent } from './MessageContent';
 import { MessageBoxProps } from './MessageBox';
 import { MessageInfoBox } from './MessageInfoBox';
+import { chatifyApi } from '../../../core';
 
 export interface MessageRowProps extends MessageBoxProps {
   containerRef?: Ref<HTMLDivElement>;
@@ -13,7 +13,7 @@ export interface MessageRowProps extends MessageBoxProps {
 export const MessageRow = customize('MessageRow', (props: MessageRowProps) => {
   const { message, containerRef } = props;
   const { sentBy } = message;
-  const me = useMe();
+  const me = chatifyApi.settings.me();
   const my = sentBy.id === me;
 
   return (

package/src/ui/{Message → Conversation/Message}/MessageText.tsx

@@ -1,4 +1,4 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { MessageBoxProps } from './MessageBox';
 
 export const MessageText = customize('MessageText', (props: MessageBoxProps) => {

package/src/ui/Conversation/Message/index.ts

@@ -0,0 +1,22 @@
+import { MessageAuthor } from './MessageAuthor';
+import { MessageBox } from './MessageBox';
+import { MessageContent } from './MessageContent';
+import { MessageInfoBox } from './MessageInfoBox';
+import { MessageRow } from './MessageRow';
+import { MessageText } from './MessageText';
+
+export * from './MessageAuthor';
+export * from './MessageBox';
+export * from './MessageContent';
+export * from './MessageInfoBox';
+export * from './MessageRow';
+export * from './MessageText';
+
+export interface MessageCustomizeValue {
+  MessageAuthor?: typeof MessageAuthor.Component | null;
+  MessageBox?: typeof MessageBox.Component | null;
+  MessageContent?: typeof MessageContent.Component | null;
+  MessageInfoBox?: typeof MessageInfoBox.Component | null;
+  MessageRow?: typeof MessageRow.Component | null;
+  MessageText?: typeof MessageText.Component | null;
+}

package/src/ui/{Next.tsx → Conversation/NextObserver/NextMessagesObserver.tsx}

@@ -1,14 +1,13 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useFetchNextMutation } from '../core';
-import { MessageSkeleton } from './MessageSkeleton';
+import { MessageSkeleton } from '../../common/MessageSkeleton';
 
-export interface NextProps {
-  chatId: string;
+export interface NextMessagesObserverProps {
+  onLoad: () => void;
+  loading: boolean;
 }
 
-export function Next(props: NextProps) {
-  const { chatId } = props;
-  const [fetchNext, { isFetching }] = useFetchNextMutation({ chatId });
+export function NextMessagesObserver(props: NextMessagesObserverProps) {
+  const { onLoad, loading } = props;
   const [intersecting, setIntersecting] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
   const timerRef = useRef<NodeJS.Timer>();
@@ -35,14 +34,14 @@ export function Next(props: NextProps) {
       return;
     }
 
-    fetchNext();
+    onLoad();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [intersecting]);
 
-  if (isFetching || intersecting) {
+  if (loading || intersecting) {
     return <MessageSkeleton count={4} />;
   }
 
-  return <div className="wxchtf-next" ref={ref}></div>;
+  return <div className="wxchtf-next" ref={ref} />;
 }

package/src/ui/Conversation/NextObserver/index.ts

@@ -0,0 +1 @@
+export * from './NextMessagesObserver';

package/src/ui/{MessageReadObserver.tsx → Conversation/ReadObserver/MessageReadObserver.tsx}

@@ -1,20 +1,14 @@
 import { FC, RefObject, useEffect, useMemo, useRef } from 'react';
-import { useDispatch, useSelect } from '../core';
-import { customize } from './customize';
-import { MessageBoxProps } from './Message/MessageBox';
+import { MessageBoxProps } from '../Message';
+import { useConversation } from '../ConversationContext';
 
 export interface MessageReadObserverProps extends MessageBoxProps {
   messageRef: RefObject<HTMLDivElement | null>;
 }
-
-export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('MessageReadObserver', (props) => {
+const Observer: FC<MessageReadObserverProps> = (props) => {
   const { message, messageRef } = props;
-  const dispatch = useDispatch();
-  const isRead = useSelect((x) => {
-    const lastReadMessageId = x.query.chatList.data!.find((x) => x.id === message.chatId)!.lastReadMessageId;
-    return lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
-  }, []);
-
+  const { onRead, lastReadMessageId } = useConversation();
+  const isRead = lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
   const readRef = useRef(isRead);
 
   useEffect(() => {
@@ -26,7 +20,7 @@ export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('Mess
       new IntersectionObserver(([entry]) => {
         if (entry.isIntersecting && !readRef.current) {
           readRef.current = true;
-          dispatch({ type: 'read', data: { id: message.id, timestamp: new Date().getTime() } });
+          onRead(message.id);
         }
       }),
 
@@ -42,4 +36,14 @@ export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('Mess
   }, [observer]);
 
   return <></>;
-});
+};
+
+export function MessageReadObserver(props: MessageReadObserverProps) {
+  const { noReadTracking } = useConversation();
+
+  if (noReadTracking === true) {
+    return null;
+  }
+
+  return <Observer {...props} />;
+}

package/src/ui/Conversation/ReadObserver/index.ts

@@ -0,0 +1 @@
+export * from './MessageReadObserver';

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageBox.tsx

@@ -1,5 +1,5 @@
-import { File } from '../../core';
-import { customize } from '../customize';
+import { File } from '../../../core';
+import { customize } from '../../customize';
 import { SendingMessageContent } from './SendingMessageContent';
 
 export interface SendingMessageBoxProps {

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageContent.tsx

@@ -1,4 +1,4 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { SendingMessageText } from './SendingMessageText';
 import { SendingMessageInfoBox } from './SendingMessageInfoBox';
 import type { SendingMessageBoxProps } from './SendingMessageBox';

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageInfoBox.tsx

@@ -1,5 +1,5 @@
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
 import type { SendingMessageBoxProps } from './SendingMessageBox';
 
 export const SendingMessageInfoBox = customize('SendingMessageInfoBox', (_: SendingMessageBoxProps) => {

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageText.tsx

@@ -1,4 +1,4 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import type { SendingMessageBoxProps } from './SendingMessageBox';
 
 export const SendingMessageText = customize('SendingMessageText', (props: SendingMessageBoxProps) => {

package/src/ui/Conversation/SendingMessage/index.ts

@@ -0,0 +1,16 @@
+import { SendingMessageBox } from './SendingMessageBox';
+import { SendingMessageContent } from './SendingMessageContent';
+import { SendingMessageInfoBox } from './SendingMessageInfoBox';
+import { SendingMessageText } from './SendingMessageText';
+
+export * from './SendingMessageBox';
+export * from './SendingMessageContent';
+export * from './SendingMessageInfoBox';
+export * from './SendingMessageText';
+
+export interface SendingMessageCustomizeValue {
+  SendingMessageBox?: typeof SendingMessageBox.Component | null;
+  SendingMessageContent?: typeof SendingMessageContent.Component | null;
+  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
+  SendingMessageText?: typeof SendingMessageText.Component | null;
+}

package/src/ui/{SystemMessage → Conversation/SystemMessage}/SystemMessageBox.tsx

@@ -1,11 +1,11 @@
 import { useRef } from 'react';
-import { customize } from '../customize';
-import { Message } from '../../core';
-import { MessageReadObserver } from '../MessageReadObserver';
+import { customize } from '../../customize';
+import { MessageBase } from '../../../core';
 import { SystemMessageRow } from './SystemMessageRow';
+import { MessageReadObserver } from '../ReadObserver';
 
 export interface SystemMessageBoxProps {
-  message: Message;
+  message: MessageBase;
 }
 
 export const SystemMessageBox = customize('SystemMessageBox', (props: SystemMessageBoxProps) => {

package/src/ui/Conversation/SystemMessage/SystemMessageRow.tsx

@@ -0,0 +1,28 @@
+import { Ref } from 'react';
+import { customize } from '../../customize';
+import { Localizer, useLocalizer } from '../../localizer';
+import { MessageBase } from '../../../core';
+
+export interface SystemMessageRowProps {
+  message: MessageBase;
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
+  const [key, payload] = text.split('::', 2);
+  const data = payload ? JSON.parse(payload) : null;
+  return localizer.system[key as keyof Localizer['system']](key as any, data);
+}
+
+export const SystemMessageRow = customize('SystemMessageRow', (props: SystemMessageRowProps) => {
+  const { message, containerRef } = props;
+  const { text, sentAt } = message;
+  const localizer = useLocalizer();
+
+  return (
+    <div ref={containerRef} className="wxchtf-system-message">
+      <div className="wxchtf-text">{formatSystemMessage(localizer, text)}</div>
+      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
+    </div>
+  );
+});

package/src/ui/Conversation/SystemMessage/index.ts

@@ -0,0 +1,10 @@
+import { SystemMessageBox } from './SystemMessageBox';
+import { SystemMessageRow } from './SystemMessageRow';
+
+export * from './SystemMessageBox';
+export * from './SystemMessageRow';
+
+export interface SystemMessageCustomizeValue {
+  SystemMessageBox?: typeof SystemMessageBox.Component | null;
+  SystemMessageRow?: typeof SystemMessageRow.Component | null;
+}

package/src/ui/Conversation/index.ts

@@ -0,0 +1,13 @@
+export * from './InputBox';
+export * from './Message';
+export * from './NextObserver';
+export * from './ReadObserver';
+export * from './SendingMessage';
+export * from './SystemMessage';
+
+export * from './ConversationActions';
+export * from './ConversationBody';
+export * from './ConversationHeader';
+export * from './ConversationName';
+export * from './ConversationContext';
+export * from './Conversation';

package/src/ui/Thread/ThreadActions.tsx

@@ -0,0 +1,22 @@
+import { Button, Tooltip } from 'antd';
+import { customize } from '../customize';
+import { useThreadContext } from './ThreadContext';
+import { Icon } from '../common/Icon';
+
+export const ThreadActions = customize('ThreadActions', () => {
+  const { watch, onWatch } = useThreadContext();
+
+  if (!watch) {
+    return (
+      <Tooltip title="Watch thread">
+        <Button type="link" icon={<Icon type="watch" />} onClick={() => onWatch(true)} />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip title="Unwatch thread">
+      <Button type="link" icon={<Icon type="unwatch" />} onClick={() => onWatch(false)} />
+    </Tooltip>
+  );
+});