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>

6 files changed, 280 insertions, 26 deletions

diff --git a/extension/schema/ContinueConfig.d.ts b/extension/schema/ContinueConfig.d.ts
index 5341056f..92f6e047 100644
--- a/extension/schema/ContinueConfig.d.ts
+++ b/extension/schema/ContinueConfig.d.ts
@@ -9,6 +9,7 @@ export type ContinueConfig = ContinueConfig1;
 export type Name = string;
 export type Hide = boolean;
 export type Description = string;
+export type ClassName = string;
 export type SystemMessage = string;
 export type Role = "assistant" | "user" | "system" | "function";
 export type Content = string;
@@ -18,36 +19,146 @@ export type Name2 = string;
 export type Arguments = string;
 export type ChatContext = ChatMessage[];
 export type ManageOwnChatContext = boolean;
+/**
+ * Steps that will be automatically run at the beginning of a new session
+ */
 export type StepsOnStartup = Step[];
+/**
+ * Steps that are not allowed to be run, and will be skipped if attempted
+ */
 export type DisallowedSteps = string[];
+/**
+ * If this field is set to True, we will collect anonymous telemetry as described in the documentation page on telemetry. If set to False, we will not collect any data.
+ */
 export type AllowAnonymousTelemetry = boolean;
+/**
+ * Configuration for the models used by Continue. Read more about how to configure models in the documentation.
+ */
 export type Models = Models1;
-export type RequiresApiKey = string;
-export type RequiresUniqueId = boolean;
-export type RequiresWriteLog = boolean;
+/**
+ * A title that will identify this model in the model selection dropdown
+ */
+export type Title = string;
+/**
+ * A system message that will always be followed by the LLM
+ */
 export type SystemMessage1 = string;
+/**
+ * The maximum context length of the LLM in tokens, as counted by count_tokens.
+ */
+export type ContextLength = number;
+/**
+ * The unique ID of the user.
+ */
+export type UniqueId = string;
+/**
+ * The name of the model to be used (e.g. gpt-4, codellama)
+ */
+export type Model = string;
+/**
+ * Tokens that will stop the completion.
+ */
+export type StopTokens = string[];
+/**
+ * Set the timeout for each request to the LLM. If you are running a local LLM that takes a while to respond, you might want to set this to avoid timeouts.
+ */
+export type Timeout = number;
+/**
+ * Whether to verify SSL certificates for requests.
+ */
+export type VerifySsl = boolean;
+/**
+ * Path to a custom CA bundle to use when making the HTTP request
+ */
+export type CaBundlePath = string;
+/**
+ * The API key for the LLM provider.
+ */
+export type ApiKey = string;
+export type Unused = LLM[];
+/**
+ * The temperature parameter for sampling from the LLM. Higher temperatures will result in more random output, while lower temperatures will result in more predictable output. This value ranges from 0 to 1.
+ */
 export type Temperature = number;
 export type Name3 = string;
 export type Prompt = string;
 export type Description1 = string;
+/**
+ * An array of custom commands that allow you to reuse prompts. Each has name, description, and prompt properties. When you enter /<name> in the text input, it will act as a shortcut to the prompt.
+ */
 export type CustomCommands = CustomCommand[];
 export type Name4 = string;
 export type Description2 = string;
+/**
+ * An array of slash commands that let you map custom Steps to a shortcut.
+ */
 export type SlashCommands = SlashCommand[];
+/**
+ * The step that will be run when a traceback is detected (when you use the shortcut cmd+shift+R)
+ */
+export type OnTraceback = Step;
+/**
+ * A system message that will always be followed by the LLM
+ */
 export type SystemMessage2 = string;
-export type Title = string;
-export type Name5 = string;
+/**
+ * A Policy object that can be used to override the default behavior of Continue, for example in order to build custom agents that take multiple steps at a time.
+ */
+export type PolicyOverride = Policy;
+/**
+ * The title of the ContextProvider. This is what must be typed in the input to trigger the ContextProvider.
+ */
+export type Title1 = string;
+/**
+ * The ContinueSDK instance accessible by the ContextProvider
+ */
+export type Sdk = ContinueSDK1;
+/**
+ * The display title of the ContextProvider shown in the dropdown menu
+ */
+export type DisplayTitle = string;
+/**
+ * A description of the ContextProvider displayed in the dropdown menu
+ */
 export type Description3 = string;
