Layout cleanups: smaller header and single line message input

lib/ui/src/Chat.module.css

@@ -29,10 +29,10 @@
 .submit-button {
     position: absolute;
     right: 0;
-    bottom: 0.125rem;
+    bottom: 0;
     fill: currentColor;
     opacity: 0.8;
-    margin: 0.25rem;
+    margin: 0 0 0.2rem 0;
     background: none;
     border: none;
     cursor: pointer;

lib/ui/src/Chat.tsx

@@ -149,17 +149,13 @@ export const Chat: React.FunctionComponent<ChatProps> = ({
     ChatButtonComponent,
     pluginsDevMode,
 }) => {
-    const [inputRows, setInputRows] = useState(5)
+    const [inputRows, setInputRows] = useState(1)
     const [historyIndex, setHistoryIndex] = useState(inputHistory.length)
 
     const inputHandler = useCallback(
         (inputValue: string): void => {
-            const rowsCount = inputValue.match(/\n/g)?.length
-            if (rowsCount) {
-                setInputRows(rowsCount < 5 ? 5 : rowsCount > 25 ? 25 : rowsCount)
-            } else {
-                setInputRows(5)
-            }
+            const rowsCount = (inputValue.match(/\n/g)?.length || 0) + 1
+            setInputRows(rowsCount > 25 ? 25 : rowsCount)
             setFormInput(inputValue)
             if (inputValue !== inputHistory[historyIndex]) {
                 setHistoryIndex(inputHistory.length)
@@ -192,7 +188,7 @@ export const Chat: React.FunctionComponent<ChatProps> = ({
     const onChatSubmit = useCallback((): void => {
         // Submit chat only when input is not empty and not in progress
         if (formInput.trim() && !messageInProgress) {
-            setInputRows(5)
+            setInputRows(1)
             setFormInput('')
             submitInput(formInput, 'user')
         }

lib/ui/src/chat/inputContext/ChatInputContext.module.css

@@ -1,7 +1,7 @@
 .container {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.3rem;
     user-select: none;
 }
 

lib/ui/src/chat/inputContext/ChatInputContext.tsx

@@ -44,21 +44,25 @@ export const ChatInputContext: React.FunctionComponent<{
             ) : contextStatus.mode && contextStatus.connection ? (
                 <CodebaseState
                     codebase={contextStatus.codebase}
-                    tooltip="Repository is indexed and has embeddings"
+                    tooltip={`Repository ${contextStatus.codebase} is indexed and has embeddings`}
                     icon={mdiDatabaseCheckOutline}
                 />
             ) : (
                 <CodebaseState
                     codebase={contextStatus.codebase}
-                    tooltip="Repository is not indexed and has no embeddings"
+                    tooltip={`Repository ${contextStatus.codebase} is not indexed and has no embeddings`}
                     icon={mdiDatabaseRemoveOutline}
                     iconClassName={styles.warningColor}
                 />
             )}
-            {contextStatus.filePath && (
+            {(contextStatus.filePath && (
                 <p className={styles.file} title={contextStatus.filePath}>
                     {formatFilePath(contextStatus.filePath, contextStatus.selection)}
                 </p>
+            )) || (
+                <p className={styles.file} title={contextStatus.filePath}>
+                    No file selected
+                </p>
             )}
         </div>
     )
@@ -72,8 +76,5 @@ const CodebaseState: React.FunctionComponent<{
 }> = ({ tooltip, iconClassName, icon, codebase }) => (
     <h3 title={tooltip} className={styles.codebase}>
         <Icon svgPath={icon} className={classNames(styles.codebaseIcon, iconClassName)} />
-        {codebase && (
-            <span className={styles.codebaseLabel}>{basename(codebase.replace(/^(github|gitlab)\.com\//, ''))}</span>
-        )}
     </h3>
 )

vscode/package.json

@@ -204,7 +204,7 @@
       "activitybar": [
         {
           "id": "cody",
-          "title": "Sourcegraph Cody",
+          "title": "Cody",
           "icon": "resources/cody.svg"
         }
       ]

vscode/test/e2e/helpers.ts

@@ -57,9 +57,9 @@ export const test = base
             const page = await app.firstWindow()
 
             // Bring the cody sidebar to the foreground
-            await page.click('[aria-label="Sourcegraph Cody"]')
+            await page.click('[aria-label="Cody"]')
             // Ensure that we remove the hover from the activity icon
-            await page.getByRole('heading', { name: 'Sourcegraph Cody: Chat' }).hover()
+            await page.getByRole('heading', { name: 'Cody: Chat' }).hover()
             // Wait for Cody to become activated
             // TODO(philipp-spiess): Figure out which playwright matcher we can use that works for
             // the signed-in and signed-out cases

vscode/test/e2e/task-controller.test.ts

@@ -14,7 +14,7 @@ test('task tree view for non-stop cody', async ({ page, sidebar }) => {
     await page.getByRole('treeitem', { name: 'index.html' }).locator('a').dblclick()
 
     // Bring the cody sidebar to the foreground
-    await page.click('[aria-label="Sourcegraph Cody"]')
+    await page.click('[aria-label="Cody"]')
 
     // Expand the task tree view
     await page.getByRole('button', { name: 'Fixups Section' }).click()

vscode/webviews/App.tsx

@@ -11,7 +11,6 @@ import { Configuration } from '@sourcegraph/cody-shared/src/configuration'
 import { AuthStatus, defaultAuthStatus, LocalEnv } from '../src/chat/protocol'
 
 import { Chat } from './Chat'
-import { Header } from './Header'
 import { LoadingPage } from './LoadingPage'
 import { Login } from './Login'
 import { NavBar, View } from './NavBar'
@@ -135,7 +134,6 @@ export const App: React.FunctionComponent<{ vscodeAPI: VSCodeWrapper }> = ({ vsc
 
     return (
         <div className="outer-container">
-            <Header endpoint={authStatus.isLoggedIn ? endpoint : null} />
             {view === 'login' || !authStatus.isLoggedIn ? (
                 <Login
                     authStatus={authStatus}