Merge pull request #43 from ryanleung/ryanleung-ui-fixes

src/frontend/components/buttons/connect-wallet-button.tsx

@@ -23,7 +23,6 @@ export default forwardRef<HTMLDivElement>((props: Props, ref) => {
     <ConnectWalletButton.Wrapper onClick={onClick} ref={ref}>
       <ConnectWalletButton.Logo src={wallet} />
       <ConnectWalletButton.Text>{connected ? 'connected' : 'connect'}</ConnectWalletButton.Text>
-      {!connecting && <ConnectWalletButton.Badge $connected={connected} $connecting={connecting} />}
     </ConnectWalletButton.Wrapper>
   );
 });

src/frontend/components/buttons/navigation-button.tsx

@@ -33,14 +33,15 @@ const MainNavButton = {
     height: 100%;
     margin: 0 15px;
     align-items: center;
-    color: ${(props) => (props.active === 'active' ? props.theme.colors.emerald : props.theme.colors.balance)};
+    color: ${(props) => props.theme.colors.balance};
+    opacity: ${(props) => (props.active === 'active' ? 1 : 0.5)};
     font-family: ${(props) => props.theme.fonts.family.primary.bold};
     font-size: ${(props) => props.theme.fonts.size.medium};
     text-decoration: none;
     transition: border 0.25s, color 0.25s;
 
     &:hover span {
-      color: ${(props) => props.theme.colors.emerald};
+      opacity: 0.75;
     }
   `,
   Icon: Styled.img`

src/frontend/components/layout/main.tsx

@@ -48,6 +48,7 @@ const Main = {
     border-radius: 30px;
     border: 5px solid ${(props) => props.theme.colors.hunter};
     padding: 10px;
+    overflow: hidden;
   `,
   BottomWrapper: Styled.div`
     display: flex;

src/frontend/utils/utils.ts

@@ -4,22 +4,17 @@ import { ModelResponse } from './types';
 export const parseResponse = (jsonString: string) => {
   // Assert the type of the parsed object.
   console.log(jsonString);
+
   // uses regex to remove comments that llama sometimes includes in the JSON string
   // ranges from // to the end of the line or the end of the string
-  jsonString = jsonString.replace(/(?<!\\)\/\/.*?(?=\n|$)/gm, '');
+  // jsonString = jsonString.replace(/(?<!\\)\/\/.*?(?=\n|$)/gm, '');
   let parsed: string;
   try {
     parsed = JSON.parse(jsonString);
   } catch (error) {
-    try {
-      jsonString = jsonString + '}'; //llama often forgets this
-      parsed = JSON.parse(jsonString);
-    } catch (error) {
-      new Error('Ollama error');
-      return { response: 'error', action: {} };
-    }
+    new Error('Ollama error');
+    return { response: 'error', action: {} };
   }
-
   if (isModelResponse(parsed)) {
     return { response: parsed.response, action: parsed.action };
   } else {

src/frontend/views/chat.tsx

@@ -181,6 +181,7 @@ const ChatView = (): JSX.Element => {
     console.log(inference);
     if (inference) {
       const { response, action: action } = parseResponse(inference.message.content);
+
       if (response == 'error') {
         updateDialogueEntries(question, 'Sorry, I had a problem with your request.');
       } else {
@@ -276,7 +277,7 @@ const ChatView = (): JSX.Element => {
             }}
           />
           <Chat.SubmitButton
-            disabled={isOllamaBeingPolled}
+            disabled={isOllamaBeingPolled || !inputValue}
             onClick={() => handleQuestionAsked(inputValue)}
           />
         </Chat.InputWrapper>
@@ -371,11 +372,11 @@ const Chat = {
     background: ${(props) => props.theme.colors.hunter};
     position: absolute;
     right: 5px;
-    cursor: pointer;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
     border: none;
 
     &:hover {
-      background: ${(props) => props.theme.colors.emerald};
+      background: ${(props) => (props.disabled ? props.theme.colors.hunter : props.theme.colors.emerald)};
     }
   `,
   Dropdown: Styled.select`
@@ -389,7 +390,7 @@ const Chat = {
       border: 2px solid ${(props) => props.theme.colors.hunter}; 
       font-family: ${(props) => props.theme.fonts.family.primary.regular};
       font-size: ${(props) => props.theme.fonts.size.small};
-      cursor: pointer;
+      cursor:  pointer;
 
       &:hover {
         border: 2px solid ${(props) => props.theme.colors.emerald};