import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Avatar,
  Button,
  Menu,
  MenuPopover,
  MenuTrigger,
  PresenceBadge,
  Switch,
  Textarea
} from '@fluentui/react-components';
import commonStore, { ModelStatus } from '../stores/commonStore';
import { observer } from 'mobx-react-lite';
import { v4 as uuid } from 'uuid';
import classnames from 'classnames';
import { fetchEventSource } from '@microsoft/fetch-event-source';
import { KebabHorizontalIcon, PencilIcon, SyncIcon, TrashIcon } from '@primer/octicons-react';
import logo from '../assets/images/logo.png';
import MarkdownRender from '../components/MarkdownRender';
import { ToolTipButton } from '../components/ToolTipButton';
import {
  ArrowCircleUp28Regular,
  ArrowClockwise16Regular,
  Attach16Regular,
  Delete28Regular,
  Dismiss16Regular,
  Dismiss24Regular,
  FolderOpenVerticalRegular,
  RecordStop28Regular,
  SaveRegular,
  TextAlignJustify24Regular,
  TextAlignJustifyRotate9024Regular
} from '@fluentui/react-icons';
import { CopyButton } from '../components/CopyButton';
import { ReadButton } from '../components/ReadButton';
import { toast } from 'react-toastify';
import { WorkHeader } from '../components/WorkHeader';
import { DialogButton } from '../components/DialogButton';
import { OpenFileFolder, OpenOpenFileDialog, OpenSaveFileDialog } from '../../wailsjs/go/backend_golang/App';
import {
  absPathAsset,
  bytesToReadable,
  getServerRoot,
  newChatConversation,
  OpenFileDialog,
  setActivePreset,
  toastWithButton
} from '../utils';
import { useMediaQuery } from 'usehooks-ts';
import { botName, ConversationMessage, MessageType, Role, systemName, userName, welcomeUuid } from '../types/chat';
import { Labeled } from '../components/Labeled';
import { ValuedSlider } from '../components/ValuedSlider';
import { PresetsButton } from './PresetsManager/PresetsButton';
import { webOpenOpenFileDialog } from '../utils/web-file-operations';
import { defaultPenaltyDecay } from './defaultConfigs';
import { AvatarProps } from '@fluentui/react-avatar';

let chatSseControllers: {
  [id: string]: AbortController
} = {};

const MoreUtilsButton: FC<{
  uuid: string,
  setEditing: (editing: boolean) => void
}> = observer(({
  uuid,
  setEditing
}) => {
  const { t } = useTranslation();
  const [speaking, setSpeaking] = useState(false);

  const messageItem = commonStore.conversation[uuid];

  return <Menu>
    <MenuTrigger disableButtonEnhancement>
      <Button icon={<KebabHorizontalIcon />} size="small" appearance="subtle" />
    </MenuTrigger>
    <MenuPopover style={{ minWidth: 0 }}>
      <CopyButton content={messageItem.content} showDelay={500} />
      <ReadButton content={messageItem.content} inSpeaking={speaking} showDelay={500} setSpeakingOuter={setSpeaking} />
      <ToolTipButton desc={t('Edit')} icon={<PencilIcon />} showDelay={500} size="small" appearance="subtle"
        onClick={() => {
          setEditing(true);
        }} />
      <ToolTipButton desc={t('Delete')} icon={<TrashIcon />} showDelay={500} size="small" appearance="subtle"
        onClick={() => {
          commonStore.conversationOrder.splice(commonStore.conversationOrder.indexOf(uuid), 1);
          delete commonStore.conversation[uuid];
          commonStore.setAttachment(uuid, null);
        }} />
    </MenuPopover>
  </Menu>;
});

const HiddenAvatar: FC<AvatarProps> = ({ children, hidden, ...props }) => {
  if (hidden) {
    return <div>{children}</div>;
  } else {
    return (
      <Avatar {...props}>
        {children}
      </Avatar>
    );
  }
};

