UI fixes (#200)

* UI fixes * Add source code link
langchain-ai · Oct 18, 2023 · 25713ef · 25713ef
1 parent e8748d7
commit 25713ef
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/chat-langchain/app/components/AutoResizeTextarea.tsx b/chat-langchain/app/components/AutoResizeTextarea.tsx
@@ -24,7 +24,7 @@ export const AutoResizeTextarea = React.forwardRef<
   return (
     <Textarea
       minH="unset"
-      overflow="scroll"
+      overflow="auto"
       w="100%"
       resize="none"
       ref={ref as React.RefObject<HTMLTextAreaElement>}

diff --git a/chat-langchain/app/components/ChatMessageBubble.tsx b/chat-langchain/app/components/ChatMessageBubble.tsx
@@ -356,8 +356,9 @@ export function ChatMessageBubble(props: {
               }}
               isLoading={traceIsLoading}
               loadingText="🔄"
+              color="white"
             >
-              🛠️🔗
+              🦜🛠️ View trace
             </Button>
           </HStack>
         )}

diff --git a/chat-langchain/app/components/ChatWindow.tsx b/chat-langchain/app/components/ChatWindow.tsx
@@ -105,6 +105,7 @@ export function ChatWindow(props: {
           },
           include_names: [sourceStepName],
         }),
+        openWhenHidden: true,
         onerror(err) {
           throw err;
         },
@@ -215,7 +216,6 @@ export function ChatWindow(props: {
         <AutoResizeTextarea
           value={input}
           maxRows={5}
-          rounded={"full"}
           marginRight={"56px"}
           placeholder="What is LangChain Expression Language?"
           textColor={"white"}
@@ -245,6 +245,21 @@ export function ChatWindow(props: {
           />
         </InputRightElement>
       </InputGroup>
+
+      {messages.length === 0 ? (
+        <footer className="flex justify-center absolute bottom-8">
+          <a
+            href="https://github.com/langchain-ai/chat-langchain"
+            target="_blank"
+            className="text-white flex items-center"
+          >
+            <img src="/images/github-mark.svg" className="h-4 mr-1" />
+            <span>View Source</span>
+          </a>
+        </footer>
+      ) : (
+        ""
+      )}
     </div>
   );
 }
diff --git a/chat-langchain/app/components/EmptyState.tsx b/chat-langchain/app/components/EmptyState.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, MouseEventHandler } from "react";
+import { MouseEvent } from "react";
 import {
   Heading,
   Link,
@@ -7,7 +7,6 @@ import {
   Flex,
   Spacer,
 } from "@chakra-ui/react";
-import { ExternalLinkIcon } from "@chakra-ui/icons";
 
 export function EmptyState(props: { onChoice: (question: string) => any }) {
   const handleClick = (e: MouseEvent) => {

diff --git a/chat-langchain/public/images/github-mark.svg b/chat-langchain/public/images/github-mark.svg