ui: added some change for vscode

smallcloudai · Jan 17, 2024 · 686922f · 686922f
1 parent 910c465
commit 686922f
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 22 deletions.
diff --git a/TODO.md b/TODO.md
@@ -59,9 +59,12 @@
 [x] hard code @commands for now but it the future they will be fetched
 [x] combobox for the @commands
 [x] add combobox to chat form and maybe pass text-area as a child component
-[ ] remove test commands
+[x] remove test commands
+
 [ ] rag commands come from the caps url.
 
+[ ] ensure vscode api is called only once
+
 ### EVENTS TODO FOR IDEs
 
 [ ] add missing events

diff --git a/index.html b/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1"
+    />
     <title>Refact.ai Chat</title>
   </head>
   <body>

diff --git a/src/components/ChatContent/ChatContent.module.css b/src/components/ChatContent/ChatContent.module.css
@@ -1,3 +1,3 @@
 .content {
-  max-width: calc(100% - 12px);
+  /* max-width: calc(100% - 12px); */
 }
diff --git a/src/components/ChatContent/ChatContent.tsx b/src/components/ChatContent/ChatContent.tsx
@@ -71,7 +71,7 @@ export const ChatContent: React.FC<{
 
   return (
     <ScrollArea scrollbars="vertical">
-      <Flex grow="1" direction="column" className={styles.content}>
+      <Flex grow="1" p="3" pt="0" direction="column" className={styles.content}>
         {messages.length === 0 && <PlaceHolderText />}
         {messages.map((message, index) => {
           if (isChatContextFileMessage(message)) {

diff --git a/src/components/ChatForm/ChatForm.module.css b/src/components/ChatForm/ChatForm.module.css
@@ -14,7 +14,7 @@
 .chatForm {
   box-shadow: inset 0 0 0 1px var(--gray-a7);
   border: 1px solid var(--gray-a7);
-  padding: 10px;
+  /* padding: 10px; */
   border-radius: 6px;
   position: relative;
   flex-shrink: 0;

diff --git a/src/components/ChatForm/ChatForm.stories.tsx b/src/components/ChatForm/ChatForm.stories.tsx
@@ -9,7 +9,7 @@ const testCommands = [
   "@web",
   "@database",
   "@?",
-  "@longlonglonglong",
+  "@longlonglonglonglonglonglonglonglonglong",
   "@refactor",
   "@test",
   "@Apple",

diff --git a/src/components/ChatForm/ChatForm.tsx b/src/components/ChatForm/ChatForm.tsx
@@ -126,7 +126,7 @@ export const ChatForm: React.FC<{
           value={value}
           onChange={setValue}
           onSubmit={handleEnter}
-          placeholder="Type @ for commands"
+          placeholder={commands.length > 0 ? "Type @ for commands" : ""}
           render={(props) => <TextArea disabled={isStreaming} {...props} />}
         />
         <Flex gap="2" className={styles.buttonGroup}>

diff --git a/src/components/ComboBox/ComboBox.tsx b/src/components/ComboBox/ComboBox.tsx
@@ -51,8 +51,8 @@ const Popover: React.FC<
       )}
     >
       <ComboboxPopover unmountOnHide fitViewport {...props}>
-        <ScrollArea scrollbars="vertical" className={styles.popover__scroll}>
-          <Box p="1" style={{ overflowY: "hidden" }}>
+        <ScrollArea scrollbars="both" className={styles.popover__scroll}>
+          <Box p="1" style={{ overflowY: "hidden", overflowX: "hidden" }}>
             {children}
           </Box>
         </ScrollArea>

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -14,7 +14,7 @@ export const Select: React.FC<SelectProps> = ({
   ...props
 }) => {
   return (
-    <RadixSelect.Root {...props} onValueChange={onChange}>
+    <RadixSelect.Root {...props} onValueChange={onChange} size="1">
       <RadixSelect.Trigger title={title} />
       <RadixSelect.Content>
         {options.map((option) => {

diff --git a/src/components/Theme/Theme.tsx b/src/components/Theme/Theme.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   Theme as RadixTheme,
   IconButton,
@@ -38,9 +38,17 @@ export const Theme: React.FC<React.ComponentProps<typeof RadixTheme>> = (
   props,
 ) => {
   const config = useConfig();
+  const [isDarkMode, setDarkMode] = React.useState(false);
+
+  useEffect(() => {
+    const maybeDark = document.body.classList.contains("vscode-dark");
+    setDarkMode(() => maybeDark);
+  }, []);
+
   if (config.host === "web") {
     return <ThemeWithDarkMode {...props} />;
   }
+  // todo make this a hook
 
-  return <RadixTheme {...props} />;
+  return <RadixTheme {...props} appearance={isDarkMode ? "dark" : "inherit"} />;
 };
diff --git a/src/contexts/config-context.tsx b/src/contexts/config-context.tsx
@@ -2,7 +2,7 @@ import React, { useContext, createContext } from "react";
 
 export type Config = {
   rag?: boolean; // TODO: remove this
-  host: "web" | "ide"; // | "vscode" | "jetbrains"
+  host: "web" | "ide" | "vscode" | "jetbrains";
   tabbed?: boolean;
   lspUrl?: string;
 };

diff --git a/src/features/Chat.tsx b/src/features/Chat.tsx
@@ -4,8 +4,11 @@ import { useEventBusForChat } from "../hooks/useEventBusForChat";
 import { ChatContent } from "../components/ChatContent";
 import { Flex, Responsive } from "@radix-ui/themes";
 import { isChatContextFileMessage } from "../services/refact";
+import { useConfig } from "../contexts/config-context";
 
 export const Chat: React.FC<{ style?: React.CSSProperties }> = (props) => {
+  const { host } = useConfig();
+
   const {
     state,
     askQuestion,
@@ -17,17 +20,19 @@ export const Chat: React.FC<{ style?: React.CSSProperties }> = (props) => {
     hasContextFile,
   } = useEventBusForChat();
 
-  // TODO: ide's won't need this to be as big because the light dark button won't be there
   const LeftRightPadding: Responsive<
     "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
-  > = {
-    initial: "8",
-    // xs: "5",
-    // sm: "6",
-    // md: "7",
-    // lg: "8",
-    xl: "9",
-  };
+  > =
+    host === "web"
+      ? { initial: "8", xl: "9" }
+      : {
+          initial: "2",
+          xs: "2",
+          sm: "4",
+          md: "8",
+          lg: "8",
+          xl: "9",
+        };
 
   const TopBottomPadding: Responsive<
     "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"