Rename the ChatInput component and related files to PromptField for improved clarity and consistency

Author: robertpiosik

packages/ui/src/components/editor/panel/ChatInput/index.ts

@@ -1,12 +1,12 @@
 import { useState } from 'react'
-import { ChatInput, type EditFormat } from './ChatInput'
+import { PromptField, type EditFormat } from './PromptField'
 
 export default {
-  component: ChatInput
+  component: PromptField
 }
 
 export const Empty = () => (
-  <ChatInput
+  <PromptField
     value=""
     chat_history={[]}
     on_change={(value) => console.log('Changed:', value)}
@@ -28,7 +28,7 @@ export const Empty = () => (
 )
 
 export const WithText = () => (
-  <ChatInput
+  <PromptField
     value="Hello, this is a sample message"
     chat_history={[]}
     on_change={(value) => console.log('Changed:', value)}
@@ -50,7 +50,7 @@ export const WithText = () => (
 )
 
 export const LongText = () => (
-  <ChatInput
+  <PromptField
     value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     chat_history={[]}
     on_change={(value) => console.log('Changed:', value)}
@@ -72,7 +72,7 @@ export const LongText = () => (
 )
 
 export const WithPlaceholderSavedContext = () => (
-  <ChatInput
+  <PromptField
     value='Ask about the #SavedContext:JSON "My Context"'
     chat_history={[]}
     on_change={(value) => console.log('Changed:', value)}
@@ -94,7 +94,7 @@ export const WithPlaceholderSavedContext = () => (
 )
 
 export const WithPlaceholderSelection = () => (
-  <ChatInput
+  <PromptField
     value="Ask about the #Selection"
     chat_history={[]}
     on_change={(value) => console.log('Changed:', value)}
@@ -116,7 +116,7 @@ export const WithPlaceholderSelection = () => (
 )
 
 export const WithCommit = () => (
-  <ChatInput
+  <PromptField
     value='Ask about #Commit:my-repo:a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0 "Initial commit"'
     chat_history={[]}
     on_change={(value) => console.log('Changed:', value)}
@@ -140,7 +140,7 @@ export const WithCommit = () => (
 export const WithEditFormatSelector = () => {
   const [edit_format, set_edit_format] = useState<EditFormat>('diff')
   return (
-    <ChatInput
+    <PromptField
       value="Hello, this is a sample message"
       chat_history={[]}
       on_change={(value) => console.log('Changed:', value)}
@@ -171,7 +171,7 @@ export const WithEditFormatSelector = () => {
 }
 
 export const WithFilePaths = () => (
-  <ChatInput
+  <PromptField
     value="This is about `path/to/my/file.ts` and not about `another/file.txt`"
     chat_history={[]}
     on_change={(value) => console.log('Changed:', value)}

…or/panel/ChatInput/ChatInput.module.scss …anel/PromptField/PromptField.module.scsspackages/ui/src/components/editor/panel/ChatInput/ChatInput.module.scss renamed to packages/ui/src/components/editor/panel/PromptField/PromptField.module.scss packages/ui/src/components/editor/panel/ChatInput/ChatInput.module.scss renamed to packages/ui/src/components/editor/panel/PromptField/PromptField.module.scss

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useMemo, useState } from 'react'
-import styles from './ChatInput.module.scss'
+import styles from './PromptField.module.scss'
 import cn from 'classnames'
 import { Icon } from '../../common/Icon'
 import { get_highlighted_text } from './utils/get-highlighted-text'
@@ -43,7 +43,7 @@ const Tooltip: React.FC<{
 
 export type EditFormat = 'whole' | 'truncated' | 'diff'
 
-export type ChatInputProps = {
+export type PromptFieldProps = {
   value: string
   chat_history: string[]
   on_change: (value: string) => void
@@ -73,7 +73,7 @@ export type ChatInputProps = {
   on_go_to_file?: (file_path: string) => void
 }
 
-export const ChatInput: React.FC<ChatInputProps> = (props) => {
+export const PromptField: React.FC<PromptFieldProps> = (props) => {
   const input_ref = useRef<HTMLDivElement>(null)
   const container_ref = useRef<HTMLDivElement>(null)
   const [caret_position, set_caret_position] = useState(0)

…or/panel/ChatInput/ChatInput.stories.tsx …anel/PromptField/PromptField.stories.tsxpackages/ui/src/components/editor/panel/ChatInput/ChatInput.stories.tsx renamed to packages/ui/src/components/editor/panel/PromptField/PromptField.stories.tsx packages/ui/src/components/editor/panel/ChatInput/ChatInput.stories.tsx renamed to packages/ui/src/components/editor/panel/PromptField/PromptField.stories.tsx

@@ -1,8 +1,8 @@
 import { useState, useRef, useEffect } from 'react'
-import type { ChatInputProps } from '../ChatInput'
+import type { PromptFieldProps } from '../PromptField'
 
 type UseDropdownParams = Pick<
-  ChatInputProps,
+  PromptFieldProps,
   'on_copy' | 'on_submit_with_control'
 >
 

…nts/editor/panel/ChatInput/ChatInput.tsx …editor/panel/PromptField/PromptField.tsxpackages/ui/src/components/editor/panel/ChatInput/ChatInput.tsx renamed to packages/ui/src/components/editor/panel/PromptField/PromptField.tsx packages/ui/src/components/editor/panel/ChatInput/ChatInput.tsx renamed to packages/ui/src/components/editor/panel/PromptField/PromptField.tsx

@@ -1,5 +1,5 @@
 import { RefObject, useState } from 'react'
-import { ChatInputProps } from '../ChatInput'
+import { PromptFieldProps } from '../PromptField'
 import { get_display_text } from '../utils/get-display-text'
 import {
   get_caret_position_from_div,
@@ -79,7 +79,7 @@ const set_caret_position_after_change = (
 }
 
 export const use_handlers = (
-  props: ChatInputProps,
+  props: PromptFieldProps,
   input_ref: RefObject<HTMLDivElement>
 ) => {
   const [history_index, set_history_index] = useState(-1)

…or/panel/ChatInput/hooks/use-dropdown.ts …/panel/PromptField/hooks/use-dropdown.tspackages/ui/src/components/editor/panel/ChatInput/hooks/use-dropdown.ts renamed to packages/ui/src/components/editor/panel/PromptField/hooks/use-dropdown.ts packages/ui/src/components/editor/panel/ChatInput/hooks/use-dropdown.ts renamed to packages/ui/src/components/editor/panel/PromptField/hooks/use-dropdown.ts

@@ -0,0 +1 @@
+export * from './PromptField'