Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-29 22:51:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

use flexbox for responsive waveai (#107)

Browse Source
This commit is contained in:
Red J Adaya 2024-07-10 09:15:37 +08:00 committed by GitHub
parent be392ee755
commit ff8fe94b1c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/block/block.less
View File

@ -69,7 +69,7 @@
.block-frame-default-header {
display: flex;
height: 34px;
padding: 4px 0 4px 10px;
padding: 4px 5px 4px 10px;
align-items: center;
gap: 8px;
align-self: stretch;

2
frontend/app/block/block.tsx
View File

@ -447,7 +447,7 @@ function getViewElemAndModel(
} else if (blockView === "web") {
viewElem = <WebView key={blockId} blockId={blockId} parentRef={blockRef} />;
} else if (blockView === "waveai") {
viewElem = <WaveAi key={blockId} parentRef={blockRef} />;
viewElem = <WaveAi key={blockId} />;
}
if (viewModel == null) {
viewModel = makeDefaultViewModel(blockId);

3
frontend/app/view/waveai.less
View File

@ -10,7 +10,7 @@
> .scrollable {
flex-flow: column nowrap;
flex: 1;
flex-grow: 1;
margin-bottom: 0;
overflow-y: auto;
@ -77,6 +77,7 @@
.waveai-input-wrapper {
padding: 16px 15px 7px;
flex: 0 0 auto;
flex-shrink: 0;
border-top: 1px solid var(--app-border-color);
.waveai-input {

13
frontend/app/view/waveai.tsx
View File

@ -3,7 +3,6 @@
import { Markdown } from "@/app/element/markdown";
import { TypingIndicator } from "@/app/element/typingindicator";
import { useParentHeight } from "@/app/hook/useParentHeight";
import { getApi } from "@/app/store/global";
import { ChatMessageType, useWaveAi } from "@/app/store/waveai";
import type { OverlayScrollbars } from "overlayscrollbars";
@ -210,11 +209,7 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
}
);
interface WaveAiProps {
parentRef: React.MutableRefObject<HTMLDivElement>;
}
const WaveAi = React.memo(({ parentRef }: WaveAiProps) => {
const WaveAi = () => {
const { messages, sendMessage } = useWaveAi();
const waveaiRef = useRef<HTMLDivElement>(null);
const chatWindowRef = useRef<HTMLDivElement>(null);
@ -227,8 +222,6 @@ const WaveAi = React.memo(({ parentRef }: WaveAiProps) => {
const [isSubmitting, setIsSubmitting] = useState(false);
const termFontSize: number = 14;
const parentHeight = useParentHeight(parentRef);
const waveAiHeight = parentHeight - 27;
useEffect(() => {
return () => {
@ -399,7 +392,7 @@ const WaveAi = React.memo(({ parentRef }: WaveAiProps) => {
};
return (
<div ref={waveaiRef} className="waveai" onClick={handleContainerClick} style={{ height: waveAiHeight }}>
<div ref={waveaiRef} className="waveai" onClick={handleContainerClick}>
<ChatWindow ref={osRef} chatWindowRef={chatWindowRef} messages={messages} />
<div className="waveai-input-wrapper">
<ChatInput
@ -413,6 +406,6 @@ const WaveAi = React.memo(({ parentRef }: WaveAiProps) => {
</div>
</div>
);
});
};
export { WaveAi };