[Bug] The chat window, once lifted up, cannot be lifted down

[stanleyzqt]

📦 Environment

Official Preview

📌 Version

lobechat

💻 Operating System

Windows

🌐 Browser

Edge

🐛 Bug Description

The chat window, once lifted up, cannot be lifted down

📷 Recurrence Steps

The chat window, once lifted up, cannot be lifted down

🚦 Expected Behavior

The chat window, once lifted up, cannot be lifted down

📝 Additional Information

The chat window, once lifted up, cannot be lifted down

[lobehubbot]

👀 @stanleyzqt

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.\ 非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[dosubot[bot]]

Hey @stanleyzqt! I'm here to help you with any bugs, questions, or contributions you have for LobeChat. Let's squash those bugs together! 🐞

The issue with the chat window not being able to be lifted down once lifted up might be related to the MobileChatInputArea component. This component handles the lift-up and lift-down functionality of the chat window.

Here are a few things to check:

1. State Management: Ensure that the state controlling the expansion (expand) is being updated correctly. The setExpand function should toggle the expand state properly.

2. Event Handlers: Verify that the event handlers for the lift-up and lift-down actions are functioning as expected. Specifically, check the onClick event of the ActionIcon component that toggles the expand state.

3. CSS Classes: Make sure that the CSS classes applied when the chat window is lifted up or down are correctly defined and applied. These styles are defined within the useStyles function in the Portal.tsx file.

Here is the relevant part of the MobileChatInputArea component:

const MobileChatInputArea = forwardRef<TextAreaRef, MobileChatInputAreaProps>(
  (
    {
      className,
      style,
      topAddons,
      textAreaLeftAddons,
      textAreaRightAddons,
      bottomAddons,
      expand = false,
      setExpand,
      onSend,
      onInput,
      loading,
      value,
      safeArea,
    },
    ref,
  ) => {
    const { t } = useTranslation('chat');
    const isChineseInput = useRef(false);
    const containerRef = useRef<HTMLDivElement>(null);
    const { cx, styles } = useStyles();
    const size = useSize(containerRef);
    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);
    const [isFocused, setIsFocused] = useState<boolean>(false);

    useEffect(() => {
      if (!size?.height) return;
      setShowFullscreen(size.height > 72);
    }, [size]);

    const showAddons = !expand && !isFocused;
    return (
      <Flexbox
        className={cx(styles.container, expand && styles.expand, className)}
        gap={12}
        style={style}
      >
        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}
        <Flexbox
          className={cx(expand && styles.expand)}
          ref={containerRef}
          style={{ position: 'relative' }}
        >
          {showFullscreen && (
            <ActionIcon
              active
              className={styles.expandButton}
              icon={expand ? ChevronDown : ChevronUp}
              onClick={() => setExpand?.(!expand)}
              size={{ blockSize: 24, borderRadius: '50%', fontSize: 14 }}
              style={expand ? { top: 6 } : {}}
            />
          )}
          <InnerContainer
            bottomAddons={bottomAddons}
            expand={expand}
            textAreaLeftAddons={textAreaLeftAddons}
            textAreaRightAddons={textAreaRightAddons}
            topAddons={topAddons}
          >
            <TextArea
              autoSize={expand ? false : { maxRows: 6, minRows: 0 }}
              className={cx(expand && styles.expandTextArea)}
              onBlur={(e) => {
                onInput?.(e.target.value);
                setIsFocused(false);
              }}
              onChange={(e) => {
                onInput?.(e.target.value);
              }}
              onCompositionEnd={() => {
                isChineseInput.current = false;
              }}
              onCompositionStart={() => {
                isChineseInput.current = true;
              }}
              onFocus={() => setIsFocused(true)}
              onPressEnter={(e) => {
                if (!loading && !isChineseInput.current && e.shiftKey) {
                  e.preventDefault();
                  onSend?.();
                }
              }}
              placeholder={t('sendPlaceholder')}
              ref={ref}
              style={{ height: 36, paddingBlock: 6 }}
              type={expand ? 'pure' : 'block'}
              value={value}
            />
          </InnerContainer>
        </Flexbox>
        {bottomAddons && (
          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>
        )}
        {safeArea && !isFocused && <MobileSafeArea position={'bottom'} />}
      </Flexbox>
    );
  },
);
export default MobileChatInputArea;

Ensure that the setExpand function is correctly toggling the expand state and that the ActionIcon component's onClick event is properly wired up to this function sup>[[1]](https://github.com/lobehub/lobe-chat/blob/main/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/InputArea/index.tsx)</sup.

To continue talking to Dosu, mention @dosu.

[Lostsite]

A quick temp solution: Zoom the browser window, now you would be able to move it down, then zoom back.

[arvinxx]

which version do you use? it seems work well on my side

[Lostsite]

which version do you use? it seems work well on my side

The input box upper edge can be manually lift up (give a larger place for where you can type in, give a more clear view for the context especially for long input).

However, it will NOT stopping at the edge, you can keep moving until it go beyond the border. Now you can't see the edge, so you can't really move it back down.

It happens on ALL version (v1.15.18 <- v1.0)

------------Video Removed due to have personal info-----------------

[arvinxx]

oh it's an edge case that we forget😂 if you want to just lift the input place, you can try the scale up icon at the right side