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, 59 insertions, 0 deletions

diff --git a/extension/react-app/src/components/TimelineItem.tsx b/extension/react-app/src/components/TimelineItem.tsx
new file mode 100644
index 00000000..78568890
--- /dev/null
+++ b/extension/react-app/src/components/TimelineItem.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { lightGray, secondaryDark, vscBackground } from ".";
+import styled from "styled-components";
+import { ChatBubbleOvalLeftIcon, PlusIcon } from "@heroicons/react/24/outline";
+
+const CollapseButton = styled.div`
+  background-color: ${vscBackground};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+  margin-left: 5px;
+  cursor: pointer;
+`;
+
+const CollapsedDiv = styled.div`
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  min-height: 16px;
+`;
+
+interface TimelineItemProps {
+  historyNode: any;
+  open: boolean;
+  onToggle: () => void;
+  children: any;
+  iconElement?: any;
+}
+
+function TimelineItem(props: TimelineItemProps) {
+  return props.open ? (
+    props.children
+  ) : (
+    <CollapsedDiv>
+      <CollapseButton
+        onClick={() => {
+          props.onToggle();
+        }}
+      >
+        {props.iconElement || (
+          <ChatBubbleOvalLeftIcon width="16px" height="16px" />
+        )}
+      </CollapseButton>
+      <span style={{ color: lightGray }}>
+        {props.historyNode.observation?.error
+          ? props.historyNode.observation?.title
+          : props.historyNode.step.name}
+      </span>
+    </CollapsedDiv>
+  );
+}
+
+export default TimelineItem;