Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-30 23:01:30 +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 { .block-frame-default-header {
display: flex; display: flex;
height: 34px; height: 34px;
padding: 4px 0 4px 10px; padding: 4px 5px 4px 10px;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
align-self: stretch; align-self: stretch;

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

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

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

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

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

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