Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…in attack history
…ype hints where its redundant
jbolor21
force-pushed
the
bjagdagdorj/frontend_converters
branch
from
446c643 to
69d038f
Compare
jbolor21
changed the title
| noTargetSelected?: boolean | ||
| onConfigureTarget?: () => void | ||
| onToggleConverterPanel?: () => void | ||
| isConverterPanelOpen?: boolean |
There was a problem hiding this comment.
why is this optional ?
There was a problem hiding this comment.
The panel itself is optional and managed by ChatWindow. The ChatInputAreaajust renders a toggle button rather than rendering the actual panel, this way when omitted the isConverterPanelOPen defaults to false and the button is just disabled. And then you can use the box as a normal box without the converters too.
There was a problem hiding this comment.
if theres a way i should make them non optional or change this design feel free to lmk!
| @@ -65,9 +68,19 @@ export default function ChatWindow({ | |||
| const [loadedConversationId, setLoadedConversationId] = useState<string | null>(null) | |||
| const isSending = activeConversationId ? sendingConversations.has(activeConversationId) : Boolean(sendingConversations.size) | |||
| const [isPanelOpen, setIsPanelOpen] = useState(false) | |||
There was a problem hiding this comment.
nit: useState(false)
not necessary but if we want to be pedantic
| } | ||
| } | ||
|
|
||
| void loadConverters() |
There was a problem hiding this comment.
This is a way to use async/await - think callbacks must be synchronous in React, aka it requires them to either return nothing or return a cleanup function. If you make it async, it returns a Promise instead of a cleanup function, which would break cleanup mechanism.
Then this inner function is just a workaround. Open to other ways to do this for sure!
| }, [selectedConverterType, previewText, paramValues, selectedConverter]) | ||
|
|
||
| const [panelWidth, setPanelWidth] = useState(320) | ||
| const isDragging = useRef(false) |
There was a problem hiding this comment.
hmm why are we using useRef here ?
There was a problem hiding this comment.
useRef.current will give latest value wo triggering re-renders on every mouse drag! this is for the resize handle to resize the panel
| onAttachmentsChange?.(types, data) | ||
| } | ||
|
|
||
| void buildData() |
There was a problem hiding this comment.
buildData() ?
as in remove the void
There was a problem hiding this comment.
the void lets the linting work - can't use "await" inside "useEffect" directly?
| } | ||
|
|
||
| const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(function ChatInputArea({ onSend, disabled = false, activeTarget, singleTurnLimitReached = false, onNewConversation, operatorLocked = false, crossTargetLocked = false, onUseAsTemplate, attackOperator, noTargetSelected = false, onConfigureTarget }, ref) { | ||
| const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(function ChatInputArea({ onSend, disabled = false, activeTarget, singleTurnLimitReached = false, onNewConversation, operatorLocked = false, crossTargetLocked = false, onUseAsTemplate, attackOperator, noTargetSelected = false, onConfigureTarget, onToggleConverterPanel, isConverterPanelOpen = false, onInputChange, onAttachmentsChange, convertedValue, originalValue: _originalValue, onClearConversion, onConvertedValueChange, mediaConversions = [], onClearMediaConversion }, ref) { |
There was a problem hiding this comment.
ik you didn't write this but do you know what this forward ref is doing ? I'm not super familiar with forwardref
There was a problem hiding this comment.
lets parent component get direct reference to things inside ChatInputArea - here the parent passes ref to CHatInputArea and then the useImperativeHandle exposes the addAttachment and setText methods
2 participants
Description
Adding converter panels to the GUI interface! This PR only lets you run ONE converter per turn per type of media (ie you can do an image + text conversion in same turn but not two text conversions in one turn)
Tests and Documentation
Images:
(new button is shown):
(new panel)
(panel dropdown)
(once you've selected converter)
