1 files changed, 114 insertions, 0 deletions
diff --git a/moneyjsx/src/support-models.tsx b/moneyjsx/src/support-models.tsx
new file mode 100644
index 0000000..2afd726
--- /dev/null
+++ b/moneyjsx/src/support-models.tsx
@@ -0,0 +1,114 @@
+import $ from "jquery";
+import * as JSX from './jsx';
+import * as API from "./api";
+import * as user from "./user";
+import * as util from "./util";
+
+import { Page, GroupBox, Spinner, Dropdown, DropdownItem } from './components';
+
+export default function Models() {
+  if( !API.models.length ) {
+    const modelTimeout = () => {
+      if( API.models.length )
+        JSX.navigateSilent( "/models" );
+      else
+        setTimeout( modelTimeout, 100 );
+    }
+
+    modelTimeout();
+
+    return <Page>
+      <div>
+        <Spinner />
+      </div>
+    </Page>
+  }
+
+  let model = API.models[0].name;
+  if( user.is_loggedin && user.settings.site_prefs && user.settings.site_prefs.model )
+    model = user.settings.site_prefs.model!;
+
+  return <Page>
+    <GroupBox title="Models" style="width: 85%">
+      <div id="selector-wrapper">
+        <Dropdown title={ model } id="model-selector" inline>
+          { API.models.map( ( m ) => <DropdownItem onclick={ changeModel }>{ m.name }</DropdownItem> ) }
+        </Dropdown>
+      </div>
+
+      <div id="model-list"><ModelInfo model={ API.getModelFromName( model ) } /></div>
+    </GroupBox>
+  </Page>
+}
+
+function changeModel( e: Event ) {
+  const el = $( e.target );
+  const txt = el.text();
+  console.log( txt );
+  const m = API.getModelFromName( txt );
+  console.log( m );
+
+  $( "#model-list" ).children().replaceWith(
+    <ModelInfo model={ m } />
+  );
+
+  $( "#model-selector" ).text( m.name );
+}
+
+
+function ModelInfo( props: any ) {
+  const m = props.model as API.Model;
+  return <div class="model-item">
+    <div class="model-header" style="text-align: left">
+      <h2 style="padding: 0px 10px 20px; margin: 0;">
+        { m.name }
+      </h2>
+    </div>
+    <div class="model-body">
+      <div class="model-capabilities">
+        <span class={ m.capabilities.web    ? "green" : "red" }>Web           { m.capabilities.web ? '✔' : '✘' }</span>
+        <span class={ m.capabilities.notes  ? "green" : "red" }>Notes         { m.capabilities.notes ? '✔' : '✘' }</span>
+        <span class={ m.capabilities.vision ? "green" : "red" }>Vision        { m.capabilities.vision ? '✔' : '✘' }</span>
+        <span class={ m.capabilities.remind ? "green" : "red" }>Memory Lookup { m.capabilities.remind ? '✔' : '✘' }</span>
+      </div>
+      <div class="model-description">
+        { m.description.full }
+      </div>
+      <div id="model-license-wrapper"></div>
+      <br />
+    </div>
+    <ModelLicense>
+      { util.escapeHtml( m.license ) }
+    </ModelLicense>
+  </div>;
+}
+
+let license_open = false;
+function ModelLicense( props: any ) {
+  const collapseToggle = () => {
+    const el = $( "#model-license" );
+    let list  = el.find( '.tool-call-list' );
+    let btn   = el.find( '.tool-call-collapse' );
+
+    license_open = list.css( 'display' ) == 'block';
+    if( !license_open ) {
+      list.css( 'display', 'block' );
+      btn.text( '-' );
+    } else {
+      list.css( 'display', 'none' );
+      btn.text( '+' );
+    }
+  };
+
+  let el = <div class='tool-call' id="model-license" onclick={ collapseToggle }>
+      <div class='tool-call-title-wrapper'>
+        <span class='tool-call-title'>License</span>
+        <span class='tool-call-collapse'>{ license_open ? '-' : '+' }</span>
+      </div>
+      <div class='tool-call-list' style={ `display: ${ license_open ? 'block' : 'none' }; white-space: pre-line; text-align: left` }>
+        { props.children }
+      </div>
+    </div>;
+
+  return el;
+}