const ChatMessageItem: FC<{
  uuid: string,
  onSubmit: (message: string | null, answerId: string | null,
    startUuid: string | null, endUuid: string | null, includeEndUuid: boolean) => void
}> = observer(({ uuid, onSubmit }) => {
  const { t } = useTranslation();
  const [editing, setEditing] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const messageItem = commonStore.conversation[uuid];

  console.log(uuid);

  const setEditingInner = (editing: boolean) => {
    setEditing(editing);
    if (editing) {
      setTimeout(() => {
        const textarea = textareaRef.current;
        if (textarea) {
          textarea.focus();
          textarea.selectionStart = textarea.value.length;
          textarea.selectionEnd = textarea.value.length;
          textarea.style.height = textarea.scrollHeight + 'px';
        }
      });
    }
  };

  let avatarImg: string | undefined;
  if (commonStore.activePreset && messageItem.sender === botName) {
    avatarImg = absPathAsset(commonStore.activePreset.avatarImg);
  } else if (messageItem.avatarImg) {
    avatarImg = messageItem.avatarImg;
  }

  return <div
    className={classnames(
      'flex gap-2 mb-2 overflow-hidden',
      messageItem.side === 'left' && 'flex-row',
      messageItem.side === 'right' && 'flex-row-reverse',
      messageItem.side === 'center' && 'flex-row justify-center'
    )}
    onMouseEnter={() => {
      const utils = document.getElementById('utils-' + uuid);
      if (utils) utils.classList.remove('invisible');
    }}
    onMouseLeave={() => {
      const utils = document.getElementById('utils-' + uuid);
      if (utils) utils.classList.add('invisible');
    }}
  >
    <HiddenAvatar
      color={messageItem.color}
      name={messageItem.sender}
      image={avatarImg ? { src: avatarImg } : undefined}
      hidden={messageItem.side === 'center'}
    />
    <div
      className={classnames(
        'flex rounded-lg overflow-hidden',
        editing ? 'grow' : '',
        messageItem.side === 'center' ? 'p-1' : 'p-2',
        commonStore.settings.darkMode ? 'bg-neutral-800 border-neutral-600 border-[1px]' : (messageItem.side === 'right' ? 'bg-blue-500' : 'bg-gray-200'),
        commonStore.settings.darkMode ? 'text-white' : (messageItem.side === 'right' ? 'text-white' : 'text-gray-600'),
        messageItem.side === 'center' && 'text-opacity-60 bg-opacity-30 border-opacity-30'
      )}
    >
      {!editing ?
        <div className="flex flex-col">
          <MarkdownRender className={classnames(messageItem.side === 'center' && 'text-xs')}
            disabled={!commonStore.chatParams.markdown || messageItem.side === 'center'}>{messageItem.content}</MarkdownRender>
          {uuid in commonStore.attachments &&
            <div className="flex grow">
              <div className="grow" />
              <ToolTipButton className="whitespace-nowrap"
                text={
                  commonStore.attachments[uuid][0].name.replace(
                    new RegExp('(^[^\\.]{5})[^\\.]+'), '$1...')
                }
                desc={`${commonStore.attachments[uuid][0].name} (${bytesToReadable(commonStore.attachments[uuid][0].size)})`}
                size="small" shape="circular" appearance="secondary" />
            </div>
          }
        </div> :
        <Textarea ref={textareaRef}
          className="grow"
          style={{ minWidth: 0 }}
          value={messageItem.content}
          onChange={(e) => {
            messageItem.content = e.target.value;
            commonStore.conversation[uuid].type = MessageType.Normal;
            commonStore.conversation[uuid].done = true;
            commonStore.setConversation(commonStore.conversation);
            commonStore.setConversationOrder([...commonStore.conversationOrder]);
          }}
          onBlur={() => {
            setEditingInner(false);
          }} />}
    </div>
    <div className="flex flex-col gap-1 items-start">
      <div className="grow" />
      {(messageItem.type === MessageType.Error || !messageItem.done) &&
        <PresenceBadge size="extra-small" status={
          messageItem.type === MessageType.Error ? 'busy' : 'away'
        } />
      }
      <div className="flex invisible" id={'utils-' + uuid}>
        {
          messageItem.sender === botName && uuid !== welcomeUuid &&
          <ToolTipButton desc={t('Retry')} size="small" appearance="subtle"
            icon={<SyncIcon />} onClick={() => {
            if (uuid in chatSseControllers) {
              chatSseControllers[uuid].abort();
              delete chatSseControllers[uuid];
            }
            onSubmit(null, uuid, null, uuid, false);
          }} />
        }
        <ToolTipButton desc={t('Edit')} icon={<PencilIcon />} size="small" appearance="subtle"
          onClick={() => {
            setEditingInner(true);
          }} />
        <MoreUtilsButton uuid={uuid} setEditing={setEditingInner} />
      </div>
    </div>
  </div>;
});

