mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
Extra Font Size Controls (#1537)
This adds: - "editor:fontsize" to modify the code editor's font size - "ai:fontsize" to modify the ai widget's font size (for general text) - "ai:fixedfontsize" to modify the ai widget's fixed font size (for code fragments)
This commit is contained in:
Sylvie Crowe
GitHub
parent
8a5ef4cb3e
commit
71961b373f
@ -122,6 +122,7 @@ export function CodeEditor({ blockId, text, language, filename, meta, onChange,
|
||||
const minimapEnabled = useOverrideConfigAtom(blockId, "editor:minimapenabled") ?? false;
|
||||
const stickyScrollEnabled = useOverrideConfigAtom(blockId, "editor:stickyscrollenabled") ?? false;
|
||||
const wordWrap = useOverrideConfigAtom(blockId, "editor:wordwrap") ?? false;
|
||||
const fontSize = useOverrideConfigAtom(blockId, "editor:fontsize");
|
||||
const theme = "wave-theme-dark";
|
||||
|
||||
React.useEffect(() => {
|
||||
@ -150,8 +151,9 @@ export function CodeEditor({ blockId, text, language, filename, meta, onChange,
|
||||
opts.minimap.enabled = minimapEnabled;
|
||||
opts.stickyScroll.enabled = stickyScrollEnabled;
|
||||
opts.wordWrap = wordWrap ? "on" : "off";
|
||||
opts.fontSize = fontSize;
|
||||
return opts;
|
||||
}, [minimapEnabled, stickyScrollEnabled, wordWrap]);
|
||||
}, [minimapEnabled, stickyScrollEnabled, wordWrap, fontSize]);
|
||||
|
||||
return (
|
||||
<div className="code-editor-wrapper">
|
||||
|
||||
@ -8,7 +8,7 @@ import { RpcResponseHelper, WshClient } from "@/app/store/wshclient";
|
||||
import { RpcApi } from "@/app/store/wshclientapi";
|
||||
import { makeFeBlockRouteId } from "@/app/store/wshrouter";
|
||||
import { DefaultRouter, TabRpcClient } from "@/app/store/wshrpcutil";
|
||||
import { atoms, createBlock, fetchWaveFile, getApi, globalStore, WOS } from "@/store/global";
|
||||
import { atoms, createBlock, fetchWaveFile, getApi, globalStore, useOverrideConfigAtom, WOS } from "@/store/global";
|
||||
import { BlockService, ObjectService } from "@/store/services";
|
||||
import { adaptFromReactOrNativeKeyEvent, checkKeyPressed } from "@/util/keyutil";
|
||||
import { fireAndForget, isBlank, makeIconClass } from "@/util/util";
|
||||
@ -30,6 +30,7 @@ const slidingWindowSize = 30;
|
||||
|
||||
interface ChatItemProps {
|
||||
chatItem: ChatMessageType;
|
||||
model: WaveAiModel;
|
||||
}
|
||||
|
||||
function promptToMsg(prompt: OpenAIPromptMessageType): ChatMessageType {
|
||||
@ -430,11 +431,12 @@ function makeWaveAiViewModel(blockId: string): WaveAiModel {
|
||||
return waveAiModel;
|
||||
}
|
||||
|
||||
const ChatItem = ({ chatItem }: ChatItemProps) => {
|
||||
const ChatItem = ({ chatItem, model }: ChatItemProps) => {
|
||||
const { user, text } = chatItem;
|
||||
const cssVar = "--panel-bg-color";
|
||||
const panelBgColor = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
|
||||
|
||||
const fontSize = useOverrideConfigAtom(model.blockId, "ai:fontsize");
|
||||
const fixedFontSize = useOverrideConfigAtom(model.blockId, "ai:fixedfontsize");
|
||||
const renderContent = useMemo(() => {
|
||||
if (user == "error") {
|
||||
return (
|
||||
@ -445,7 +447,12 @@ const ChatItem = ({ chatItem }: ChatItemProps) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="chat-msg chat-msg-error">
|
||||
<Markdown text={text} scrollable={false} />
|
||||
<Markdown
|
||||
text={text}
|
||||
scrollable={false}
|
||||
fontSizeOverride={fontSize}
|
||||
fixedFontSizeOverride={fixedFontSize}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@ -459,7 +466,12 @@ const ChatItem = ({ chatItem }: ChatItemProps) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="chat-msg chat-msg-assistant">
|
||||
<Markdown text={text} scrollable={false} />
|
||||
<Markdown
|
||||
text={text}
|
||||
scrollable={false}
|
||||
fontSizeOverride={fontSize}
|
||||
fixedFontSizeOverride={fixedFontSize}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
@ -474,11 +486,17 @@ const ChatItem = ({ chatItem }: ChatItemProps) => {
|
||||
return (
|
||||
<>
|
||||
<div className="chat-msg chat-msg-user">
|
||||
<Markdown className="msg-text" text={text} scrollable={false} />
|
||||
<Markdown
|
||||
className="msg-text"
|
||||
text={text}
|
||||
scrollable={false}
|
||||
fontSizeOverride={fontSize}
|
||||
fixedFontSizeOverride={fixedFontSize}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}, [text, user]);
|
||||
}, [text, user, fontSize, fixedFontSize]);
|
||||
|
||||
return <div className={"chat-msg-container"}>{renderContent}</div>;
|
||||
};
|
||||
@ -487,10 +505,11 @@ interface ChatWindowProps {
|
||||
chatWindowRef: React.RefObject<HTMLDivElement>;
|
||||
messages: ChatMessageType[];
|
||||
msgWidths: Object;
|
||||
model: WaveAiModel;
|
||||
}
|
||||
|
||||
const ChatWindow = memo(
|
||||
forwardRef<OverlayScrollbarsComponentRef, ChatWindowProps>(({ chatWindowRef, messages, msgWidths }, ref) => {
|
||||
forwardRef<OverlayScrollbarsComponentRef, ChatWindowProps>(({ chatWindowRef, messages, msgWidths, model }, ref) => {
|
||||
const [isUserScrolling, setIsUserScrolling] = useState(false);
|
||||
|
||||
const osRef = useRef<OverlayScrollbarsComponentRef>(null);
|
||||
@ -559,7 +578,7 @@ const ChatWindow = memo(
|
||||
<div ref={chatWindowRef} className="chat-window" style={msgWidths}>
|
||||
<div className="filler"></div>
|
||||
{messages.map((chitem, idx) => (
|
||||
<ChatItem key={idx} chatItem={chitem} />
|
||||
<ChatItem key={idx} chatItem={chitem} model={model} />
|
||||
))}
|
||||
</div>
|
||||
</OverlayScrollbarsComponent>
|
||||
@ -804,7 +823,13 @@ const WaveAi = ({ model }: { model: WaveAiModel; blockId: string }) => {
|
||||
return (
|
||||
<div ref={waveaiRef} className="waveai">
|
||||
<div className="waveai-chat">
|
||||
<ChatWindow ref={osRef} chatWindowRef={chatWindowRef} messages={messages} msgWidths={msgWidths} />
|
||||
<ChatWindow
|
||||
ref={osRef}
|
||||
chatWindowRef={chatWindowRef}
|
||||
messages={messages}
|
||||
msgWidths={msgWidths}
|
||||
model={model}
|
||||
/>
|
||||
</div>
|
||||
<div className="waveai-controls">
|
||||
<div className="waveai-input-wrapper">
|
||||
|
||||
3
frontend/types/gotypes.d.ts
vendored
3
frontend/types/gotypes.d.ts
vendored
@ -617,6 +617,8 @@ declare global {
|
||||
"ai:apiversion"?: string;
|
||||
"ai:maxtokens"?: number;
|
||||
"ai:timeoutms"?: number;
|
||||
"ai:fontsize"?: number;
|
||||
"ai:fixedfontsize"?: number;
|
||||
"term:*"?: boolean;
|
||||
"term:fontsize"?: number;
|
||||
"term:fontfamily"?: string;
|
||||
@ -629,6 +631,7 @@ declare global {
|
||||
"editor:minimapenabled"?: boolean;
|
||||
"editor:stickyscrollenabled"?: boolean;
|
||||
"editor:wordwrap"?: boolean;
|
||||
"editor:fontsize"?: number;
|
||||
"web:*"?: boolean;
|
||||
"web:openlinksinternally"?: boolean;
|
||||
"web:defaulturl"?: string;
|
||||
|
||||
@ -17,6 +17,8 @@ const (
|
||||
ConfigKey_AIApiVersion = "ai:apiversion"
|
||||
ConfigKey_AiMaxTokens = "ai:maxtokens"
|
||||
ConfigKey_AiTimeoutMs = "ai:timeoutms"
|
||||
ConfigKey_AiFontSize = "ai:fontsize"
|
||||
ConfigKey_AiFixedFontSize = "ai:fixedfontsize"
|
||||
|
||||
ConfigKey_TermClear = "term:*"
|
||||
ConfigKey_TermFontSize = "term:fontsize"
|
||||
@ -31,6 +33,7 @@ const (
|
||||
ConfigKey_EditorMinimapEnabled = "editor:minimapenabled"
|
||||
ConfigKey_EditorStickyScrollEnabled = "editor:stickyscrollenabled"
|
||||
ConfigKey_EditorWordWrap = "editor:wordwrap"
|
||||
ConfigKey_EditorFontSize = "editor:fontsize"
|
||||
|
||||
ConfigKey_WebClear = "web:*"
|
||||
ConfigKey_WebOpenLinksInternally = "web:openlinksinternally"
|
||||
|
||||
@ -33,17 +33,19 @@ const AnySchema = `
|
||||
`
|
||||
|
||||
type SettingsType struct {
|
||||
AiClear bool `json:"ai:*,omitempty"`
|
||||
AiPreset string `json:"ai:preset,omitempty"`
|
||||
AiApiType string `json:"ai:apitype,omitempty"`
|
||||
AiBaseURL string `json:"ai:baseurl,omitempty"`
|
||||
AiApiToken string `json:"ai:apitoken,omitempty"`
|
||||
AiName string `json:"ai:name,omitempty"`
|
||||
AiModel string `json:"ai:model,omitempty"`
|
||||
AiOrgID string `json:"ai:orgid,omitempty"`
|
||||
AIApiVersion string `json:"ai:apiversion,omitempty"`
|
||||
AiMaxTokens float64 `json:"ai:maxtokens,omitempty"`
|
||||
AiTimeoutMs float64 `json:"ai:timeoutms,omitempty"`
|
||||
AiClear bool `json:"ai:*,omitempty"`
|
||||
AiPreset string `json:"ai:preset,omitempty"`
|
||||
AiApiType string `json:"ai:apitype,omitempty"`
|
||||
AiBaseURL string `json:"ai:baseurl,omitempty"`
|
||||
AiApiToken string `json:"ai:apitoken,omitempty"`
|
||||
AiName string `json:"ai:name,omitempty"`
|
||||
AiModel string `json:"ai:model,omitempty"`
|
||||
AiOrgID string `json:"ai:orgid,omitempty"`
|
||||
AIApiVersion string `json:"ai:apiversion,omitempty"`
|
||||
AiMaxTokens float64 `json:"ai:maxtokens,omitempty"`
|
||||
AiTimeoutMs float64 `json:"ai:timeoutms,omitempty"`
|
||||
AiFontSize float64 `json:"ai:fontsize,omitempty"`
|
||||
AiFixedFontSize float64 `json:"ai:fixedfontsize,omitempty"`
|
||||
|
||||
TermClear bool `json:"term:*,omitempty"`
|
||||
TermFontSize float64 `json:"term:fontsize,omitempty"`
|
||||
@ -55,9 +57,10 @@ type SettingsType struct {
|
||||
TermScrollback *int64 `json:"term:scrollback,omitempty"`
|
||||
TermCopyOnSelect *bool `json:"term:copyonselect,omitempty"`
|
||||
|
||||
EditorMinimapEnabled bool `json:"editor:minimapenabled,omitempty"`
|
||||
EditorStickyScrollEnabled bool `json:"editor:stickyscrollenabled,omitempty"`
|
||||
EditorWordWrap bool `json:"editor:wordwrap,omitempty"`
|
||||
EditorMinimapEnabled bool `json:"editor:minimapenabled,omitempty"`
|
||||
EditorStickyScrollEnabled bool `json:"editor:stickyscrollenabled,omitempty"`
|
||||
EditorWordWrap bool `json:"editor:wordwrap,omitempty"`
|
||||
EditorFontSize float64 `json:"editor:fontsize,omitempty"`
|
||||
|
||||
WebClear bool `json:"web:*,omitempty"`
|
||||
WebOpenLinksInternally bool `json:"web:openlinksinternally,omitempty"`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user