pabloid
/
tsgames
1
0
Fork 0
Code

Send icons

This commit is contained in:
Pabloader 2026-04-09 14:26:23 +00:00
parent 3074d6dd8d
commit f7dd0176c7
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/games/storywriter/assets/chat-sidebar.module.css
View File

@ -51,6 +51,12 @@
opacity: 1; opacity: 1;
} }
@media (max-width: 1000px) {
.messageActions {
opacity: 1;
}
}
.iconButton { .iconButton {
display: flex; display: flex;
align-items: center; align-items: center;
@ -308,15 +314,17 @@
} }
.sendButton { .sendButton {
padding: 5px 14px; display: flex;
font-size: 13px; align-items: center;
font-weight: bold; justify-content: center;
padding: 5px;
color: var(--bg); color: var(--bg);
background: var(--accent); background: var(--accent);
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
height: 28px; height: 28px;
width: 28px;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--accent-alt); background: var(--accent-alt);
@ -329,15 +337,17 @@
} }
.stopButton { .stopButton {
padding: 5px 14px; display: flex;
font-size: 13px; align-items: center;
font-weight: bold; justify-content: center;
padding: 5px;
color: var(--bg); color: var(--bg);
background: var(--error, #f44336); background: var(--error, #f44336);
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
height: 28px; height: 28px;
width: 28px;
&:hover { &:hover {
background: #d32f2f; background: #d32f2f;

9
src/games/storywriter/components/chat-sidebar.tsx
View File

@ -3,7 +3,7 @@ import { highlight } from "@common/highlight";
import { useInputState } from "@common/hooks/useInputState"; import { useInputState } from "@common/hooks/useInputState";
import { useMediaQuery } from "@common/hooks/useMediaQuery"; import { useMediaQuery } from "@common/hooks/useMediaQuery";
import clsx from "clsx"; import clsx from "clsx";
import { Check, ChevronsRight, Edit2, GitFork, RefreshCw, Sparkles, Trash2, X } from "lucide-preact"; import { Check, ChevronsRight, Edit2, GitFork, RefreshCw, SendHorizonal, Sparkles, Square, Trash2, X } from "lucide-preact";
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"; import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
import { MOBILE_BREAKPOINT } from '../assets/breakpoints'; import { MOBILE_BREAKPOINT } from '../assets/breakpoints';
import styles from '../assets/chat-sidebar.module.css'; import styles from '../assets/chat-sidebar.module.css';
@ -584,8 +584,8 @@ export const ChatPanel = ({ visible }: { visible: boolean }) => {
</div> </div>
<div class={styles.inputFooterRight}> <div class={styles.inputFooterRight}>
{isLoading ? ( {isLoading ? (
<button class={styles.stopButton} onClick={handleStopGeneration}> <button class={styles.stopButton} onClick={handleStopGeneration} title="Stop">
Stop <Square size={14} />
</button> </button>
) : ( ) : (
<> <>
@ -621,8 +621,9 @@ export const ChatPanel = ({ visible }: { visible: boolean }) => {
class={styles.sendButton} class={styles.sendButton}
onClick={handleSendMessage} onClick={handleSendMessage}
disabled={isDisabled} disabled={isDisabled}
title="Send"
> >
Send <SendHorizonal size={14} />
</button> </button>
</> </>
)} )}