const SidePanel: FC = observer(() => {
  const [t] = useTranslation();
  const mq = useMediaQuery('(min-width: 640px)');
  const params = commonStore.chatParams;

  return <div
    className={classnames(
      'flex flex-col gap-1 h-full flex-shrink-0 transition-width duration-300 ease-in-out',
      commonStore.sidePanelCollapsed ? 'w-0' : (mq ? 'w-64' : 'w-full'),
      !commonStore.sidePanelCollapsed && 'ml-1')
    }>
    <div className="flex m-1">
      <div className="grow" />
      <PresetsButton tab="Chat" size="medium" shape="circular" appearance="subtle" />
      <Button size="medium" shape="circular" appearance="subtle" icon={<Dismiss24Regular />}
        onClick={() => commonStore.setSidePanelCollapsed(true)}
      />
    </div>
    <div className="flex flex-col gap-1 overflow-x-hidden overflow-y-auto p-0.5">
      <Labeled flex breakline label={t('Max Response Token')}
        desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
        content={
          <ValuedSlider value={params.maxResponseToken} min={100} max={8100}
            step={100}
            input
            onChange={(e, data) => {
              commonStore.setChatParams({
                maxResponseToken: data.value
              });
            }} />
        } />
      <Labeled flex breakline label={t('Temperature')}
        desc={t('Sampling temperature, it\'s like giving alcohol to a model, the higher the stronger the randomness and creativity, while the lower, the more focused and deterministic it will be.')}
        content={
          <ValuedSlider value={params.temperature} min={0} max={3} step={0.1}
            input
            onChange={(e, data) => {
              commonStore.setChatParams({
                temperature: data.value
              });
            }} />
        } />
      <Labeled flex breakline label={t('Top_P')}
        desc={t('Just like feeding sedatives to the model. Consider the results of the top n% probability mass, 0.1 considers the top 10%, with higher quality but more conservative, 1 considers all results, with lower quality but more diverse.')}
        content={
          <ValuedSlider value={params.topP} min={0} max={1} step={0.05} input
            onChange={(e, data) => {
              commonStore.setChatParams({
                topP: data.value
              });
            }} />
        } />
      <Labeled flex breakline label={t('Presence Penalty')}
        desc={t('Positive values penalize new tokens based on whether they appear in the text so far, increasing the model\'s likelihood to talk about new topics.')}
        content={
          <ValuedSlider value={params.presencePenalty} min={0} max={2}
            step={0.1} input
            onChange={(e, data) => {
              commonStore.setChatParams({
                presencePenalty: data.value
              });
            }} />
        } />
      <Labeled flex breakline label={t('Frequency Penalty')}
        desc={t('Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model\'s likelihood to repeat the same line verbatim.')}
        content={
          <ValuedSlider value={params.frequencyPenalty} min={0} max={2}
            step={0.1} input
            onChange={(e, data) => {
              commonStore.setChatParams({
                frequencyPenalty: data.value
              });
            }} />
        } />
      <Labeled flex breakline
        label={t('Penalty Decay') + (params.penaltyDecay === defaultPenaltyDecay ? ` (${t('Default')})` : '')}
        desc={t('If you don\'t know what it is, keep it default.')}
        content={
          <ValuedSlider value={params.penaltyDecay!} min={0.99} max={0.999}
            step={0.001} toFixed={3} input
            onChange={(e, data) => {
              commonStore.setChatParams({
                penaltyDecay: data.value
              });
            }} />
        } />
      <Labeled flex breakline
        label={t('History Message Number') + (params.historyN === 0 ? ` (${t('Default')})` : '')}
        desc={params.historyN === 0 ? t('Send All Message') : t('The latest X messages will be sent to the server. If you are using the RWKV-Runner server, please use the default value because RWKV-Runner has built-in state cache management which only calculates increments. Sending all messages will have lower cost. If you are using ChatGPT, adjust this value according to your needs to reduce ChatGPT expenses.')
        .replace('X', String(params.historyN))}
        content={
          <ValuedSlider value={params.historyN} min={0} max={20}
            step={1} input
            onChange={(e, data) => {
              commonStore.setChatParams({
                historyN: data.value
              });
            }} />
        } />
    </div>
    <div className="grow" />
    <Labeled flex spaceBetween
      label={t('Markdown Renderer')}
      content={
        <Switch checked={params.markdown}
          onChange={(e, data) => {
            commonStore.setChatParams({
              markdown: data.checked
            });
          }} />
      } />
    <Button
      icon={<FolderOpenVerticalRegular />}
      onClick={() => {
        OpenFileDialog('*.txt;*.md').then(async blob => {
          const userNames = ['User:', 'Question:', 'Q:', 'Human:', 'Bob:'];
          const assistantNames = ['Assistant:', 'Answer:', 'A:', 'Bot:', 'Alice:'];
          const names = userNames.concat(assistantNames);
          const content = await blob.text();
          const lines = content.split('\n');

          const { pushMessage, saveConversation } = newChatConversation();
          let messageRole: Role = 'user';
          let messageContent = '';
          for (const [i, line] of lines.entries()) {
            let lineName = '';
            if (names.some(name => {
              lineName = name;
              return line.startsWith(name);
            })) {
              if (messageContent.trim())
                pushMessage(messageRole, messageContent.trim());

              if (userNames.includes(lineName))
                messageRole = 'user';
              else
                messageRole = 'assistant';

              messageContent = line.replace(lineName, '');
            } else {
              messageContent += '\n' + line;
            }
          }
          if (messageContent.trim())
            pushMessage(messageRole, messageContent.trim());
          saveConversation();
        });
      }}>
      {t('Load Conversation')}
    </Button>
    <Button
      icon={<SaveRegular />}
      onClick={() => {
        let savedContent: string = '';
        const isWorldModel = commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('world');
        const user = isWorldModel ? 'User' : 'Bob';
        const bot = isWorldModel ? 'Assistant' : 'Alice';
        commonStore.conversationOrder.forEach((uuid) => {
          if (uuid === welcomeUuid)
            return;
          const messageItem = commonStore.conversation[uuid];
          if (messageItem.type !== MessageType.Error) {
            if (messageItem.sender === userName) {
              savedContent += `${user}: ${messageItem.content}\n\n`;
            } else if (messageItem.sender === botName) {
              savedContent += `${bot}: ${messageItem.content}\n\n`;
            }
          }
        });

        OpenSaveFileDialog('*.txt', 'conversation.txt', savedContent).then((path) => {
          if (path)
            toastWithButton(t('Conversation Saved'), t('Open'), () => {
              OpenFileFolder(path);
            });
        }).catch(e => {
          toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
        });
      }}>
      {t('Save Conversation')}
    </Button>
  </div>;
});

