UI Redesign and fixing many details (#496)

* feat: :lipstick: start of major design upgrade

* feat: :lipstick: model selection page

* feat: :lipstick: use shortcut to add highlighted code as ctx

* feat: :lipstick: better display of errors

* feat: :lipstick: ui for learning keyboard shortcuts, more details

* refactor: :construction: testing slash commands ui

* Truncate continue.log

* refactor: :construction: refactoring client_session, ui, more

* feat: :bug: layout fixes

* refactor: :lipstick: ui to enter OpenAI Key

* refactor: :truck: rename MaybeProxyOpenAI -> OpenAIFreeTrial

* starting help center

* removing old shortcut docs

* fix: :bug: fix model setting logic to avoid overwrites

* feat: :lipstick: tutorial and model descriptions

* refactor: :truck: rename unused -> saved

* refactor: :truck: rename model roles

* feat: :lipstick: edit indicator

* refactor: :lipstick: move +, folder icons

* feat: :lipstick: tab to clear all context

* fix: :bug: context providers ui fixes

* fix: :bug: fix lag when stopping step

* fix: :bug: don't override system message for models

* fix: :bug: fix continue button cursor

* feat: :lipstick: title bar

* fix: :bug: updates to code highlighting logic and more

* fix: :bug: fix renaming of summarize model role

* feat: :lipstick: help page and better session title

* feat: :lipstick: more help page / ui improvements

* feat: :lipstick: set session title

* fix: :bug: small fixes for changing sessions

* fix: :bug: perfecting the highlighting code and ctx interactions

* style: :lipstick: sticky headers for scroll, ollama warming

* fix: :bug: fix toggle bug

---------

Co-authored-by: Ty Dunn <ty@tydunn.com>

1 files changed, 82 insertions, 2 deletions

diff --git a/extension/react-app/src/redux/slices/serverStateReducer.ts b/extension/react-app/src/redux/slices/serverStateReducer.ts
index 904b0e76..3a2e455a 100644
--- a/extension/react-app/src/redux/slices/serverStateReducer.ts
+++ b/extension/react-app/src/redux/slices/serverStateReducer.ts
@@ -1,6 +1,74 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { FullState } from "../../../../schema/FullState";
 
+const TEST_TIMELINE = [
+  {
+    step: {
+      description: "Hi, please write bubble sort in python",
+      name: "User Input",
+    },
+  },
+  {
+    step: {
+      description: `\`\`\`python
+def bubble_sort(arr):
+  n = len(arr)
+  for i in range(n):
+      for j in range(0, n - i - 1):
+          if arr[j] > arr[j + 1]:
+              arr[j], arr[j + 1] = arr[j + 1], arr[j]
+              return arr
+\`\`\``,
+      name: "Bubble Sort in Python",
+    },
+  },
+  {
+    step: {
+      description: "Now write it in Rust",
+      name: "User Input",
+    },
+  },
+  {
+    step: {
+      description: "Hello! This is a test...\n\n1, 2, 3, testing...",
+      name: "Testing",
+    },
+  },
+  {
+    step: {
+      description: `Sure, here's bubble sort written in rust: \n\`\`\`rust
+fn bubble_sort<T: Ord>(values: &mut[T]) {
+  let len = values.len();
+  for i in 0..len {
+      for j in 0..(len - i - 1) {
+          if values[j] > values[j + 1] {
+              values.swap(j, j + 1);
+          }
+      }
+  }
+}
+\`\`\`\nIs there anything else I can answer?`,
+      name: "Rust Bubble Sort",
+    },
+    active: true,
+  },
+];
+
+const TEST_SLASH_COMMANDS = [
+  {
+    name: "edit",
+    description: "Edit the code",
+  },
+  {
+    name: "cmd",
+    description: "Generate a command",
+  },
+  {
+    name: "help",
+    description: "Get help using Continue",
+  },
+];
+
 const initialState: FullState = {
   history: {
     timeline: [],
@@ -30,9 +98,21 @@ export const serverStateSlice = createSlice({
     temporarilyPushToUserInputQueue: (state, action) => {
       state.user_input_queue = [...state.user_input_queue, action.payload];
     },
+    temporarilyClearSession: (state) => {
+      state.history.timeline = [];
+      state.selected_context_items = [];
+      state.session_info = {
+        title: "Loading session...",
+        session_id: "",
+        date_created: "",
+      };
+    },
   },
 });
 
-export const { setServerState, temporarilyPushToUserInputQueue } =
-  serverStateSlice.actions;
+export const {
+  setServerState,
+  temporarilyPushToUserInputQueue,
+  temporarilyClearSession,
+} = serverStateSlice.actions;
 export default serverStateSlice.reducer;