+/**
+ * Indicates whether the ContextProvider is dynamic
+ */
+export type Dynamic = boolean;
+/**
+ * Indicates whether the ContextProvider requires a query. For example, the SearchContextProvider requires you to type '@search <STRING_TO_SEARCH>'. This will change the behavior of the UI so that it can indicate the expectation for a query.
+ */
+export type RequiresQuery = boolean;
+export type Name5 = string;
+export type Description4 = string;
 export type ProviderTitle = string;
 export type ItemId = string;
 export type Content1 = string;
 export type Editing = boolean;
 export type Editable = boolean;
+/**
+ * List of selected items in the ContextProvider
+ */
 export type SelectedItems = ContextItem[];
+/**
+ * A list of ContextProvider objects that can be used to provide context to the LLM by typing '@'. Read more about ContextProviders in the documentation.
+ */
 export type ContextProviders = ContextProvider[];
+/**
+ * An optional token to identify the user.
+ */
+export type UserToken = string;
+/**
+ * The URL of the server where development data is sent. No data is sent unless a valid user token is provided.
+ */
+export type DataServerUrl = string;
+/**
+ * If set to `True`, Continue will not generate summaries for each Step. This can be useful if you want to save on compute.
+ */
+export type DisableSummaries = boolean;
 
 /**
- * A pydantic class for the continue config file.
+ * Continue can be deeply customized by editing the `ContinueConfig` object in `~/.continue/config.py` (`%userprofile%\.continue\config.py` for Windows) on your machine. This class is instantiated from the config file for every new session.
  */
 export interface ContinueConfig1 {
   steps_on_startup?: StepsOnStartup;
@@ -57,16 +168,20 @@ export interface ContinueConfig1 {
   temperature?: Temperature;
   custom_commands?: CustomCommands;
   slash_commands?: SlashCommands;
-  on_traceback?: Step;
+  on_traceback?: OnTraceback;
   system_message?: SystemMessage2;
-  policy_override?: Policy;
+  policy_override?: PolicyOverride;
   context_providers?: ContextProviders;
+  user_token?: UserToken;
+  data_server_url?: DataServerUrl;
+  disable_summaries?: DisableSummaries;
   [k: string]: unknown;
 }
 export interface Step {
   name?: Name;
   hide?: Hide;
   description?: Description;
+  class_name?: ClassName;
   system_message?: SystemMessage;
   chat_context?: ChatContext;
   manage_own_chat_context?: ManageOwnChatContext;
@@ -95,14 +210,28 @@ export interface Models1 {
   large?: LLM;
   edit?: LLM;
   chat?: LLM;
+  unused?: Unused;
   sdk?: ContinueSDK;
   [k: string]: unknown;
 }
 export interface LLM {
-  requires_api_key?: RequiresApiKey;
-  requires_unique_id?: RequiresUniqueId;
-  requires_write_log?: RequiresWriteLog;
+  title?: Title;
   system_message?: SystemMessage1;
+  context_length?: ContextLength;
+  unique_id?: UniqueId;
+  model: Model;
+  stop_tokens?: StopTokens;
+  timeout?: Timeout;
+  verify_ssl?: VerifySsl;
+  ca_bundle_path?: CaBundlePath;
+  prompt_templates?: PromptTemplates;
+  api_key?: ApiKey;
+  [k: string]: unknown;
+}
+/**
+ * A dictionary of prompt templates that can be used to customize the behavior of the LLM in certain situations. For example, set the "edit" key in order to change the prompt that is used for the /edit slash command. Each value in the dictionary is a string templated in mustache syntax, and filled in at runtime with the variables specific to the situation. See the documentation for more information.
+ */
+export interface PromptTemplates {
   [k: string]: unknown;
 }
 export interface ContinueSDK {
@@ -140,8 +269,12 @@ export interface Policy {
  * When you hit enter on an option, the context provider will add that item to the autopilot's list of context (which is all stored in the ContextManager object).
  */
 export interface ContextProvider {
-  title: Title;
-  sdk?: ContinueSDK1;
+  title: Title1;
+  sdk?: Sdk;
+  display_title: DisplayTitle;
+  description: Description3;
+  dynamic: Dynamic;
+  requires_query?: RequiresQuery;
   selected_items?: SelectedItems;
   [k: string]: unknown;
 }
@@ -168,7 +301,7 @@ export interface ContextItem {
  */
 export interface ContextItemDescription {
   name: Name5;
-  description: Description3;
+  description: Description4;
   id: ContextItemId;
   [k: string]: unknown;
 }
diff --git a/extension/schema/FullState.d.ts b/extension/schema/FullState.d.ts
index a847a608..5d5a5444 100644
--- a/extension/schema/FullState.d.ts
+++ b/extension/schema/FullState.d.ts
@@ -9,6 +9,7 @@ export type FullState = FullState1;
 export type Name = string;
 export type Hide = boolean;
 export type Description = string;
+export type ClassName = string;
 export type SystemMessage = string;
 export type Role = "assistant" | "user" | "system" | "function";
 export type Content = string;
@@ -44,6 +45,12 @@ export type DateCreated = string;
 export type WorkspaceDirectory = string;
 export type SystemMessage1 = string;
 export type Temperature = number;
+export type Title1 = string;
+export type DisplayTitle = string;
+export type Description3 = string;
+export type Dynamic = boolean;
+export type RequiresQuery = boolean;
+export type ContextProviders = ContextProviderDescription[];
 
 /**
  * A full state of the program, including the history
@@ -58,6 +65,7 @@ export interface FullState1 {
   session_info?: SessionInfo;
   config: ContinueConfig;
   saved_context_groups?: SavedContextGroups;
+  context_providers?: ContextProviders;
   [k: string]: unknown;
 }
 /**
@@ -84,6 +92,7 @@ export interface Step {
   name?: Name;
   hide?: Hide;
   description?: Description;
+  class_name?: ClassName;
   system_message?: SystemMessage;
   chat_context?: ChatContext;
   manage_own_chat_context?: ManageOwnChatContext;
@@ -154,3 +163,11 @@ export interface ContinueConfig {
 export interface SavedContextGroups {
   [k: string]: ContextItem[];
 }
+export interface ContextProviderDescription {
+  title: Title1;
+  display_title: DisplayTitle;
+  description: Description3;
+  dynamic: Dynamic;
+  requires_query: RequiresQuery;
+  [k: string]: unknown;
+}
diff --git a/extension/schema/History.d.ts b/extension/schema/History.d.ts
index 90124f4a..b00a1505 100644
--- a/extension/schema/History.d.ts
+++ b/extension/schema/History.d.ts
@@ -9,6 +9,7 @@ export type History = History1;
 export type Name = string;
 export type Hide = boolean;
 export type Description = string;
+export type ClassName = string;
 export type SystemMessage = string;
 export type Role = "assistant" | "user" | "system" | "function";
 export type Content = string;
@@ -49,6 +50,7 @@ export interface Step {
   name?: Name;
   hide?: Hide;
   description?: Description;
+  class_name?: ClassName;
   system_message?: SystemMessage;
   chat_context?: ChatContext;
   manage_own_chat_context?: ManageOwnChatContext;
diff --git a/extension/schema/HistoryNode.d.ts b/extension/schema/HistoryNode.d.ts
index 5ad32061..08424d75 100644
--- a/extension/schema/HistoryNode.d.ts
+++ b/extension/schema/HistoryNode.d.ts
@@ -9,6 +9,7 @@ export type HistoryNode = HistoryNode1;
 export type Name = string;
 export type Hide = boolean;
 export type Description = string;
+export type ClassName = string;
 export type SystemMessage = string;
 export type Role = "assistant" | "user" | "system" | "function";
 export type Content = string;
@@ -39,6 +40,7 @@ export interface Step {
   name?: Name;
   hide?: Hide;
   description?: Description;
+  class_name?: ClassName;
   system_message?: SystemMessage;
   chat_context?: ChatContext;
   manage_own_chat_context?: ManageOwnChatContext;
diff --git a/extension/schema/LLM.d.ts b/extension/schema/LLM.d.ts
index 255c752e..31d38456 100644
--- a/extension/schema/LLM.d.ts
+++ b/extension/schema/LLM.d.ts
@@ -6,15 +6,64 @@
  */
 
 export type LLM = LLM1;
-export type RequiresApiKey = string;
-export type RequiresUniqueId = boolean;
-export type RequiresWriteLog = boolean;
+/**
+ * A title that will identify this model in the model selection dropdown
+ */
+export type Title = string;
+/**
+ * A system message that will always be followed by the LLM
+ */
 export type SystemMessage = string;
+/**
+ * The maximum context length of the LLM in tokens, as counted by count_tokens.
+ */
+export type ContextLength = number;
+/**
+ * The unique ID of the user.
+ */
+export type UniqueId = string;
+/**
+ * The name of the model to be used (e.g. gpt-4, codellama)
+ */
+export type Model = string;
+/**
+ * Tokens that will stop the completion.
+ */
+export type StopTokens = string[];
+/**
+ * Set the timeout for each request to the LLM. If you are running a local LLM that takes a while to respond, you might want to set this to avoid timeouts.
+ */
+export type Timeout = number;
+/**
+ * Whether to verify SSL certificates for requests.
+ */
+export type VerifySsl = boolean;
+/**
+ * Path to a custom CA bundle to use when making the HTTP request
+ */
+export type CaBundlePath = string;
+/**
+ * The API key for the LLM provider.
+ */
+export type ApiKey = string;
 
 export interface LLM1 {
-  requires_api_key?: RequiresApiKey;
-  requires_unique_id?: RequiresUniqueId;
-  requires_write_log?: RequiresWriteLog;
+  title?: Title;
   system_message?: SystemMessage;
+  context_length?: ContextLength;
+  unique_id?: UniqueId;
+  model: Model;
+  stop_tokens?: StopTokens;
+  timeout?: Timeout;
+  verify_ssl?: VerifySsl;
+  ca_bundle_path?: CaBundlePath;
+  prompt_templates?: PromptTemplates;
+  api_key?: ApiKey;
+  [k: string]: unknown;
+}
+/**
+ * A dictionary of prompt templates that can be used to customize the behavior of the LLM in certain situations. For example, set the "edit" key in order to change the prompt that is used for the /edit slash command. Each value in the dictionary is a string templated in mustache syntax, and filled in at runtime with the variables specific to the situation. See the documentation for more information.
+ */
+export interface PromptTemplates {
   [k: string]: unknown;
 }
diff --git a/extension/schema/Models.d.ts b/extension/schema/Models.d.ts
index 33e068b5..9005c08c 100644
--- a/extension/schema/Models.d.ts
+++ b/extension/schema/Models.d.ts
@@ -6,10 +6,47 @@
  */
 
 export type Models = Models1;
-export type RequiresApiKey = string;
-export type RequiresUniqueId = boolean;
-export type RequiresWriteLog = boolean;
+/**
+ * A title that will identify this model in the model selection dropdown
+ */
+export type Title = string;
+/**
+ * A system message that will always be followed by the LLM
+ */
 export type SystemMessage = string;
+/**
+ * The maximum context length of the LLM in tokens, as counted by count_tokens.
+ */
+export type ContextLength = number;
+/**
+ * The unique ID of the user.
+ */
+export type UniqueId = string;
+/**
+ * The name of the model to be used (e.g. gpt-4, codellama)
+ */
+export type Model = string;
+/**
+ * Tokens that will stop the completion.
+ */
+export type StopTokens = string[];
+/**
+ * Set the timeout for each request to the LLM. If you are running a local LLM that takes a while to respond, you might want to set this to avoid timeouts.
+ */
+export type Timeout = number;
+/**
+ * Whether to verify SSL certificates for requests.
+ */
+export type VerifySsl = boolean;
+/**
+ * Path to a custom CA bundle to use when making the HTTP request
+ */
+export type CaBundlePath = string;
+/**
+ * The API key for the LLM provider.
+ */
+export type ApiKey = string;
+export type Unused = LLM[];
 
 /**
  * Main class that holds the current model configuration
@@ -21,14 +58,28 @@ export interface Models1 {
   large?: LLM;
   edit?: LLM;
   chat?: LLM;
+  unused?: Unused;
   sdk?: ContinueSDK;
   [k: string]: unknown;
 }
 export interface LLM {
-  requires_api_key?: RequiresApiKey;
-  requires_unique_id?: RequiresUniqueId;
-  requires_write_log?: RequiresWriteLog;
+  title?: Title;
   system_message?: SystemMessage;
+  context_length?: ContextLength;
+  unique_id?: UniqueId;
+  model: Model;
+  stop_tokens?: StopTokens;
+  timeout?: Timeout;
+  verify_ssl?: VerifySsl;
+  ca_bundle_path?: CaBundlePath;
+  prompt_templates?: PromptTemplates;
+  api_key?: ApiKey;
+  [k: string]: unknown;
+}
+/**
+ * A dictionary of prompt templates that can be used to customize the behavior of the LLM in certain situations. For example, set the "edit" key in order to change the prompt that is used for the /edit slash command. Each value in the dictionary is a string templated in mustache syntax, and filled in at runtime with the variables specific to the situation. See the documentation for more information.
+ */
+export interface PromptTemplates {
   [k: string]: unknown;
 }
 export interface ContinueSDK {