const ChatPanel: FC = observer(() => {
  const { t } = useTranslation();
  const bodyRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const mq = useMediaQuery('(min-width: 640px)');
  if (commonStore.sidePanelCollapsed === 'auto')
    commonStore.setSidePanelCollapsed(!mq);
  const currentConfig = commonStore.getCurrentModelConfig();
  const apiParams = currentConfig.apiParameters;
  const port = apiParams.apiPort;
  const generating: boolean = Object.keys(chatSseControllers).length > 0;

  useEffect(() => {
    if (inputRef.current)
      inputRef.current.style.maxHeight = '16rem';
    scrollToBottom();
  }, []);

  useEffect(() => {
    if (commonStore.conversationOrder.length === 0) {
      commonStore.setConversationOrder([welcomeUuid]);
      commonStore.setConversation({
        [welcomeUuid]: {
          sender: botName,
          type: MessageType.Normal,
          color: 'neutral',
          avatarImg: logo,
          time: new Date().toISOString(),
          content: commonStore.platform === 'web' ? t('Hello, what can I do for you?') : t('Hello! I\'m RWKV, an open-source and commercially usable large language model.'),
          side: 'left',
          done: true
        }
      });
    }
  }, []);

  const scrollToBottom = () => {
    if (bodyRef.current)
      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  };

  const handleKeyDownOrClick = (e: any) => {
    e.stopPropagation();
    if (e.type === 'click' || (e.keyCode === 13 && !e.shiftKey)) {
      e.preventDefault();
      if (commonStore.status.status === ModelStatus.Offline && !commonStore.settings.apiUrl && commonStore.platform !== 'web') {
        toast(t('Please click the button in the top right corner to start the model'), { type: 'warning' });
        return;
      }
      if (!commonStore.currentInput) return;
      onSubmit(commonStore.currentInput);
      commonStore.setCurrentInput('');
    }
  };

  // if message is not null, create a user message;
  // if answerId is not null, override the answer with new response;
  // if startUuid is null, start generating api body messages from first message;
  // if endUuid is null, generate api body messages until last message;
  const onSubmit = useCallback((message: string | null = null, answerId: string | null = null,
    startUuid: string | null = null, endUuid: string | null = null, includeEndUuid: boolean = false) => {
    if (message) {
      const newId = uuid();
      commonStore.conversation[newId] = {
        sender: userName,
        type: MessageType.Normal,
        color: 'brand',
        time: new Date().toISOString(),
        content: message,
        side: 'right',
        done: true
      };
      commonStore.setConversation(commonStore.conversation);
      commonStore.conversationOrder.push(newId);
      commonStore.setConversationOrder(commonStore.conversationOrder);

      if (commonStore.currentTempAttachment) {
        commonStore.setAttachment(newId, [commonStore.currentTempAttachment]);
        commonStore.setCurrentTempAttachment(null);
      }
    }

    let startIndex = startUuid ? commonStore.conversationOrder.indexOf(startUuid) : 0;
    let endIndex = endUuid ? (commonStore.conversationOrder.indexOf(endUuid) + (includeEndUuid ? 1 : 0)) : commonStore.conversationOrder.length;
    let targetRange = commonStore.conversationOrder.slice(startIndex, endIndex);

    const messages: ConversationMessage[] = [];
    targetRange.forEach((uuid, index) => {
      if (uuid === welcomeUuid)
        return;
      const messageItem = commonStore.conversation[uuid];
      if (uuid in commonStore.attachments) {
        const attachment = commonStore.attachments[uuid][0];
        messages.push({
          role: 'user',
          content: t('The content of file') + ` "${attachment.name}" `
            + t('is as follows. When replying to me, consider the file content and respond accordingly:')
            + '\n\n' + attachment.content
        });
        messages.push({ role: 'user', content: t('What\'s the file name') });
        messages.push({ role: 'assistant', content: t('The file name is: ') + attachment.name });
      }
      if (messageItem.done && messageItem.type === MessageType.Normal && messageItem.sender === userName) {
        messages.push({ role: 'user', content: messageItem.content });
      } else if (messageItem.done && messageItem.type === MessageType.Normal && messageItem.sender === botName) {
        messages.push({ role: 'assistant', content: messageItem.content });
      } else if (messageItem.done && messageItem.type === MessageType.Normal && messageItem.sender === systemName) {
        messages.push({ role: 'system', content: messageItem.content });
      }
    });

    if (answerId === null) {
      answerId = uuid();
      commonStore.conversationOrder.push(answerId);
    }
    commonStore.conversation[answerId] = {
      sender: botName,
      type: MessageType.Normal,
      color: 'neutral',
      avatarImg: logo,
      time: new Date().toISOString(),
      content: '',
      side: 'left',
      done: false
    };
    commonStore.setConversation(commonStore.conversation);
    commonStore.setConversationOrder(commonStore.conversationOrder);
    setTimeout(scrollToBottom);
    let answer = '';
    let finished = false;
    const finish = () => {
      finished = true;
      if (answerId! in chatSseControllers)
        delete chatSseControllers[answerId!];
      commonStore.conversation[answerId!].done = true;
      commonStore.conversation[answerId!].content = commonStore.conversation[answerId!].content.trim();
      commonStore.setConversation(commonStore.conversation);
      commonStore.setConversationOrder([...commonStore.conversationOrder]);
    };
    const chatSseController = new AbortController();
    chatSseControllers[answerId] = chatSseController;
    fetchEventSource( // https://api.openai.com/v1/chat/completions || http://127.0.0.1:${port}/v1/chat/completions
      getServerRoot(port, true) + '/v1/chat/completions',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${commonStore.settings.apiKey}`
        },
        body: JSON.stringify({
          messages: messages.slice(-commonStore.chatParams.historyN),
          stream: true,
          model: commonStore.settings.apiChatModelName, // 'gpt-3.5-turbo'
          max_tokens: commonStore.chatParams.maxResponseToken,
          temperature: commonStore.chatParams.temperature,
          top_p: commonStore.chatParams.topP,
          presence_penalty: commonStore.chatParams.presencePenalty,
          frequency_penalty: commonStore.chatParams.frequencyPenalty,
          penalty_decay: commonStore.chatParams.penaltyDecay === defaultPenaltyDecay ? undefined : commonStore.chatParams.penaltyDecay,
          user_name: commonStore.activePreset?.userName || undefined,
          assistant_name: commonStore.activePreset?.assistantName || undefined,
          presystem: commonStore.activePreset?.presystem && undefined
        }),
        signal: chatSseController?.signal,
        onmessage(e) {
          scrollToBottom();
          if (!finished && e.data.trim() === '[DONE]') {
            finish();
            return;
          }
          let data;
          try {
            data = JSON.parse(e.data);
          } catch (error) {
            console.debug('json error', error);
            return;
          }
          if (data.model)
            commonStore.setLastModelName(data.model);
          if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
            if (!finished && data.choices[0]?.finish_reason) {
              finish();
              return;
            }
            answer += data.choices[0]?.delta?.content || '';
            commonStore.conversation[answerId!].content = answer;
            commonStore.setConversation(commonStore.conversation);
            commonStore.setConversationOrder([...commonStore.conversationOrder]);
          }
        },
        async onopen(response) {
          if (response.status !== 200) {
            let errText = await response.text();
            try {
              errText = JSON.stringify(JSON.parse(errText), null, 2);
            } catch (e) {
            }
            commonStore.conversation[answerId!].content += '\n[ERROR]\n```\n' + response.status + ' - ' + response.statusText + '\n' + errText + '\n```';
            commonStore.setConversation(commonStore.conversation);
            commonStore.setConversationOrder([...commonStore.conversationOrder]);
            setTimeout(scrollToBottom);
          }
        },
        onclose() {
          if (answerId! in chatSseControllers)
            delete chatSseControllers[answerId!];
          console.log('Connection closed');
        },
        onerror(err) {
          if (answerId! in chatSseControllers)
            delete chatSseControllers[answerId!];
          commonStore.conversation[answerId!].type = MessageType.Error;
          commonStore.conversation[answerId!].done = true;
          err = err.message || err;
          if (err && !err.includes('ReadableStreamDefaultReader'))
            commonStore.conversation[answerId!].content += '\n[ERROR]\n```\n' + err + '\n```';
          commonStore.setConversation(commonStore.conversation);
          commonStore.setConversationOrder([...commonStore.conversationOrder]);
          setTimeout(scrollToBottom);
          throw err;
        }
      });
  }, []);

  return (
    <div className="flex h-full grow pt-4 overflow-hidden">
      <div className="relative flex flex-col w-full grow gap-4 overflow-hidden">
        <Button className="absolute top-1 right-1" size="medium" shape="circular" appearance="subtle"
          style={{ zIndex: 1 }}
          icon={commonStore.sidePanelCollapsed ? <TextAlignJustify24Regular /> : <TextAlignJustifyRotate9024Regular />}
          onClick={() => commonStore.setSidePanelCollapsed(!commonStore.sidePanelCollapsed)} />
        <div ref={bodyRef} className="grow overflow-y-auto overflow-x-hidden pr-2">
          {commonStore.conversationOrder.map(uuid =>
            <ChatMessageItem key={uuid} uuid={uuid} onSubmit={onSubmit} />
          )}
        </div>
        <div className={classnames('flex items-end', mq ? 'gap-2' : '')}>
          <DialogButton tooltip={t('Clear')}
            icon={<Delete28Regular />}
            size={mq ? 'large' : 'small'} shape="circular" appearance="subtle" title={t('Clear')}
            content={t('Are you sure you want to clear the conversation? It cannot be undone.')}
            onConfirm={() => {
              if (generating) {
                for (const id in chatSseControllers) {
                  chatSseControllers[id].abort();
                }
                chatSseControllers = {};
              }
              setActivePreset(commonStore.activePreset, commonStore.activePresetIndex);
            }} />
          <div className="relative flex grow">
            <Textarea
              ref={inputRef}
              style={{ minWidth: 0 }}
              className="grow"
              resize="vertical"
              placeholder={t('Type your message here')!}
              value={commonStore.currentInput}
              onChange={(e) => commonStore.setCurrentInput(e.target.value)}
              onKeyDown={handleKeyDownOrClick}
            />
            <div className="absolute right-2 bottom-2">
              {!commonStore.currentTempAttachment ?
                <ToolTipButton
                  desc={commonStore.attachmentUploading ?
                    t('Processing Attachment') :
                    t('Add An Attachment (Accepts pdf, txt)')}
                  icon={commonStore.attachmentUploading ?
                    <ArrowClockwise16Regular className="animate-spin" />
                    : <Attach16Regular />}
                  size="small" shape="circular" appearance="secondary"
                  onClick={() => {
                    if (commonStore.attachmentUploading)
                      return;

                    const filterPattern = '*.txt;*.pdf';
                    const setUploading = () => commonStore.setAttachmentUploading(true);
                    // actually, status of web platform is always Offline
                    if (commonStore.platform === 'web' || commonStore.status.status === ModelStatus.Offline || currentConfig.modelParameters.device === 'WebGPU') {
                      webOpenOpenFileDialog(filterPattern, setUploading).then(webReturn => {
                        if (webReturn.content)
                          commonStore.setCurrentTempAttachment(
                            {
                              name: webReturn.blob.name,
                              size: webReturn.blob.size,
                              content: webReturn.content
                            });
                        else
                          toast(t('File is empty'), {
                            type: 'info',
                            autoClose: 1000
                          });
                      }).catch(e => {
                        toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
                      }).finally(() => {
                        commonStore.setAttachmentUploading(false);
                      });
                    } else {
                      OpenOpenFileDialog(filterPattern).then(async filePath => {
                        if (!filePath)
                          return;

                        setUploading();

                        // Both are slow. Communication between frontend and backend is slow. Use AssetServer Handler to read the file.
                        // const blob = new Blob([atob(info.content as unknown as string)]); // await fetch(`data:application/octet-stream;base64,${info.content}`).then(r => r.blob());
                        const blob = await fetch(absPathAsset(filePath)).then(r => r.blob());
                        const attachmentName = filePath.split(/[\\/]/).pop();
                        const urlPath = `/file-to-text?file_name=${attachmentName}`;
                        const bodyForm = new FormData();
                        bodyForm.append('file_data', blob, attachmentName);
                        fetch(getServerRoot(port) + urlPath, {
                          method: 'POST',
                          body: bodyForm
                        }).then(async r => {
                            if (r.status === 200) {
                              const pages = (await r.json()).pages as any[];
                              let attachmentContent: string;
                              if (pages.length === 1)
                                attachmentContent = pages[0].page_content;
                              else
                                attachmentContent = pages.map((p, i) => `Page ${i + 1}:\n${p.page_content}`).join('\n\n');
                              if (attachmentContent)
                                commonStore.setCurrentTempAttachment(
                                  {
                                    name: attachmentName!,
                                    size: blob.size,
                                    content: attachmentContent!
                                  });
                              else
                                toast(t('File is empty'), {
                                  type: 'info',
                                  autoClose: 1000
                                });
                            } else {
                              toast('Failed to fetch - ' + r.status + ' - ' + r.statusText + ' - ' + (await r.text()), {
                                type: 'error'
                              });
                            }
                          }
                        ).catch(e => {
                          toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
                        }).finally(() => {
                          commonStore.setAttachmentUploading(false);
                        });
                      }).catch(e => {
                        toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
                      });
                    }
                  }}
                /> :
                <div>
                  <ToolTipButton
                    text={
                      commonStore.currentTempAttachment.name.replace(
                        new RegExp('(^[^\\.]{5})[^\\.]+'), '$1...')
                    }
                    desc={`${commonStore.currentTempAttachment.name} (${bytesToReadable(commonStore.currentTempAttachment.size)})`}
                    size="small" shape="circular" appearance="secondary" />
                  <ToolTipButton desc={t('Remove Attachment')}
                    icon={<Dismiss16Regular />}
                    size="small" shape="circular" appearance="subtle"
                    onClick={() => {
                      commonStore.setCurrentTempAttachment(null);
                    }} />
                </div>
              }
            </div>
          </div>
          <ToolTipButton desc={generating ? t('Stop') : t('Send')}
            icon={generating ? <RecordStop28Regular /> : <ArrowCircleUp28Regular />}
            size={mq ? 'large' : 'small'} shape="circular" appearance="subtle"
            onClick={(e) => {
              if (generating) {
                for (const id in chatSseControllers) {
                  chatSseControllers[id].abort();
                  commonStore.conversation[id].type = MessageType.Error;
                  commonStore.conversation[id].done = true;
                }
                chatSseControllers = {};
                commonStore.setConversation(commonStore.conversation);
                commonStore.setConversationOrder([...commonStore.conversationOrder]);
              } else {
                handleKeyDownOrClick(e);
              }
            }} />
        </div>
      </div>
      <SidePanel />
    </div>
  );
});

const Chat: FC = observer(() => {
  return (
    <div className="flex flex-col gap-1 p-2 h-full overflow-hidden">
      <WorkHeader />
      <ChatPanel />
    </div>
  );
});

export default Chat;