[DRAFT] Converters for Frontend

frontend/src/components/Chat/ChatInputArea.styles.ts

@@ -79,6 +79,7 @@ export const useChatInputAreaStyles = makeStyles({
     display: 'flex',
     gap: tokens.spacingHorizontalXS,
     marginRight: tokens.spacingHorizontalS,
+    alignItems: 'center',
   },
   iconButtonsRight: {
     display: 'flex',
@@ -131,4 +132,53 @@ export const useChatInputAreaStyles = makeStyles({
     color: tokens.colorPaletteRedForeground1,
     fontWeight: tokens.fontWeightSemibold as unknown as string,
   },
+  conversionBarBottom: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: tokens.spacingHorizontalXS,
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalL}`,
+    paddingLeft: `calc(${tokens.spacingHorizontalL} + 32px + ${tokens.spacingHorizontalXS} + 32px + ${tokens.spacingHorizontalS})`,
+    borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground4,
+    overflow: 'hidden',
+  },
+  conversionLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalXXS,
+    flex: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+  },
+  conversionText: {
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    fontFamily: tokens.fontFamilyMonospace,
+    fontSize: tokens.fontSizeBase200,
+    minWidth: 0,
+    flex: 1,
+    maxHeight: '80px',
+    overflowY: 'auto',
+  },
+  originalBadge: {
+    display: 'inline-block',
+    padding: `0 ${tokens.spacingHorizontalXS}`,
+    marginRight: tokens.spacingHorizontalXS,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorPaletteBlueBackground2,
+    color: tokens.colorPaletteBlueForeground2,
+    fontSize: tokens.fontSizeBase100,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    flexShrink: 0,
+  },
+  convertedBadge: {
+    display: 'inline-block',
+    padding: `0 ${tokens.spacingHorizontalXS}`,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorPaletteGreenBackground2,
+    color: tokens.colorPaletteGreenForeground2,
+    fontSize: tokens.fontSizeBase100,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    flexShrink: 0,
+  },
 })

frontend/src/components/Chat/ChatInputArea.test.tsx

@@ -26,12 +26,31 @@ describe("ChatInputArea", () => {
   it("should render input area and send button", () => {
     render(
       <TestWrapper>
-        <ChatInputArea {...defaultProps} />
+        <ChatInputArea {...defaultProps} onToggleConverterPanel={jest.fn()} />
       </TestWrapper>
     );
 
     expect(screen.getByRole("textbox")).toBeInTheDocument();
     expect(getSendButton()).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /convert/i })).toBeInTheDocument();
+  });
+
+  it("should call converter panel toggle handler when convert button is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleConverterPanel = jest.fn();
+
+    render(
+      <TestWrapper>
+        <ChatInputArea
+          {...defaultProps}
+          onToggleConverterPanel={onToggleConverterPanel}
+        />
+      </TestWrapper>
+    );
+
+    await user.click(screen.getByRole("button", { name: /convert/i }));
+
+    expect(onToggleConverterPanel).toHaveBeenCalledTimes(1);
   });
 
   it("should call onSend with input value when send button clicked", async () => {

frontend/src/components/Chat/ChatInputArea.tsx

@@ -1,12 +1,12 @@
 import { useState, useEffect, useLayoutEffect, useRef, forwardRef, useImperativeHandle, KeyboardEvent } from 'react'
 import {
   Button,
-  tokens,
   Caption1,
   Tooltip,
   Text,
+  tokens,
 } from '@fluentui/react-components'
-import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular } from '@fluentui/react-icons'
+import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular, ArrowShuffleRegular } from '@fluentui/react-icons'
 import { MessageAttachment, TargetInstance } from '../../types'
 import { useChatInputAreaStyles } from './ChatInputArea.styles'
 
@@ -68,9 +68,16 @@
   attackOperator?: string
   noTargetSelected?: boolean
   onConfigureTarget?: () => void
+  onToggleConverterPanel?: () => void
+  isConverterPanelOpen?: boolean
+  onInputChange?: (value: string) => void
+  onAttachmentsChange?: (types: string[]) => void
+  convertedValue?: string | null
+  originalValue?: string | null
+  onClearConversion?: () => void
 }
 
-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, onClearConversion }, ref) {
   const styles = useChatInputAreaStyles()
   const [input, setInput] = useState('')
   const [attachments, setAttachments] = useState<MessageAttachment[]>([])
@@ -126,9 +133,10 @@
 
   const handleSend = () => {
     if ((input || attachments.length > 0) && !disabled) {
-      onSend(input, undefined, attachments)
+      onSend(input, convertedValue ?? undefined, attachments)
       setInput('')
       setAttachments([])
+      onClearConversion?.()
       if (textareaRef.current) {
         textareaRef.current.style.height = 'auto'
       }
@@ -156,7 +164,13 @@
       textareaRef.current.style.height = 'auto'
       textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 96) + 'px'
     }
-  }, [input])
+    onInputChange?.(input)
+  }, [input, onInputChange])
+
+  useEffect(() => {
+    const types = [...new Set(attachments.map((a) => a.type))]
+    onAttachmentsChange?.(types)
+  }, [attachments, onAttachmentsChange])
 
   const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInput(e.target.value)
@@ -261,7 +275,19 @@
               disabled={disabled}
               title="Attach files"
             />
+            <Button
+              className={styles.iconButton}
+              appearance={isConverterPanelOpen ? 'primary' : 'subtle'}
+              icon={<ArrowShuffleRegular />}
+              onClick={onToggleConverterPanel}
+              disabled={disabled || !onToggleConverterPanel}
+              data-testid="toggle-converter-panel-btn"
+              title="Toggle converter panel"
+            />
             </div>
+          {convertedValue && (
+            <span className={styles.originalBadge} data-testid="original-banner">Original</span>
+          )}
           <textarea
             ref={textareaRef}
             className={styles.textInput}
@@ -271,6 +297,7 @@
             onKeyDown={handleKeyDown}
             disabled={disabled}
             rows={1}
+            data-testid="chat-input"
           />
           <div className={styles.iconButtonsRight}>
             {activeTarget && activeTarget.supports_multi_turn === false && (
@@ -293,6 +320,22 @@
             />
           </div>
           </div>
+          {convertedValue && (
+            <div className={styles.conversionBarBottom} data-testid="converted-indicator">
+              <span className={styles.convertedBadge}>Converted</span>
+              <Text size={200} className={styles.conversionText}>
+                {convertedValue}
+              </Text>
+              <Button
+                appearance="subtle"
+                size="small"
+                onClick={onClearConversion}
+                data-testid="clear-conversion-btn"
+              >
+                ✕
+              </Button>
+            </div>
+          )}
         </div>
         </>
         )}